/* Patch — marketing site
   Section art lives in assets/img (built by tools/); all copy, buttons and
   controls are HTML/CSS layered on top. */

:root {
  --ink: #12203d;
  --navy: #1a2748;
  --night: #111a30;
  --rust: #a64f29;
  --rust-hi: #c0643a;
  --cream: #f7efe1;
  --linen: #efe5d3;
  --thread: #c98545;
  --gold: #f2bb7c;
  --peach: #e6935f;
  --terracotta: #cf7350;
  --muted: #4b4f5a;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1320px;
  /* v2 fabric surfaces (small seamless tiles, shared by buttons, labels, tiles and cards) */
  --tex-suede: url("data:image/webp;base64,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");
  --tex-fabric: url("data:image/webp;base64,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");
  --tex-cream: url("data:image/webp;base64,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");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--cream); border-radius: 8px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.ico { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.3rem, 3.7vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 4.3vw, 4.6rem); }
.display--xxl { font-size: clamp(3rem, 5.2vw, 5.6rem); line-height: .98; }
.accent-gold { color: var(--gold); }
.accent-peach { color: var(--peach); }
.accent-rust { color: var(--rust); }
.accent-terracotta { color: var(--terracotta); }
.lede { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.5; color: rgba(255, 246, 232, .92); }
.lede--lg { font-size: clamp(1.2rem, 1.7vw, 1.75rem); }
.body { font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.6; color: var(--muted); }
.body--lg { font-size: clamp(1.05rem, 1.35vw, 1.4rem); }

/* Nine-slice felt pieces (tools/build_assets.py nine_slice). The art sits on ::before so the
   element keeps normal padding; caps keep their shape and the straight stitched runs repeat
   (`round`) at their natural spacing instead of stretching. Per piece:
     --felt        image
     --felt-sx/sy  source slice in px (printed by build_assets.py)
     --felt-w/h    drawn cap size; --felt-h: 50% for pieces that only grow sideways */
.felt9 { position: relative; isolation: isolate; }
.felt9::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0 solid transparent;
  border-image-source: var(--felt);
  border-image-slice: var(--felt-sy) var(--felt-sx) fill;
  border-image-width: var(--felt-h, 50%) var(--felt-w);
  border-image-repeat: round var(--felt-ry, stretch);
  pointer-events: none;
}

/* Sewn-on linen label, e.g. "HOW IT WORKS" (v2 round 3): a plain cream linen label with soft frayed
   edges (Scenario cut-out label.webp, 270x112, no stitching; 9-sliced with 65px caps and a seamless
   middle tile), plus a running stitch laid on top from one real thread-dash tile (stitch-h/-v.webp,
   cut from the generated label) repeated with "round": every dash is the same length on all four
   sides at any label width. Text is real HTML: navy letter-spaced caps. */
.eyebrow {
  --lh: 3.2em;
  --st: .27em;              /* thread thickness (a dash is 71/24 of this long) */
  --sin: .44em;             /* stitch inset from the label edge */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: var(--lh);
  margin-bottom: clamp(18px, 1.9vw, 28px);
  padding: .1em 1.75em 0 1.7em;
  font-size: clamp(.84rem, 1.02vw, 1rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1b2747;
  border: 0 solid transparent;
  border-image-source: var(--img-label, none);
  border-image-slice: 0 65 0 65 fill;
  border-image-width: 0 calc(var(--lh) * 65 / 112);
  border-image-repeat: round stretch;
  background: none;
  filter: drop-shadow(0 1px 1px rgba(30, 18, 8, .26)) drop-shadow(0 3px 4px rgba(30, 18, 8, .18)) drop-shadow(0 8px 12px rgba(30, 18, 8, .1));
}
.eyebrow::before, .eyebrow::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* top + bottom runs (one real thread-dash tile, repeated whole with "round") */
.eyebrow::after {
  inset: var(--sin) calc(var(--sin) + .62em);
  background:
    var(--img-stitch-h, none) 0 0 / auto var(--st) round no-repeat,
    var(--img-stitch-h, none) 0 100% / auto var(--st) round no-repeat;
  background-repeat: round no-repeat;
}
/* left + right runs: exactly two tiles (two dashes, same length as the top/bottom ones), centred on each end */
.eyebrow::before {
  --dash: calc(var(--st) * 71 / 24);
  --gap: .2em;              /* matches the gap between the top/bottom dashes */
  top: calc((var(--lh) - var(--dash) * 2 - var(--gap)) / 2);
  height: calc(var(--dash) * 2 + var(--gap));
  left: var(--sin);
  right: var(--sin);
  background:
    var(--img-stitch-v, none) 0 0 / var(--st) var(--dash),
    var(--img-stitch-v, none) 100% 0 / var(--st) var(--dash);
  background-repeat: no-repeat space;
}
@media (max-width: 700px) { .eyebrow { letter-spacing: .16em; font-size: .8rem; } }
.eyebrow--plain { height: auto; padding: 0; white-space: normal; background: none; box-shadow: none; border-image: none; filter: none; color: rgba(255, 246, 232, .9); letter-spacing: .32em; }
.eyebrow--plain::before, .eyebrow--plain::after { display: none; }

/* Hand-sewn running stitch along a section's top and/or bottom edge (v2, after the mock-ups):
   two dashed lines drawn with gradients; --stitch-line sets the thread colour. */
.stitched { position: relative; --stitch-line: rgba(201, 133, 69, .9); --stitch-in: clamp(30px, 2.6vw, 38px); }
.stitched, .stitched--top, .stitched--bottom { --dash: repeating-linear-gradient(90deg, var(--stitch-line) 0 13px, transparent 13px 22px); }
.stitched::after {
  content: "";
  position: absolute;
  inset: var(--stitch-in) 0;
  z-index: 4;
  pointer-events: none;
  background: var(--st-top, none) top left / 100% 2px no-repeat, var(--st-bottom, none) bottom left / 100% 2px no-repeat;
}
.stitched--top { --st-top: var(--dash); }
.stitched--bottom { --st-bottom: var(--dash); }

/* Cut-out decorations (dried flowers, knitwear, stars, buttons) sit behind the content in a clipped layer */
.has-decor { position: relative; overflow-x: clip; overflow-y: visible; }
.has-decor > .wrap { position: relative; z-index: 1; }
/* the clip lives on the decor layer, not the section, so each section's seam trim (::before,
   straddling the boundary above it) is never cut in half */
.decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.deco { position: absolute; display: block; background: center / contain no-repeat; }
.features__flowers, .faq__flowers { background-image: var(--img-flowers-tall, none); }
.how__flowers, .pricing__flowers { background-image: var(--img-flowers-airy, none); }
/* The sprigs are cut-outs whose stems end in a straight cut at the bottom of the art: every sprig is
   anchored past a section edge or tucked behind knitwear, and its lower stems also fade out, so a cut
   end can never show. */
.features__flowers, .faq__flowers, .how__flowers, .pricing__flowers {
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 9%, #000 24%);
  mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 9%, #000 24%);
}
.how__knit, .features__knit { background-image: var(--img-knit-corner, none); }
.how__star, .features__star { background-image: var(--img-star-felt, none); }

/* Felt seam over every section boundary. Generated, seamlessly tiling art with alpha
   (tools/generate_assets.py → build_assets.py); it straddles the colour change. */
.seam { position: relative; --seam-h: clamp(18px, 1.7vw, 26px); }
.seam::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--seam-h);
  transform: translateY(-50%);
  z-index: 5;
  background: var(--seam-img) 0 50% / auto 100% repeat-x;
  filter: drop-shadow(0 2px 3px rgba(20, 12, 6, .3));
  pointer-events: none;
}
/* Ten trims, one per boundary in page order, none repeated (Pass 5). The first three are
   the mock-up's (Mockups/Patch_ Good.png); the rest are tools/generate_assets.py seam-*. */
.seam--picot { --seam-img: url("../assets/img/seam-picot.webp"); }         /* hero / meet: cream picot tape, running stitch */
.seam--eyelet { --seam-img: url("../assets/img/seam-eyelet.webp"); }       /* meet / how: eyelet lace */
.seam--yarn { --seam-img: url("../assets/img/seam-yarn.webp"); --seam-h: clamp(26px, 2.3vw, 36px); } /* how / features: yarn and buttons */
.seam--fray { --seam-img: url("../assets/img/seam-fray.webp"); }           /* features / voices: frayed linen, blanket stitch */
.seam--patchwork { --seam-img: url("../assets/img/seam-patchwork.webp"); --seam-h: clamp(22px, 2vw, 30px); } /* voices / privacy: quilted squares */
.seam--zigzag { --seam-img: url("../assets/img/seam-zigzag.webp"); }       /* privacy / pricing: rust ric rac */
.seam--ribbon { --seam-img: url("../assets/img/seam-ribbon.webp"); }       /* pricing / day: ribbon tied with a bow */
.seam--ribbon::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: calc(var(--bow-h) * 1.3); height: var(--bow-h);
  --bow-h: clamp(48px, 4.6vw, 68px);
  transform: translate(-50%, -42%);
  z-index: 6;
  background: url("../assets/img/seam-bow.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(20, 12, 6, .3));
  pointer-events: none;
}
.seam--pinked { --seam-img: url("../assets/img/seam-pinked.webp"); }       /* day / faq: pinking-shear cut felt */
.seam--torn { --seam-img: url("../assets/img/seam-torn.webp"); }           /* faq / goodnight: torn felt edge */
.seam--rib { --seam-img: url("../assets/img/seam-rib.webp"); --seam-h: clamp(22px, 2vw, 30px); } /* faq / goodnight (round 16) and goodnight / footer: knitted rib */

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .7em 1.6em;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 60px; padding: .8em 1.9em; font-size: clamp(1.05rem, 1.3vw, 1.3rem); }
.btn--block { width: 100%; }

/* Felt buttons (Pass 5): one whole image per button, made offline at the width its label
   needs (tools/build_assets.py buttons), drawn unsliced at a fixed width/height ratio. With
   no slices there are no joins for the hover lift to expose. Text scales with --h, so the
   label always fits the same share of the felt.
     --felt   image      --ratio  its width / height (printed by build_assets.py)  */
.btn--felt {
  --h: 56px;
  --ratio: 3.6;
  flex: none;
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
  min-height: 0;
  padding: 0 0 calc(var(--h) * .05); /* the felt sits a touch above the image centre (shadow below) */
  border: 0;
  border-radius: 0;
  background: var(--felt) center / 100% 100% no-repeat;
  font-family: "Lora", var(--serif);
  font-weight: 600;
  font-size: calc(var(--h) * .34);
  filter: drop-shadow(0 4px 6px rgba(40, 20, 8, .32));
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), filter .25s ease;
}
.btn--felt:hover { transform: translateY(-3px); filter: drop-shadow(0 9px 12px rgba(40, 20, 8, .34)) brightness(1.04); }
.btn--felt:active { transform: translateY(0); filter: drop-shadow(0 3px 4px rgba(40, 20, 8, .32)); }
.btn--felt:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 999px; }
.btn--lg.btn--felt { --h: clamp(56px, 4.6vw, 68px); }
.btn--clay { --felt: url("../assets/img/btn-meet.webp"); --ratio: 3.6; color: #fff7ec; text-shadow: 0 1px 1px rgba(80, 30, 10, .35); }
.btn--cream { --felt: url("../assets/img/btn-hear.webp"); --ratio: 3.75; color: #5b2c16; }
.btn--nav { --felt: url("../assets/img/btn-meet-nav.webp"); --ratio: 3.15; --h: 50px; color: #243b55; }
.btn--trial { --felt: url("../assets/img/btn-trial.webp"); --ratio: 5.2; }
.btn--lang { --felt: url("../assets/img/btn-lang.webp"); --ratio: 4.7; }
/* v2 hero + nav buttons: clean pills cut from seamless tiles (rust suede / beige fabric) with
   the stitching drawn in CSS, plus a ghost "Hear Patch" with a CSS-stitched outline. Labels are HTML. */
.btn--suede, .btn--fabric {
  flex: none;
  height: var(--h);
  min-height: 0;
  padding: 0 calc(var(--h) * .62);
  border: 0;
  border-radius: 999px;
  background-repeat: repeat;
  background-size: 128px 128px;
  font-family: "Lora", var(--serif);
  font-weight: 700;
  font-size: calc(var(--h) * .34);
  isolation: isolate;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, filter .25s ease;
}
.btn--suede::before, .btn--fabric::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--stitch);
  border-radius: inherit;
  pointer-events: none;
}
.btn--suede {
  --h: clamp(56px, 4.6vw, 68px);
  --stitch: rgba(246, 226, 196, .9);
  background-color: #a3461f;
  background-image: var(--tex-suede);
  color: #fbefdc;
  text-shadow: 0 1px 2px rgba(50, 18, 4, .55);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .22), inset 0 -3px 5px rgba(40, 12, 2, .38), 0 1px 1px rgba(10, 4, 0, .3), 0 3px 5px rgba(10, 4, 0, .28), 0 8px 16px rgba(10, 4, 0, .22);
}
.plan__cta { box-shadow: inset 0 1px 0 rgba(255, 220, 190, .18), inset 0 -2px 4px rgba(40, 12, 2, .35), 0 2px 4px rgba(10, 4, 0, .35); } /* approved in round 3: unchanged */
.btn--fabric {
  --h: 52px;
  --stitch: rgba(190, 132, 78, .95);
  padding-inline: calc(var(--h) * .55);
  background-color: #f1dfc4;
  background-image: var(--tex-fabric);
  color: #6a2a17;
  font-size: calc(var(--h) * .37);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 4px rgba(120, 80, 40, .24), 0 1px 1px rgba(10, 4, 0, .25), 0 3px 6px rgba(10, 4, 0, .22), 0 8px 14px rgba(10, 4, 0, .16);
}
.nav .btn--fabric { font-size: calc(var(--h) * .37); }
.btn--suede:hover, .btn--fabric:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--suede:active, .btn--fabric:active { transform: translateY(0); filter: none; }
.btn--suede:focus-visible, .btn--fabric:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.btn--ghost {
  --h: clamp(56px, 4.6vw, 68px);
  flex: none;
  height: var(--h);
  min-height: 0;
  padding: 0 1.25em 0 calc(var(--h) * .12);
  gap: .65em;
  background: rgba(18, 10, 6, .38);
  border: 2px dashed rgba(240, 214, 176, .85);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--h) * .33);
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), background-color .25s ease, border-color .25s ease;
}
.btn--ghost .btn__icon { flex: none; width: calc(var(--h) * .74); height: calc(var(--h) * .74); background: url("data:image/webp;base64,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") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.btn--ghost:hover { transform: translateY(-2px); background: rgba(18, 10, 6, .55); border-color: #f6dfb8; }
.btn--ghost:active { transform: translateY(0); }
.btn--ghost:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.btn__icon { width: calc(var(--h) * .54); height: auto; }
.btn--cream[aria-pressed="true"] .btn__icon { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }

/* ===== Round 23: "Hear Patch" question pills. Clicking Hear Patch splits it into three small stitched pills in the
   same dashed-stitch style, with a frosted, see-through cream fill so the photo shows through. Each one plays its
   clip; the playing pill swaps play for pause and fills with a soft progress wash. A stitched x closes. ===== */
.hear { position: relative; display: flex; align-items: center; min-width: 0; }
.hear__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hear__opts[hidden], .hear__toggle[hidden] { display: none; }
.hear__q {
  --h: clamp(56px, 4.6vw, 68px);
  --p: 0;
  overflow: hidden; isolation: isolate;
  padding: 0 1.05em 0 calc(var(--h) * .15);
  gap: .55em;
  font-size: calc(var(--h) * .29);
  background: rgba(250, 236, 212, .16);
  border-color: rgba(246, 226, 196, .9);
  text-shadow: 0 1px 2px rgba(20, 10, 4, .55);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
}
.hear__q:hover { background: rgba(250, 236, 212, .26); border-color: #fbe9cc; }
.hear__q::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--p));
  background: linear-gradient(90deg, rgba(255, 238, 210, .08), rgba(255, 238, 210, .3));
}
.hear__ico { position: relative; flex: none; width: calc(var(--h) * .5); height: calc(var(--h) * .5); border-radius: 50%; background: rgba(255, 246, 232, .94); box-shadow: 0 1px 3px rgba(20, 10, 4, .4); }
.hear__ico::before, .hear__ico::after { content: ""; position: absolute; top: 50%; left: 50%; }
.hear__ico::before { width: 0; height: 0; margin: -.32em 0 0 -.2em; border-left: .56em solid #8a4a1f; border-block: .32em solid transparent; font-size: calc(var(--h) * .29); }
.hear__q.is-playing .hear__ico::before, .hear__q.is-playing .hear__ico::after { width: .16em; height: .58em; margin: -.29em 0 0; border: 0; border-radius: 1px; background: #8a4a1f; font-size: calc(var(--h) * .29); }
.hear__q.is-playing .hear__ico::before { margin-left: -.24em; }
.hear__q.is-playing .hear__ico::after { margin-left: .08em; }
.hear__x {
  --h: clamp(56px, 4.6vw, 68px);
  flex: none; display: grid; place-items: center;
  width: calc(var(--h) * .66); height: calc(var(--h) * .66); padding: 0;
  border: 2px dashed rgba(246, 226, 196, .9); border-radius: 50%;
  background: rgba(250, 236, 212, .14); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: background-color .2s ease, transform .2s ease;
}
.hear__x svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(20, 10, 4, .5)); }
.hear__x:hover { background: rgba(250, 236, 212, .26); }
.hear__q:focus-visible, .hear__x:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hear__q:hover, .hear__x:hover { transform: none; }
}

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

/* app store badges */
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 16px 6px 12px;
  color: #fff;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 9px;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.store:hover { transform: translateY(-1px); }
.store small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .02em; }
.store__ico { width: 28px; height: 28px; }
.store--lg { min-height: 60px; font-size: 1.3rem; }

/* ---------- QR smart link (round 4) ----------
   One QR (inline SVG symbol #i-qr, encodes https://meetpatch.app/get) on a cream felt tile with a
   hand-sewn running stitch. It spans the full height of the button group beside it (hero + goodnight).
   On phones it is hidden: scanning your own screen is pointless, the store badges are right there. */
.get-group {
  --gm: clamp(14px, 2.2svh, 22px);                                   /* gap between the button row and the store badges */
  --qr: calc(clamp(56px, 4.6vw, 68px) + var(--gm) + 52px);           /* = Meet Patch button + gap + store badge */
  display: grid; grid-template-columns: var(--qr) auto; justify-content: start; align-items: center; column-gap: clamp(18px, 1.8vw, 26px);
}
.get-group--night { --gm: 16px; --qr: calc(clamp(56px, 4.6vw, 68px) + var(--gm) + 60px); }
.hero__content > .get-group { max-width: none; }
.get-group__btns { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.get-group .stores, .hero .get-group .stores { margin-top: var(--gm); }
.qr {
  position: relative;
  display: block;
  width: var(--qr);
  height: var(--qr);
  padding: 7px;
  border-radius: 14px;
  background: #fbf5e9;
  /* raised felt tile sewn onto the page: soft contact shadow + a deeper cast, and a faint inner rim */
  box-shadow: inset 0 0 0 1px rgba(120, 80, 40, .18), inset 0 -2px 3px rgba(120, 80, 40, .12), 0 1px 1px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .32);
  transition: transform .2s ease;
}
.qr::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed rgba(181, 83, 47, .75); border-radius: 11px; pointer-events: none; }
.qr:hover { transform: translateY(-1px); }
.qr:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.qr__code { display: block; width: 100%; height: 100%; border-radius: 6px; }
@media (max-width: 700px) {
  .get-group { display: block; }
  .qr { display: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--cream);
  transition: background-color .3s ease, box-shadow .3s ease,
    transform .26s cubic-bezier(.2, .7, .3, 1), opacity .26s cubic-bezier(.2, .7, .3, 1);
}
/* Auto-hide (Pass 5, js/main.js): slides up and fades on scroll down or when idle, back on
   scroll up, pointer at the top, keyboard focus or an open menu. Reduced motion: instant. */
.nav.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
main section[id] { scroll-margin-top: 84px; } /* anchors land with the heading clear of the header */
/* round 8: both "Meet Patch" buttons (hero + Goodnight) link to #about, the Meet Patch section (same id as the
   About nav/footer links); smooth scroll is on html above, switched off for prefers-reduced-motion. The mobile
   header is shorter, so the section lands with less of the hero above it. */
@media (max-width: 700px) { main section[id] { scroll-margin-top: 62px; } }
.nav.is-scrolled { background: rgba(24, 16, 12, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 18px var(--gutter);
}
.nav.is-scrolled .nav__inner { padding-block: 12px; }
.nav__logo { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1; }
.nav__links { display: flex; gap: clamp(20px, 3.4vw, 56px); margin-inline: auto; font-size: 1.05rem; }
.nav__links a { opacity: .92; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 6px; }
.nav__cta { font-size: 1.15rem; }
.nav__toggle { display: none; }

@media (max-width: 860px) {
  .nav__cta { display: none; }
  .nav__toggle {
    display: grid;
    gap: 6px;
    margin-left: auto;
    padding: 12px;
    background: none;
    border: 0;
  }
  .nav__toggle span:not(.sr-only) { width: 24px; height: 2px; background: currentColor; transition: transform .25s; }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .nav__links {
    position: absolute;
    top: 100%; left: 12px; right: 12px;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    background: rgba(24, 16, 12, .985);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav__links a { padding: 14px 16px; border-radius: 8px; }
  .nav__links a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
  .nav.is-open { background: rgba(24, 16, 12, .9); }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- 1. Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  /* whole hero (copy, CTAs, store badges) fits one screen: 1440x900, 1920x1080, laptops */
  min-height: 600px;
  height: min(100svh, 1000px);
  padding-block: 92px 40px;
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(16, 10, 6, .72) 0%, rgba(16, 10, 6, .5) 32%, rgba(16, 10, 6, 0) 58%),
    linear-gradient(180deg, rgba(16, 10, 6, .45) 0%, rgba(16, 10, 6, 0) 22%),
    url("../assets/img/hero.jpg") 65% center / cover no-repeat #1d140e;
}
.hero__content > * { max-width: 640px; }
.hero h1 { font-size: clamp(2.8rem, min(5.2vw, 8.6svh), 5.5rem); margin-bottom: clamp(14px, 2.2svh, 26px); }
.hero .lede { max-width: 590px; margin-bottom: clamp(20px, 3.4svh, 36px); }
.hero .stores { margin-top: clamp(16px, 2.6svh, 26px); }

@media (max-width: 860px) {
  .hero {
    /* photo sits above the copy so the headline never covers Patch's face */
    min-height: 0;
    height: auto;
    padding-top: 380px;
    padding-bottom: 64px;
    background:
      linear-gradient(180deg, rgba(23, 15, 10, .35) 0, rgba(23, 15, 10, 0) 90px, rgba(23, 15, 10, 0) 300px, #170f0a 440px),
      url("../assets/img/hero.jpg") 70% top / auto 450px no-repeat #170f0a;
  }
}

/* ---------- 2. Meet Patch ---------- */
.meet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--linen);
}
.meet__photo { position: relative; min-height: 100%; }
.meet__img { position: absolute; inset: 0; background: var(--img-meet, none) center 46% / cover no-repeat #e7dac4; }
.meet__panel {
  display: flex;
  align-items: center;
  background: url("../assets/img/meet-panel.jpg") right top / cover no-repeat var(--linen);
  padding: clamp(48px, 4.6vw, 84px) 34% clamp(48px, 4.6vw, 84px) clamp(28px, 5.6vw, 110px);
}
.meet__tag { display: none; } /* side by side, the tag is part of meet-panel.jpg */
.meet__copy h2 { margin-bottom: clamp(16px, 1.6vw, 24px); }
.meet__copy .body { max-width: 34em; }
.traits { display: grid; gap: clamp(8px, .9vw, 14px); margin-top: clamp(20px, 2vw, 32px); }
.traits li { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.traits img, .trait-ico { flex: none; width: clamp(64px, 5.4vw, 96px); height: auto; filter: drop-shadow(0 1px 1px rgba(80, 50, 20, .25)) drop-shadow(0 4px 6px rgba(80, 50, 20, .2)); }
/* round 5: one simple matching set in the original badge style (cream felt disc, tan running stitch,
   one rust line glyph embroidered on top); the same set is used for the privacy pillars */
.trait-ico { display: block; aspect-ratio: 1; background: center / 100% no-repeat; }
.trait-ico--listen { background-image: var(--img-badge-listen, none); }     /* ear + sound waves */
.trait-ico--remember { background-image: var(--img-badge-remember, none); } /* brain outline */
.trait-ico--checkin { background-image: var(--img-badge-checkin, none); }   /* bell with a notification dot */
.traits h3 { font-family: var(--serif); font-size: clamp(1.35rem, 1.9vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.traits p { color: var(--muted); font-size: clamp(.98rem, 1.15vw, 1.2rem); }

@media (max-width: 1100px) {
  .meet__panel { padding-right: var(--gutter); background-position: left center; }
}
@media (max-width: 860px) {
  .meet { grid-template-columns: 1fr; }
  .meet__photo { aspect-ratio: 4 / 3.4; }
  /* scaled so the hang tag (right third of the art) falls outside the column */
  .meet__panel { padding: 64px var(--gutter) 72px; background-position: left top; background-size: 1400px auto; }
  /* stacked: the tag hangs to the right of the copy while there's room for both */
  .meet__panel { --tag-w: clamp(150px, 24vw, 210px); position: relative; padding-right: calc(var(--tag-w) + var(--gutter) * 1.5); }
  .meet__tag { display: block; position: absolute; top: 0; right: var(--gutter); width: var(--tag-w); height: auto; filter: drop-shadow(0 6px 8px rgba(80, 50, 20, .18)); }
}
@media (max-width: 600px) {
  .meet__panel { padding-right: var(--gutter); }
  .meet__tag { display: none; }
}

/* ---------- 3. How it works ---------- */
/* v2: one organic indigo denim photo (cover), a hand-sewn edge stitch, a loose running-stitch thread
   with a felt star, dried flowers bottom-left and a knit pile bottom-right, all behind the content. */
.how {
  --stitch-line: rgba(214, 150, 86, .85);
  padding-block: clamp(80px, 7.4vw, 112px);
  color: var(--cream);
  background: radial-gradient(90% 80% at 68% 45%, rgba(60, 86, 130, .16), rgba(8, 14, 30, .28)), var(--img-denim, none) center / cover no-repeat var(--navy);
}
.how__thread { position: absolute; top: 34px; left: calc(50% - 470px); width: 900px; height: 200px; overflow: visible; }
/* round 13: the stitches are real SVG elements (textured thread, needle holes, soft shadow) - see index.html */
.how__thread--corner { left: auto; right: -14px; top: 0; width: 300px; height: 140px; }
.how__star { left: calc(75% + 13px); top: 34px; width: 44px; height: 44px; transform: rotate(-12deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.how__flowers { left: -24px; bottom: 0; width: clamp(110px, 11vw, 175px); aspect-ratio: 275 / 620; background-position: left bottom; }
.how__knit { right: 0; bottom: 0; width: clamp(420px, 44vw, 780px); aspect-ratio: 960 / 625; background-position: right bottom; }
.how__inner { position: relative; display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); }
.how__copy { flex: 0 1 46%; padding-left: clamp(0px, 2vw, 30px); }
.how__copy h2 { margin-bottom: clamp(16px, 1.6vw, 24px); }
.how__copy .lede { max-width: 30em; }
.how__visual { position: relative; flex: 1 1 54%; min-width: 0; }
.how__phones { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
/* Talk screen, re-shot (v2 round 2): a new Scenario photo of Patch on a cosy knit blanket, eyes open,
   masked to the left phone's screen in how-phones.webp (1123x1153; layer 508x988 at 59,99) */
.how__screen { position: absolute; left: 5.254%; top: 8.586%; width: 45.236%; height: 85.689%; background: var(--img-phone-screen, none) center / 100% 100% no-repeat; pointer-events: none; }
/* Handwritten callouts on stitched felt speech bubbles (round 7: matched to the user's reference mock,
   v2-changes/refs/round7-bubbles-ref.png). Sized and placed in container units of .how__visual, so bubble, text and
   position scale with the phones at every width. Positions are measured against the Patch phone frame in
   how-phones.webp (outer frame: top-left corner 34.6,108.6 px, 487 x 1005 px, turned ~4deg):
   - "Here for the good days..." sits at the TOP RIGHT of the Patch phone, centred on the phone's right edge just
     above Patch's olive ear; art un-mirrored, so the tail is lower left and points down-left at Patch's head.
   - "...and the hard ones too." sits at the BOTTOM LEFT, over the phone's left edge (mostly outside), level with
     Patch's arms and scarf; art mirrored, so the tail is lower right and points down-right at Patch.
   The tilt of each bubble and of its text match the reference; the text is centred on the felt body (tail excluded),
   measured from screenshots (Caveat sits high in its em box, hence the small vertical nudge). */
.how__visual { container-type: inline-size; }
.bubble {
  position: absolute;
  z-index: 2;
  width: var(--bw);
  aspect-ratio: 560 / 325;
  margin: 0;
  font-family: "Caveat", "Segoe Print", cursive;
  font-weight: 600;
  font-size: var(--fs);
  line-height: .98;
  text-align: center;
  white-space: nowrap;
  color: #2a2f3f;
  isolation: isolate;
  transform: rotate(var(--tilt, 0deg));
}
.bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img-bubble, #f3ead9) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) drop-shadow(0 6px 8px rgba(0, 0, 0, .32)); }
.bubble span { position: absolute; left: var(--tx); top: var(--ty); transform: translate(-50%, -50%) rotate(var(--trot)); }
.bubble--good { --bw: 25.62%; --fs: 3.7cqw; left: 35.02%; top: 20.54%; aspect-ratio: 560 / 340; --tilt: -4.6deg; --tx: 49.3%; --ty: 43.95%; --trot: -4.55deg; }
.bubble--hard { --bw: 24.98%; --fs: 3.7cqw; line-height: .92; left: -8.24%; top: 49.23%; aspect-ratio: 560 / 331; --tilt: -12.5deg; --tx: 49.1%; --ty: 46.3%; --trot: 3.5deg; }
.bubble--hard::before { transform: scaleX(-1); }
.num {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(64px, 5.4vw, 92px);
  aspect-ratio: 220 / 226;
  padding-top: .06em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.5vw, 2.55rem);
  line-height: 1;
  color: #a64f29;
  background: var(--img-num-disc, radial-gradient(circle, #f1e4cd 66%, transparent 67%)) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.steps { display: grid; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(26px, 2.6vw, 40px); }
.steps li { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.steps h3 { font-family: var(--serif); font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.15; }
.steps p { color: rgba(255, 246, 232, .88); font-size: clamp(.98rem, 1.2vw, 1.25rem); }

@media (max-width: 1100px) {
  .how { padding-block: 80px 64px; }
  .how__inner { display: block; }
  /* stacked: copy centred over the phones; the steps stay a left-aligned column, centred as a block */
  .how__copy { max-width: 620px; margin-inline: auto; padding-left: 0; text-align: center; }
  .how__copy .lede { margin-inline: auto; }
  .steps { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .how__visual { max-width: 640px; margin: 48px auto 0; }
  /* stacked: the phones move right inside the visual to leave a lane for the bubbles at the left */
  .how__phones { width: 80%; margin-left: 20%; }
  .how__screen { left: calc(20% + 5.254% * .8); width: calc(45.236% * .8); }
  /* stacked: the phones are 80% wide from 20%, so the bubbles keep the same place on the Patch phone (x .8 + 20%) */
  .bubble--good { --bw: 20.74%; --fs: 2.96cqw; left: 47.79%; }
  .bubble--hard { --bw: 19.98%; --fs: 2.96cqw; left: 13.41%; }
  .how__thread { left: calc(50% - 560px); }
  .how__star { left: calc(75% - 32px); }
}
@media (max-width: 700px) {
  .how__thread, .how__star { display: none; }
  /* phones: the bubbles grow 1.4x about their own centres so the handwriting stays legible */
  .bubble--good { --bw: 29.04%; --fs: 4.14cqw; left: 43.64%; top: 18.09%; }
  .bubble--hard { --bw: 27.97%; --fs: 4.14cqw; left: 9.41%; top: 46.93%; }
  .how__flowers { width: 120px; opacity: .8; }
  .how__knit { width: 360px; }
}

/* ---------- Shared section header ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 60px;
  margin-bottom: clamp(32px, 3.4vw, 52px);
}
.section-head__aside { max-width: 25em; padding-bottom: .6em; }
@media (max-width: 860px) { .section-head { flex-direction: column; align-items: flex-start; } }

/* Round 13: the bottom-left sprigs lie flat on the denim, clear of the numbered steps (placement per breakpoint,
   checked pixel by pixel against badges 1-3 and their text), with a tight contact shadow near the stems and a
   gentle wider one, light from the top left. */
.how__flowers { filter: drop-shadow(.6px 1.2px .6px rgba(1, 4, 12, .6)) drop-shadow(2px 4px 6px rgba(1, 4, 12, .32)); }
@media (min-width: 1101px) { .how__flowers { width: 110px; left: 0; bottom: -40px; } }
@media (min-width: 1101px) and (max-width: 1399px) { .how__flowers { width: 100px; left: -30px; bottom: -24px; } }

/* ---------- 4. Features ---------- */
/* v2: seamless linen ground with fixed-size cut-outs in the side margins (dried flowers left, a felt
   star top right, a knit pile bottom right), so they stay visible at every desktop width. The cards are
   built in CSS (felt tile + sewn edge) with clean cut-out art on top; the Threads thread runs from the
   spool into a heart and on across into the Keepsakes card. */
.features {
  --stitch-line: rgba(176, 106, 58, .7);
  padding-block: clamp(80px, 7.4vw, 112px);
  background: url("../assets/img/linen-tile.jpg") 0 0 / 400px repeat var(--linen);
}
.features .wrap { max-width: calc(1180px + var(--gutter) * 2); }
.features__flowers { left: max(-80px, (100vw - 1180px) / 2 - 165px); bottom: -14px; height: min(80%, 600px); aspect-ratio: 224 / 620; background-position: left top; }
.features__star { right: max(24px, (100vw - 1180px) / 2 - 90px); top: 64px; width: 54px; height: 54px; transform: rotate(14deg); filter: drop-shadow(0 2px 2px rgba(80, 50, 20, .3)); }
.features__knit { right: 0; bottom: 0; width: clamp(300px, 30vw, 540px); aspect-ratio: 960 / 625; background-position: right bottom; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  aspect-ratio: 46 / 50;
  padding: 50% 11% 17%;
  /* round 4: a hand-cut wool-felt panel (Scenario cut-out, stitched edge, fuzzy wavy outline) 9-sliced so
     its corners and edges stay crisp at any card size; raised with layered drop-shadows (no baked shadow) */
  border: 0 solid transparent;
  border-image-source: var(--img-card-cream, none);
  border-image-slice: 120 fill;
  border-image-width: clamp(54px, 5vw, 70px);
  border-image-repeat: stretch;
  background: none;
  filter: drop-shadow(0 1px 1px rgba(70, 45, 20, .22)) drop-shadow(0 4px 5px rgba(70, 45, 20, .14)) drop-shadow(0 14px 18px rgba(70, 45, 20, .14));
}
.card--dark {
  border-image-source: var(--img-card-navy, none);
  filter: drop-shadow(0 1px 1px rgba(10, 16, 34, .4)) drop-shadow(0 4px 6px rgba(10, 16, 34, .25)) drop-shadow(0 16px 20px rgba(10, 16, 34, .22));
}
.card--threads { z-index: 2; }
.card__art { position: absolute; z-index: 1; pointer-events: none; background: center / contain no-repeat; }
/* round 10: Keepsakes is a glowing mason jar of keepsakes (Scenario), centred where the envelope was */
/* round 14: the round-13 mason jar lying on its side (640x335), centred on the navy card where the standing jar was */
.card__art--jar { left: 18%; top: 8%; width: 64%; aspect-ratio: 640 / 335; background-image: var(--img-jar, none); }
.card__art--quilt { left: 15%; top: 6%; width: 70%; aspect-ratio: 800 / 488; background-image: var(--img-quilt, none); }
/* spool → heart → loose thread that crosses the gap and ends inside the Keepsakes card */
.card__art--threads { left: 3%; top: 0; width: 134%; transform: rotate(6deg); transform-origin: 0 0; aspect-ratio: 1100 / 733; z-index: 3; background-image: var(--img-threads, none); }
.card h3 { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(1.6rem, 2.1vw, 2.2rem); line-height: 1.1; margin-bottom: .35em; }
.card p { position: relative; z-index: 2; color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.5; }
.card--dark h3 { color: var(--cream); }
.card--dark p { color: rgba(255, 246, 232, .88); }

/* Round 10: Features depth pass (refs/round10-features-shadow-ref.png). Same top-left light as Reviews, so every
   shadow falls down and to the right, but warm brown-tinted on the cream linen instead of black:
   a tight contact edge, a short close shadow and a soft wide ambient one. Filters only, nothing baked. */
.features { --sh: 82, 52, 24; }
.features__flowers { background-image: var(--img-features-sprig, var(--img-flowers-tall, none)); aspect-ratio: 480 / 1033;
  /* round 14: slid further off the left edge so it always clears the Threads card (same size and art) */
  left: calc(max(var(--gutter), (100vw - 1180px) / 2) - 285px);
  filter: drop-shadow(1.5px 2.5px 1px rgba(var(--sh), .7)) drop-shadow(4px 7px 5px rgba(var(--sh), .42)) drop-shadow(9px 15px 15px rgba(var(--sh), .28)); }
.features .eyebrow { filter: drop-shadow(0 0 .6px rgba(var(--sh), .6)) drop-shadow(1.5px 2px 0 rgba(var(--sh), .5)) drop-shadow(3px 5px 4px rgba(var(--sh), .26)) drop-shadow(6px 10px 12px rgba(var(--sh), .18)); }
.features h2 { text-shadow: 1px 1.5px 0 rgba(var(--sh), .22), 2px 4px 6px rgba(var(--sh), .22), 4px 9px 18px rgba(var(--sh), .12); }
.features .card { filter: drop-shadow(0 0 1px rgba(var(--sh), .4)) drop-shadow(1.5px 2px 1px rgba(var(--sh), .32)) drop-shadow(5px 8px 7px rgba(var(--sh), .24)) drop-shadow(12px 20px 26px rgba(var(--sh), .24)); }
.features .card--dark { filter: drop-shadow(0 0 1px rgba(30, 22, 26, .6)) drop-shadow(1.5px 2px 1px rgba(40, 28, 22, .45)) drop-shadow(5px 8px 7px rgba(var(--sh), .3)) drop-shadow(12px 20px 26px rgba(var(--sh), .28)); }
/* the art casts its own small shadows onto the cards (the spool art is turned 6deg, the star 14deg: their offsets
   are pre-rotated so the shadow still falls down-right after the transform) */
.card__art--threads { filter: drop-shadow(1.2px 1.9px 1px rgba(var(--sh), .55)) drop-shadow(3.6px 5.6px 5px rgba(var(--sh), .34)) drop-shadow(7px 11px 11px rgba(var(--sh), .16)); }
.card__art--quilt { filter: drop-shadow(1px 1.5px .5px rgba(var(--sh), .6)) drop-shadow(3px 5px 4px rgba(var(--sh), .4)) drop-shadow(7px 11px 12px rgba(var(--sh), .22)); }
.card__art--jar { filter: drop-shadow(1.5px 2.5px 1px rgba(4, 8, 22, .6)) drop-shadow(4px 7px 7px rgba(4, 8, 22, .42)) drop-shadow(8px 13px 14px rgba(4, 8, 22, .25)); }
.features__star { filter: drop-shadow(1.45px 1.7px .5px rgba(var(--sh), .6)) drop-shadow(4.1px 4.1px 4px rgba(var(--sh), .34)) drop-shadow(7px 8px 10px rgba(var(--sh), .16)); }
.features__knit { filter: drop-shadow(0 0 2px rgba(var(--sh), .45)) drop-shadow(-1px -1px 3px rgba(var(--sh), .3)) drop-shadow(2px 3px 2px rgba(var(--sh), .4)) drop-shadow(6px 10px 14px rgba(var(--sh), .3)); }

@media (max-width: 1100px) {
  .card { padding: 50% 10% 8%; }
  .card p { font-size: .98rem; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .card { aspect-ratio: auto; padding: 56% 11% 11%; }
  /* stacked: keep the spool and heart, the thread trail would run off the card */
  .card__art--threads { width: 100%; left: 2%; top: 3%; transform: none; clip-path: inset(0 0 46% 0); }
  .features__flowers { display: none; }
  .features__star { top: 40px; right: 18px; width: 40px; height: 40px; }
  .features__knit { width: 300px; }
}

/* Round 21: the Keepsakes jar is vertically centred between the card's visible felt edge and the top of the
   "Keepsakes" lettering (ink, not the line box). The jar becomes an in-flow flex item with auto margins, so
   the free space above the title splits equally above and below it at any width and text wrap. The card's
   padding-top is set to the felt edge (15.7% of the 9-slice border width) plus the title's ink offset
   (.18 of its font size), which makes the two measured gaps equal. Size (64% of the card), horizontal
   centring and the drop-shadow are unchanged; the title and copy stay exactly where they were. */
.card--keepsakes { padding-top: calc(clamp(54px, 5vw, 70px) * .157 + clamp(1.6rem, 2.1vw, 2.2rem) * .18); }
.card--keepsakes .card__art--jar { position: relative; left: auto; top: auto; flex: none; align-self: center; width: calc(64% * 100 / 78); margin-block: auto; }
@media (max-width: 1100px) { .card--keepsakes .card__art--jar { width: 80%; } }
@media (max-width: 900px) {
  /* stacked cards size to their content: explicit equal margins keep the card exactly as tall as before
     (art area 56% of the card width, jar 33.5% of it; percentages here are of the 78% content width) */
  .card--keepsakes .card__art--jar { width: calc(64% * 100 / 78); margin-block: calc((28.846% - (clamp(54px, 5vw, 70px) * .157 + clamp(1.6rem, 2.1vw, 2.2rem) * .18)) / 2); }
}

/* ---------- 5. Testimonials ---------- */
/* v2: one organic forest-green wool felt photo (cover, not a tile), a gold edge stitch and dried
   flowers rising at both sides, mirrored. */
.voices {
  --stitch-line: rgba(205, 152, 70, .8);
  padding-block: clamp(80px, 7.4vw, 112px);
  color: var(--cream);
  background: radial-gradient(100% 90% at 50% 40%, rgba(70, 100, 70, .12), rgba(5, 12, 8, .3)), var(--img-felt-green, none) center / cover no-repeat #1f2e24;
}
.voices .wrap { max-width: calc(1220px + var(--gutter) * 2); }
.voices .section-head__aside { color: rgba(255, 246, 232, .88); }
.patches { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 24px); align-items: center; }
.patch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18% 14% 12%;
  text-align: center;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4));
}
.patch blockquote { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2vw, 2.15rem); line-height: 1.2; letter-spacing: -.01em; }
.patch figcaption {
  margin-top: 1.1em;
  font-size: clamp(.78rem, 1vw, 1rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust);
}
.patch figcaption::before { content: ""; display: block; width: 46px; height: 2px; margin: 0 auto .9em; background: currentColor; opacity: .8; }
.patch--maya { aspect-ratio: 567 / 451; background-image: url("../assets/img/patch-maya.webp"); color: var(--ink); }
.patch--maya > * { transform: rotate(-6deg); }
.patch--jordan { aspect-ratio: 539 / 448; background-image: url("../assets/img/patch-jordan.webp"); color: var(--cream); }
.patch--jordan > * { transform: rotate(-1.5deg); }
.patch--jordan figcaption { color: rgba(255, 246, 232, .88); }
.patch--jordan figcaption::before { background: var(--thread); }
.patch--taylor { aspect-ratio: 543 / 449; background-image: url("../assets/img/patch-taylor.webp"); color: var(--ink); }
.patch--taylor > * { transform: rotate(5deg); }

@media (max-width: 900px) {
  .patches { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; gap: 18px; }
}
/* Round 9: depth pass for the reviews, matched to refs/round9-reviews-shadow-ref.png. One light, from the top
   left, so every shadow falls down and to the right onto the green felt: a tight dark contact edge, a short
   close shadow and a soft wide ambient one. Nothing is baked into the art; it is all filters and gradients. */
/* Round 17: the sprigs are gone. Six sewing buttons (Scenario cut-outs r17-btn-*: beech wood, mother-of-pearl,
   domed brass shank, horn, gingham-covered and a sage enamel daisy) lie flat on the felt around the edges, clear of
   the label, heading, intro, the card row and the controls. Each one is turned on its ::before, while the shadow
   filter sits on the unrotated parent, so every shadow falls down and to the right (light from the top left):
   a tight dark contact edge, a short close shadow and a soft ambient one, as in refs/round9-reviews-shadow-ref. */
.voices { --edge: max(var(--gutter), (100vw - 1220px) / 2); }
.voices__btn { width: var(--s); height: var(--s);
  filter: drop-shadow(.7px 1.2px .5px rgba(1, 5, 3, .95)) drop-shadow(2.4px 4px 2.5px rgba(1, 5, 3, .72)) drop-shadow(6px 10px 10px rgba(1, 5, 3, .5)); }
.voices__btn::before { content: ""; position: absolute; inset: 0; background: var(--b) center / contain no-repeat; transform: rotate(var(--r, 0deg)); }
.voices__btn--wood { --b: var(--img-rbtn-wood, none); --s: 60px; --r: -14deg; left: max(12px, var(--edge) - 30px); top: 14px; }
.voices__btn--pearl { --b: var(--img-rbtn-pearl, none); --s: 38px; --r: 20deg; left: calc(var(--edge) + 390px); top: 34px; }
.voices__btn--brass { --b: var(--img-rbtn-brass, none); --s: 58px; --r: 24deg; right: calc(var(--edge) + 24px); top: 22px; }
.voices__btn--horn { --b: var(--img-rbtn-horn, none); --s: 56px; --r: 32deg; left: max(14px, var(--edge) - 40px); bottom: 54px; }
.voices__btn--gingham { --b: var(--img-rbtn-gingham, none); --s: 52px; --r: -8deg; left: calc(50% - 270px); bottom: 26px; }
.voices__btn--daisy { --b: var(--img-rbtn-daisy, none); --s: 64px; --r: 12deg; right: max(16px, var(--edge) - 10px); bottom: 48px; }
@media (max-width: 1200px) and (min-width: 701px) { .voices__btn--wood { --s: 50px; top: 12px; } .voices__btn--pearl { top: 28px; } .voices__btn--brass { --s: 50px; top: 18px; } }
/* phones: four smaller buttons in the corners */
@media (max-width: 700px) {
  .voices__btn--brass, .voices__btn--gingham { display: none; }
  .voices__btn--wood { --s: 46px; left: 14px; top: 18px; }
  .voices__btn--pearl { --s: 28px; left: auto; right: 22px; top: 26px; }
  .voices__btn--horn { --s: 38px; left: 16px; bottom: 22px; }
  .voices__btn--daisy { --s: 42px; right: 16px; bottom: 20px; }
}
/* label: a linen tape sewn onto the felt: dark edge, slight lift, and soft inner shading at its edges */
.voices .eyebrow { filter: drop-shadow(0 0 .6px rgba(1, 5, 3, .95)) drop-shadow(1.5px 2px 0 rgba(1, 5, 3, .8)) drop-shadow(3px 5px 4px rgba(1, 5, 3, .48)) drop-shadow(6px 10px 12px rgba(1, 5, 3, .34)); }
/* round 10 fix: the inner-shading layer now covers exactly the label's fabric body (the label art's body sits
   9/112 of the height in from the top and bottom and 8/112 in from the ends, with ~10/112 rounded corners), so it
   no longer shows as a separate translucent strip above the label or as a step at the ends. The stitches keep
   their exact old positions through padding + content-box origin. */
.voices .eyebrow::after, .features .eyebrow::after {
  --bi: calc(var(--lh) * 9 / 112);
  --bx: calc(var(--lh) * 8 / 112);
  inset: var(--bi) var(--bx);
  padding: calc(var(--sin) - var(--bi)) calc(var(--sin) + .62em - var(--bx));
  background-origin: content-box;
  background-clip: content-box;
  border-radius: calc(var(--lh) * 11 / 112);
  box-shadow: inset 0 1px 2px rgba(255, 250, 238, .32), inset 0 -3px 4px rgba(90, 58, 22, .24), inset -2px 0 4px rgba(90, 58, 22, .12), inset 2px 0 3px rgba(255, 250, 238, .12);
}
/* title: printed into the felt, with a soft dark shadow under the letters */
.voices h2 { text-shadow: 1px 1.5px 0 rgba(2, 7, 4, .55), 2px 4px 5px rgba(2, 7, 4, .55), 5px 10px 18px rgba(2, 7, 4, .38); }
/* cards: fabric squares lying on the felt (contact edge + close + wide ambient shadow), lit from the top left
   across the cloth, and each wooden button lifted off its card on a copy of itself that casts its own shadow */
.patch { filter: drop-shadow(0 0 1px rgba(1, 5, 3, .8)) drop-shadow(2px 3px 1.5px rgba(1, 5, 3, .7)) drop-shadow(6px 9px 7px rgba(1, 5, 3, .45)) drop-shadow(14px 22px 28px rgba(1, 5, 3, .45)); }
.patch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 250, 240, .14), rgba(255, 250, 240, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(40, 24, 10, .22));
  -webkit-mask: var(--art) center / 100% 100% no-repeat; mask: var(--art) center / 100% 100% no-repeat;
}
.patch--maya { --art: url("../assets/img/patch-maya.webp"); }
.patch--jordan { --art: url("../assets/img/patch-jordan.webp"); }
.patch--taylor { --art: url("../assets/img/patch-taylor.webp"); }
.patch .patch__btn { position: absolute; transform: none; background: center / 100% 100% no-repeat; pointer-events: none;
  filter: drop-shadow(1.5px 2.5px 1px rgba(30, 16, 6, .7)) drop-shadow(4px 7px 5px rgba(30, 16, 6, .48)) drop-shadow(7px 12px 11px rgba(30, 16, 6, .24)); }
.patch--maya .patch__btn { left: 37.79%; top: 0.66%; width: 16.17%; height: 20.09%; background-image: var(--img-btn-maya, none); }
.patch--jordan .patch__btn { left: 39.56%; top: 2.22%; width: 16.82%; height: 20.22%; background-image: var(--img-btn-jordan, none); }
.patch--taylor .patch__btn { left: 46.24%; top: 0.44%; width: 16.51%; height: 19.96%; background-image: var(--img-btn-taylor, none); }

/* ===== Round 10: reviews carousel ===== */
/* Twelve fabric squares on one endless row that drifts slowly to the left (main.js clones the set on both
   sides, so the loop never jumps). Round 17: no edge fade, so cards slide in and out at the sides of the screen,
   and buttons lie scattered on the felt around the edges instead of the sprigs. */
.voices .decor { z-index: 2; }
.voices > .wrap { z-index: 3; }
.carousel { position: relative; z-index: 1; --slide: clamp(300px, 27vw, 400px); --gap: clamp(18px, 2.2vw, 36px); }
.carousel__viewport {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding-block: 34px 58px; margin-block: -14px -30px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel .carousel__track { display: flex; gap: var(--gap); width: max-content; max-width: none; margin: 0; padding-inline: 7vw; align-items: center; }
.carousel.is-live .carousel__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel.is-live.is-dragging .carousel__viewport { cursor: grabbing; }
.carousel.is-live .carousel__track { padding-inline: 0; will-change: transform; }
.carousel .patch { flex: 0 0 var(--slide); width: var(--slide); transform: rotate(var(--rot, 0deg)); }
.carousel .patch blockquote { font-size: clamp(1.02rem, 1.3vw, 1.3rem); line-height: 1.28; text-wrap: pretty; }
.carousel .patch figcaption { margin-top: .9em; font-size: clamp(.74rem, .85vw, .86rem); }
.carousel .patch figcaption::before { width: 40px; margin-bottom: .75em; }
.carousel .patch--maya, .carousel .patch--jordan, .carousel .patch--taylor { padding: calc(var(--slide) * 0.17) calc(var(--slide) * 0.13) calc(var(--slide) * 0.11); }
/* new swatches (Scenario, flat with a running-stitch border); the button is the lifted wooden overlay */
.patch--rust, .patch--rust2, .patch--sage, .patch--sage2, .patch--plaid, .patch--navy, .patch--mustard, .patch--cream, .patch--corduroy {
  aspect-ratio: 7 / 5; padding: calc(var(--slide) * 0.15) calc(var(--slide) * 0.125) calc(var(--slide) * 0.09);
}
.patch--rust, .patch--rust2 { --art: var(--img-card-rust); background-image: var(--art); color: #fbf1e2; }
.patch--sage, .patch--sage2 { --art: var(--img-card-sage); background-image: var(--art); color: var(--ink); }
.patch--plaid { --art: var(--img-card-plaid); background-image: var(--art); color: var(--ink); }
.patch--mustard { --art: var(--img-card-mustard); background-image: var(--art); color: #2a1d0e; }
.patch--corduroy { --art: var(--img-card-corduroy); background-image: var(--art); color: #fff4e4; }
.patch--navy { --art: url("../assets/img/patch-jordan.webp"); background-image: var(--art); color: var(--cream); aspect-ratio: 539 / 448; padding: calc(var(--slide) * 0.17) calc(var(--slide) * 0.13) calc(var(--slide) * 0.11); }
.patch--cream { --art: url("../assets/img/patch-taylor.webp"); background-image: var(--art); color: var(--ink); aspect-ratio: 543 / 449; padding: calc(var(--slide) * 0.17) calc(var(--slide) * 0.13) calc(var(--slide) * 0.11); }
.patch--navy > * { transform: rotate(-1.5deg); }
.patch--cream > * { transform: rotate(5deg); }
/* legibility on the busier and darker cloths */
.patch--plaid blockquote, .patch--plaid figcaption { text-shadow: 0 0 6px rgba(250, 240, 222, .95), 0 0 14px rgba(250, 240, 222, .8); }
.patch--rust blockquote, .patch--rust2 blockquote, .patch--corduroy blockquote { text-shadow: 0 1px 2px rgba(40, 14, 4, .45); }
.patch--corduroy blockquote, .patch--corduroy figcaption { text-shadow: 0 1px 2px rgba(40, 18, 4, .7), 0 0 10px rgba(60, 26, 6, .45); }
.patch--rust figcaption, .patch--rust2 figcaption, .patch--corduroy figcaption { color: #f6dcae; }
.patch--navy figcaption { color: rgba(255, 246, 232, .88); }
.patch--navy figcaption::before { background: var(--thread); }
.patch--sage figcaption, .patch--sage2 figcaption { color: #6b3216; }
.patch--mustard figcaption { color: #4a1c08; font-weight: 700; }
.patch--plaid figcaption { color: #6a250c; font-weight: 700; }
.patch--rust .patch__btn, .patch--rust2 .patch__btn, .patch--sage .patch__btn, .patch--sage2 .patch__btn, .patch--plaid .patch__btn,
.patch--mustard .patch__btn, .patch--corduroy .patch__btn { left: 42.5%; top: -1.5%; width: 15%; height: auto; aspect-ratio: 1; }
.patch--rust .patch__btn, .patch--rust2 .patch__btn, .patch--corduroy .patch__btn { background-image: var(--img-btn-jordan, none); }
.patch--sage .patch__btn, .patch--sage2 .patch__btn, .patch--mustard .patch__btn { background-image: var(--img-btn-maya, none); }
.patch--plaid .patch__btn { background-image: var(--img-btn-taylor, none); }
.patch--navy .patch__btn { left: 39.56%; top: 2.22%; width: 16.82%; height: 20.22%; background-image: var(--img-btn-jordan, none); }
.patch--cream .patch__btn { left: 46.24%; top: .44%; width: 16.51%; height: 19.96%; background-image: var(--img-btn-taylor, none); }
/* varied, gentle tilts (the first three cards already have their tilt woven into the art) */
.carousel .patch:nth-child(12n + 4) { --rot: -2.5deg; }
.carousel .patch:nth-child(12n + 5) { --rot: 2deg; }
.carousel .patch:nth-child(12n + 6) { --rot: -1.5deg; }
.carousel .patch:nth-child(12n + 7) { --rot: 1deg; }
.carousel .patch:nth-child(12n + 8) { --rot: 3deg; }
.carousel .patch:nth-child(12n + 9) { --rot: -1deg; }
.carousel .patch:nth-child(12n + 10) { --rot: -3deg; }
.carousel .patch:nth-child(12n + 11) { --rot: 2.5deg; }
.carousel .patch:nth-child(12n + 12) { --rot: -2deg; }
/* the darker navy cloth gets the same lift as the light ones */
.patch--navy, .patch--rust, .patch--rust2, .patch--corduroy { filter: drop-shadow(0 0 1px rgba(1, 5, 3, .85)) drop-shadow(2px 3px 1.5px rgba(1, 5, 3, .72)) drop-shadow(6px 9px 7px rgba(1, 5, 3, .48)) drop-shadow(14px 22px 28px rgba(1, 5, 3, .48)); }

/* controls: round felt buttons with a stitched ring, lit from the top left like everything else. NN/g + APG:
   arrows are real <button>s with labels. Round 17: prev, pause and next sit in one always-visible row under the
   cards (flex order puts the arrows either side; pause stays first in the tab order). */
.carousel__controls { position: absolute; z-index: 4; left: 50%; bottom: -40px; translate: -50% 0; display: flex; align-items: center; gap: 14px; }
.carousel__controls .carousel__arrow--prev { order: -1; }
.carousel__controls .carousel__arrow--next { order: 1; }
.carousel__arrow, .carousel__pause {
  position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .45em;
  border: 0; border-radius: 999px; cursor: pointer; color: #3a2614;
  background: radial-gradient(120% 120% at 30% 25%, #fbf3e3, #eadcc2 60%, #d9c7a6);
  box-shadow: 0 0 0 1px rgba(60, 38, 16, .35), inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(90, 58, 22, .25),
    2px 3px 2px rgba(1, 5, 3, .55), 5px 9px 14px rgba(1, 5, 3, .4);
  transition: opacity .3s ease, transform .2s ease, visibility .3s;
}
.carousel__arrow::before, .carousel__pause::before {
  content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px dashed rgba(176, 106, 58, .85); pointer-events: none;
}
.carousel__arrow[hidden], .carousel__pause[hidden] { display: none; }
.carousel__arrow { width: 44px; height: 44px; }
.carousel__arrow svg, .carousel__pause svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow:hover, .carousel__pause:hover { transform: translateY(-1px); }
.carousel__arrow:active, .carousel__pause:active { transform: translateY(1px); }
.carousel__arrow:focus-visible, .carousel__pause:focus-visible { outline: 3px solid #f3c26b; outline-offset: 3px; }
.carousel__pause { height: 38px; padding: 0 15px 0 12px; font: 600 .74rem/1 var(--sans, inherit); letter-spacing: .14em; text-transform: uppercase; }
.carousel__pause svg { width: 15px; height: 15px; stroke-width: 2.6; }
.carousel__pause .i-play { fill: currentColor; stroke-width: 1.6; }
.carousel__pause .i-play, .carousel.is-paused-user .carousel__pause .i-pause { display: none; }
.carousel.is-paused-user .carousel__pause .i-play { display: block; }
.voices:has(.carousel.is-live) { padding-bottom: calc(clamp(80px, 7.4vw, 112px) + 30px); }
@media (prefers-reduced-motion: reduce) { .carousel__pause { display: none !important; } }
@media (max-width: 900px) {
  .carousel .carousel__track { max-width: none; margin: 0; }
}
/* phones: one card at a time with a peek of the next */
@media (max-width: 700px) {
  .carousel { --slide: min(76vw, 330px); --gap: 16px; }
  .carousel .patch blockquote { font-size: 1rem; line-height: 1.25; }
  .patch--rust, .patch--rust2, .patch--sage, .patch--sage2, .patch--plaid, .patch--mustard, .patch--corduroy { padding: calc(var(--slide) * 0.135) calc(var(--slide) * 0.11) calc(var(--slide) * 0.08); }
}
/* phones: smaller sprigs tucked further out so the centred card's text stays clear of them */

/* ---------- 6. Privacy ---------- */
.privacy { --stitch-line: rgba(176, 106, 58, .6); display: grid; grid-template-columns: 1fr 1fr; background: var(--linen); }
.privacy__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.privacy__panel {
  display: flex;
  align-items: center;
  position: relative;
  padding: clamp(64px, 6vw, 96px) var(--gutter) clamp(64px, 6vw, 96px) clamp(28px, 4vw, 80px);
  /* v2: plain seamless linen (the old panel photo had a smudge and its stars got cropped away) */
  background: linear-gradient(90deg, rgba(110, 80, 40, .07), rgba(110, 80, 40, 0) 18%), url("../assets/img/linen-tile.jpg") 0 0 / 400px repeat var(--linen);
}
/* two embroidered stars in the top-right corner, as in the mock-up */
.privacy__stars { position: absolute; top: clamp(26px, 3vw, 48px); right: clamp(22px, 3vw, 56px); width: 92px; height: 78px; pointer-events: none; }
.privacy__stars i { position: absolute; background: var(--img-star-embroid, none) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(80, 50, 20, .25)); }
.privacy__stars i:first-child { left: 0; top: 0; width: 50px; height: 48px; transform: rotate(-8deg); }
.privacy__stars i:last-child { right: 0; bottom: 0; width: 34px; height: 33px; transform: rotate(16deg); }
.privacy__copy { max-width: 760px; }
.privacy__copy h2 { margin-bottom: clamp(14px, 1.4vw, 22px); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; gap: 0 14px; margin-top: clamp(28px, 3vw, 44px); text-align: center; }
/* Shared rows (badge / title / text) across the three columns, so every subtext starts on
   the same line even if one title wraps at some width (Pass 5). */
.pillars li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: start; }
.pillars img, .pillar-ico { width: clamp(90px, 7vw, 132px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 1px 1px rgba(80, 50, 20, .25)) drop-shadow(0 4px 6px rgba(80, 50, 20, .2)); }
/* "You're in control": embroidered toggle switch, same handmade set as the lock and the heart */
.pillar-ico { display: block; aspect-ratio: 1; background: center / 100% no-repeat; }
/* round 5: lock (keyhole cut out), trash can and heart in the same simple stitched style, cropped to the disc at the same size */
.pillar-ico--lock { background-image: var(--img-badge-lock, none); }
.pillar-ico--control { background-image: var(--img-badge-erase, none); } /* trash can: "export or delete anytime" */
.pillar-ico--heart { background-image: var(--img-badge-heart, none); }
.pillars h3 { align-self: end; font-family: var(--serif); font-size: clamp(1.05rem, 1.22vw, 1.6rem); line-height: 1.15; margin-bottom: .3em; white-space: nowrap; }
.pillars p { color: var(--muted); font-size: clamp(.95rem, 1.1vw, 1.15rem); line-height: 1.4; }

@media (max-width: 960px) {
  .privacy { grid-template-columns: 1fr; }
  .privacy__photo { aspect-ratio: 4 / 3; }
  .privacy__panel { padding: 72px var(--gutter) 80px; }
  .privacy__stars { top: 22px; right: 18px; transform: scale(.8); transform-origin: top right; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .pillars { grid-template-rows: none; }
  .pillars li { grid-row: auto; grid-template-rows: none; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; }
  .pillars img, .pillar-ico { grid-row: span 2; width: 76px; margin: 0; }
  .pillars h3 { align-self: end; margin-bottom: 0; }
  .pillars p { align-self: start; }
}

/* ---------- 7. Pricing ---------- */
/* v2: the same organic denim photo as How it works, an edge stitch top and bottom, dried flowers up
   both sides, knitwear and a wooden button bottom left, books and a pot of flowers bottom right, and a
   few felt stars. All cut-outs sit behind the content. */
.pricing {
  --stitch-line: rgba(214, 150, 86, .85);
  padding-block: clamp(80px, 7.4vw, 112px);
  color: var(--cream);
  background: radial-gradient(90% 80% at 50% 45%, rgba(60, 86, 130, .14), rgba(8, 14, 30, .3)), var(--img-denim, none) center / cover no-repeat var(--navy);
}
.pricing__flowers { bottom: 24%; height: min(70%, 500px); aspect-ratio: 275 / 620; }
.pricing__flowers--l { left: max(-90px, (100vw - 1180px) / 2 - 175px); background-position: left top; }
.pricing__flowers--r { right: max(-90px, (100vw - 1180px) / 2 - 175px); bottom: 40%; height: min(48%, 360px); transform: scaleX(-1) rotate(-8deg); transform-origin: 50% 100%; }
.pricing__knit { left: 0; bottom: 0; width: clamp(280px, 30vw, 520px); aspect-ratio: 760 / 353; background-image: var(--img-pricing-left, none); background-position: left bottom; }
.pricing__books { right: 0; bottom: 0; width: clamp(180px, 17vw, 300px); aspect-ratio: 520 / 513; background-image: var(--img-pricing-right, none); background-position: right bottom; }
.pricing__star { background-image: var(--img-star-felt, none); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.pricing__star--1 { left: calc(50% - 38px); top: 64%; width: 34px; height: 34px; transform: rotate(-10deg); }
.pricing__star--2 { right: max(30px, (100vw - 1180px) / 2 - 40px); top: 9%; width: 42px; height: 42px; transform: rotate(12deg); }
.pricing__star--3 { right: max(70px, (100vw - 1180px) / 2 + 10px); top: 17%; width: 26px; height: 26px; transform: rotate(-20deg); background-image: var(--img-star-rust, none); }
@media (max-width: 1100px) { .pricing__star--1 { display: none; } }
@media (max-width: 960px) {
  .pricing__flowers { height: 300px; opacity: .75; }
  .pricing__flowers--r { display: none; }
  .pricing__knit { width: 240px; }
  .pricing__books { width: 150px; }
  .pricing__star--2 { top: 52px; right: 14px; width: 30px; height: 30px; }
  .pricing__star--3 { display: none; }
}
.pricing .wrap { max-width: 1180px; }
.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 540px);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.pricing__intro h2 { margin-bottom: clamp(22px, 2.2vw, 34px); max-width: 9em; }
.checks { display: grid; gap: 14px; }
.checks li {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 60px;
  font-size: clamp(1rem, 1.2vw, 1.22rem);
}
.checks li::before {
  content: "";
  flex: none;
  width: 60px; height: 60px;
  background: url("../assets/img/check-felt.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 604 / 608;
  padding: 16% 11% 9%;
  color: var(--ink);
  text-align: center;
  background: var(--img-pricing-card, url("../assets/img/pricing-card.webp")) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}
/* "Most popular": a rust suede ribbon banner with folded, notched tails (v2 round 2: Scenario cut-out
   ribbon.webp 964x212, front band centred 42.4% down the art), centred across the felt card's top
   edge (6.3% down the card art). The label is HTML in a cream serif. */
.plan__ribbon {
  position: absolute;
  z-index: 2;
  top: calc(6.34cqi - 12.76cqi * .424);
  left: 50%;
  display: grid;
  place-items: center;
  width: 58cqi;
  height: 12.76cqi;
  padding-bottom: 1.94cqi;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1rem, 5.1cqi, 1.6rem);
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  color: #fbeedb;
  text-shadow: 0 1px 1px rgba(60, 20, 4, .55);
  background: var(--img-ribbon, #a3461f) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .32));
}
.plan__ribbon span { position: relative; top: .03em; }
/* Felt track + navy felt slider (toggle-track/-knob.webp, 160px tall, slice 80/90 and 80/87) */
.plan__toggle {
  --th: clamp(54px, 4.4vw, 66px);
  --felt: url("../assets/img/toggle-track.webp");
  --felt-sx: 90; --felt-sy: 80;
  --felt-w: calc(var(--th) * 90 / 160);
  display: inline-flex;
  height: var(--th);
}
.plan__toggle button {
  --felt: url("../assets/img/toggle-knob.webp");
  --felt-sx: 87; --felt-sy: 80;
  --felt-w: calc(var(--th) * 87 / 160);  /* full track height, so it covers the track's end */
  min-width: clamp(110px, 9vw, 160px);
  padding: 0 1.2em;
  border: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  background: none;
  color: var(--ink);
  transition: color .2s;
}
.plan__toggle button::before { opacity: 0; transition: opacity .2s; }
.plan__toggle [aria-checked="true"] { color: var(--cream); }
.plan__toggle [aria-checked="true"]::before { opacity: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.plan__toggle button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 999px; }
.plan__price {
  margin-top: auto;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3rem, 5vw, 5.3rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.plan__per { font-size: .52em; letter-spacing: -.01em; }
.plan__billed {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .6em;
  min-height: 1.9em; margin-top: .45em;
  font-size: clamp(.95rem, 1.15vw, 1.15rem); font-weight: 600; color: #2b3245;
}
.plan__save {
  padding: .2em .65em .15em;
  font-family: var(--serif); font-size: .85em; letter-spacing: .06em; text-transform: uppercase;
  color: #fff3e4; background: #b56b4a; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #b56b4a, inset 0 0 0 3px rgba(255, 238, 214, .55);
}
.plan__tag { margin: .35em 0 auto; font-size: clamp(1rem, 1.4vw, 1.45rem); color: #2b3245; }
.plan { container-type: inline-size; }
.plan__cta { --h: clamp(56px, 4.6vw, 68px); margin-top: .2em; font-size: calc(var(--h) * .32); }
.plan__note { margin-top: 1em; font-size: clamp(.92rem, 1.1vw, 1.15rem); color: #2b3245; }
.plan__legal { display: flex; justify-content: center; gap: 1.4em; margin-top: .35em; font-size: clamp(.8rem, .9vw, .92rem); }
.plan__legal a { color: #2b3245; text-decoration: underline; text-underline-offset: 2px; }
.plan__legal a:hover { color: var(--rust); }

@media (max-width: 960px) {
  .pricing__grid { grid-template-columns: 1fr; }
  .plan { width: 100%; max-width: 480px; margin-inline: auto; }
  /* stacked: centre the copy over the card; the checklist stays a left-aligned column, centred as a block */
  .pricing__intro { text-align: center; }
  .pricing__intro h2 { margin-inline: auto; }
  .checks { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
}
@media (max-width: 440px) {
  .plan { padding: 17% 8% 8%; }
  .plan__toggle button { min-width: 96px; }
}

/* ---------- 7b. A day with Patch ---------- */
.day {
  padding-block: clamp(72px, 7vw, 104px);
  background: url("../assets/img/linen-tile.jpg") 0 0 / 400px repeat var(--linen);
}
.day__title { text-align: center; margin-bottom: clamp(28px, 3vw, 48px); }
.day__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.day__list img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 1.5px rgba(139, 115, 85, .45), 0 10px 22px rgba(70, 45, 20, .2);
}
.day__list h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.75rem); margin-bottom: .25em; }
.day__list p { color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; }
@media (max-width: 860px) {
  .day__list { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
/* round 4: two new felt cut-outs flank the title (morning sun at the left, a knitted mug of tea at the right),
   sitting in the empty space beside the heading so they never cover the photos or copy.
   Round 6: stronger sewn-on shading (tight dark contact edge + close shadow + soft wide cast), filter only. */
.day__sun, .day__mug { z-index: 0; }
.day__sun { left: calc(50% - min(560px, 46vw)); top: clamp(30px, 3.4vw, 50px); width: clamp(96px, 9.4vw, 140px); aspect-ratio: 378 / 380; background-image: var(--img-day-sun, none); transform: rotate(-8deg); filter: drop-shadow(0 1px 0 rgba(60, 36, 14, .6)) drop-shadow(0 3px 3px rgba(60, 36, 14, .42)) drop-shadow(0 9px 14px rgba(60, 36, 14, .32)); }
.day__mug { right: calc(50% - min(545px, 45vw)); top: clamp(36px, 3.8vw, 56px); width: clamp(78px, 7.4vw, 108px); aspect-ratio: 296 / 380; background-image: var(--img-day-mug, none); transform: rotate(6deg); filter: drop-shadow(0 1px 0 rgba(60, 36, 14, .6)) drop-shadow(0 3px 3px rgba(60, 36, 14, .42)) drop-shadow(0 9px 14px rgba(60, 36, 14, .32)); }
@media (max-width: 700px) {
  .day { padding-top: 96px; }
  .day__sun { left: 10px; top: 22px; width: 70px; }
  .day__mug { right: 14px; top: 26px; width: 54px; }
}

/* ---------- 8. FAQ ---------- */
/* v2: seamless linen with an edge stitch, dried flowers at the left and a wooden button at the right
   (cut-outs in the side margins). Each question is a clean stitched linen tile drawn in CSS: even
   soft shadow all round, no baked-in art, so the tiles grow smoothly when an answer opens. */
.faq {
  --stitch-line: rgba(176, 106, 58, .7);
  padding-block: clamp(80px, 7.4vw, 112px);
  background: url("../assets/img/linen-tile.jpg") 0 0 / 400px repeat var(--linen);
}
.faq__flowers { left: max(-110px, (100vw - 1240px) / 2 - 205px); top: 180px; height: 600px; aspect-ratio: 224 / 620; background-position: left top; }
.faq__button { right: max(12px, (100vw - 1240px) / 2 - 100px); top: 600px; width: 92px; height: 94px; background-image: var(--img-button-wood, none); transform: rotate(-8deg); filter: drop-shadow(0 4px 5px rgba(80, 50, 20, .28)); }
@media (max-width: 900px) { .faq__flowers { display: none; } .faq__button { width: 60px; height: 62px; top: auto; bottom: 30px; } }
.faq .wrap { max-width: calc(1240px + var(--gutter) * 2); }
.faq .section-head { align-items: center; }
/* Two independent columns (v2 round 2): explicit column wrappers in a fixed two-track grid, aligned
   to the top, so opening an answer only moves the tiles below it in its own column. Answers open
   and close with a height animation (js/main.js); nothing else reflows. */
.faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
.faq__col { display: grid; gap: clamp(16px, 1.6vw, 24px); align-content: start; min-width: 0; }
.faq__a { overflow: hidden; }
.faq details {
  position: relative;
  isolation: isolate;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, .45), rgba(255, 252, 245, .2)), var(--tex-cream) 0 0 / 180px repeat #f3ebde;
  /* round 4 shading: a padded tile sewn on top of the linen - light catches the top edge, the bottom edge
     rolls into shade, a tight contact shadow plus a soft cast shadow lift it off the page */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -3px 5px rgba(120, 85, 45, .14),
    inset 0 0 0 1px rgba(150, 110, 60, .24),
    0 1px 1px rgba(70, 45, 20, .2),
    0 3px 5px rgba(70, 45, 20, .13),
    0 10px 18px rgba(70, 45, 20, .12);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* the running stitch sinks into the cloth: a hairline shadow under each dash */
.faq details::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1.5px dashed rgba(176, 118, 70, .65); border-radius: 8px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(90, 60, 30, .22)); }
.faq details:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -3px 5px rgba(120, 85, 45, .14),
    inset 0 0 0 1px rgba(150, 110, 60, .28),
    0 1px 1px rgba(70, 45, 20, .22),
    0 5px 8px rgba(70, 45, 20, .14),
    0 14px 24px rgba(70, 45, 20, .13);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(72px, 5.4vw, 88px);
  /* clear of the stitch line on every side */
  padding: clamp(18px, 1.5vw, 24px) clamp(24px, 2.2vw, 36px);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.3vw, 1.4rem);
  line-height: 1.22;
  cursor: pointer;
  list-style: none;
}
@media (min-width: 1100px) { .faq summary { white-space: nowrap; } } /* every question on one line on desktop */
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
.faq summary .ico { width: 1.15em; height: 1.15em; color: var(--rust); transition: transform .25s ease; }
.faq details.is-open summary .ico, html:not(.js) .faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 clamp(24px, 2.2vw, 36px) clamp(22px, 2vw, 30px); color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); }
.faq details p + p { margin-top: -.6em; }

@media (max-width: 860px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__col + .faq__col { margin-top: clamp(16px, 1.6vw, 24px); } }
/* Round 11/12: the FAQ is one list again in the two-column tile layout (round 12 cut it to 11 questions). Some
   questions are two short questions in one, so they may wrap (balanced) rather than being forced onto one line;
   answers can hold links (and lists) in the same muted body style. */
@media (min-width: 1100px) { .faq summary { white-space: normal; text-wrap: balance; } }
.faq details ul { padding: 0 clamp(24px, 2.2vw, 36px) clamp(22px, 2vw, 30px) calc(clamp(24px, 2.2vw, 36px) + 1.25em); color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); list-style: none; }
.faq details li { position: relative; }
.faq details li + li { margin-top: .4em; }
.faq details li::before { content: ""; position: absolute; left: -1.05em; top: .62em; width: .42em; height: .42em; border-radius: 50%; background: var(--rust); opacity: .75; }
.faq details li strong { color: var(--ink); font-weight: 600; }
.faq details p + ul, .faq details ul + p { margin-top: -.6em; }
.faq details a { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; }
.faq details a:hover { text-decoration-thickness: 2px; }
.faq details a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ===== Round 13: FAQ on the same soft linen tabletop as Features =====
   The tiles keep their felt look with a lighter, warmer lift; the spring posy (same art as Features) lies in
   the left margin and the wooden button in the right one, both clear of every tile, each with a soft contact
   shadow and a gentle ambient one (light from the top left). Where a margin is too narrow the posy is left
   off and the button moves down into the empty linen below the tiles. */
.faq { --sh: 96, 66, 34; }
.faq details {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 4px rgba(120, 85, 45, .1),
    inset 0 0 0 1px rgba(150, 110, 60, .2),
    0 1px 1.5px rgba(var(--sh), .14),
    0 3px 6px rgba(var(--sh), .06),
    2px 8px 18px rgba(var(--sh), .07);
}
.faq details:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 4px rgba(120, 85, 45, .1),
    inset 0 0 0 1px rgba(150, 110, 60, .24),
    0 1px 1.5px rgba(var(--sh), .16),
    0 4px 8px rgba(var(--sh), .08),
    2px 11px 22px rgba(var(--sh), .09);
}
.faq h2 { text-shadow: 0 1px 1px rgba(var(--sh), .1); }
/* round 16: 25% larger than round 15 and anchored to the bottom, so the stems run on down and tuck under the
   knitted trim instead of ending in mid-air. Round 15: the purple posy at half the round-14 size, lying in the left margin with more of the bunch in view
   (several blooms and the lavender). Its right-most petal always stops 18px short of the tiles and the
   heading, so a narrower margin simply shows less of it; hidden at 900px and below. */
.faq__flowers { background-image: var(--img-faq-sprig, none); aspect-ratio: 600 / 1304; background-position: center;
  --m: max(var(--gutter), (100vw - 1240px) / 2); --fw: clamp(275px, 25vw, 362px);
  width: var(--fw); height: auto; left: calc(var(--m) - 18px - var(--fw)); top: auto; bottom: -24px;
  filter: drop-shadow(1.2px 2.5px 1.2px rgba(var(--sh), .28)) drop-shadow(4px 7.5px 12px rgba(var(--sh), .15)); }
@media (max-width: 700px) { .faq .faq__flowers { display: none; } }
/* round 14: the heading stays on one line on desktop, with a slightly smaller intro beside it */
@media (min-width: 861px) {
  .faq .section-head h2 { white-space: nowrap; flex: none; }
  .faq .section-head .body { font-size: clamp(.92rem, 1vw, 1.05rem); max-width: 30em; }
}
@media (max-width: 860px) { .faq .section-head .body { font-size: .95rem; } }
.faq__button { width: 62px; height: 63px; right: calc(((100vw - 1240px) / 2 - 62px) / 2); top: 560px;
  filter: drop-shadow(.6px 1.2px .6px rgba(var(--sh), .42)) drop-shadow(1.5px 4px 6px rgba(var(--sh), .2)); }
@media (max-width: 1379px) {
  .faq__button { top: auto; bottom: 18px; right: max(18px, (100vw - 1240px) / 2); width: 52px; height: 53px; }
}

/* ---------- 9. Goodnight ---------- */
.night {
  display: flex;
  align-items: center;
  min-height: clamp(500px, 30vw, 720px);
  padding-block: 72px;
  color: var(--cream);
  background: url("../assets/img/goodnight.jpg") 78% center / cover no-repeat var(--night);
}
.night h2 { margin-bottom: .35em; }
.night__star { display: inline-block; width: .55em; height: .55em; margin-left: .35em; color: #e9b04f; vertical-align: .05em; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.night .lede { margin-bottom: clamp(24px, 2.4vw, 36px); }

@media (max-width: 860px) {
  .night {
    min-height: 0;
    padding-top: 300px;
    background:
      linear-gradient(180deg, rgba(17, 26, 48, 0) 200px, var(--night) 340px),
      url("../assets/img/goodnight.jpg") 69% top / auto 340px no-repeat var(--night);
  }
  .night .btn-row { gap: 12px; }
  .night .btn--suede { margin-right: 100%; margin-bottom: 4px; } /* own line, store badges below */
  .store--lg { min-height: 52px; font-size: 1.1rem; }
}

/* ---------- Footer ---------- */
.footer {
  --stitch-line: rgba(214, 150, 86, .5);
  position: relative;
  padding-block: 44px;
  color: rgba(255, 246, 232, .9);
  background: var(--night);
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.footer__logo { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.footer__brand p { margin-top: 6px; font-size: 1.05rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.2vw, 56px); font-size: 1.05rem; }
.footer__links a:hover, .footer__social a:hover { color: var(--gold); }
.footer__social { display: flex; align-items: center; gap: 26px; }
/* Round 25: social links as small stitched felt buttons: a dashed cream stitch round a soft see-through felt
   circle, with monoline icons in the footer's cream; gold on hover, like the footer links. */
.social { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.social__link {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: rgba(255, 246, 232, .9);
  background: rgba(255, 246, 232, .06);
  border: 1.5px dashed rgba(240, 214, 176, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(0, 0, 0, .25);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.social__link svg { width: 20px; height: 20px; }
.footer__social .social__link:hover { color: var(--gold); border-color: var(--gold); background: rgba(255, 246, 232, .1); transform: translateY(-1px); }
.social__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.footer__social p { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; color: rgba(255, 246, 232, .75); }

@media (max-width: 1080px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer__social { flex-wrap: wrap; }
  .footer__social p { flex-basis: 100%; padding-left: 0; border-left: 0; }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Policy pages (privacy-policy*.html, terms-of-use*.html; tools/build_legal.py) ---------- */
.legal__wrap { max-width: calc(940px + var(--gutter) * 2); }
.legal-hero {
  padding-block: clamp(120px, 11vw, 160px) clamp(56px, 6vw, 84px);
  color: var(--cream);
  background: url("../assets/img/pricing-tile.jpg") 0 0 / 360px repeat var(--navy);
}
.legal-hero h1 { margin-bottom: .2em; }
.legal__lang { float: right; margin: 4px 0 16px 16px; --h: 44px; }
.legal__sub { font-size: clamp(1.05rem, 1.3vw, 1.3rem); color: rgba(255, 246, 232, .9); }
.legal__date { margin-top: 1em; font-size: .98rem; color: var(--gold); }

.legal {
  padding-block: clamp(48px, 5vw, 80px) clamp(72px, 7vw, 104px);
  background: url("../assets/img/linen-tile.jpg") 0 0 / 400px repeat var(--linen);
}
.legal__doc {
  --felt: url("../assets/img/faq-panel.webp");
  --felt-sx: 73; --felt-sy: 67;
  --felt-w: 27px; --felt-h: 25px; --felt-ry: round;
  padding: clamp(34px, 5vw, 64px) clamp(26px, 5vw, 68px);
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.65;
  filter: drop-shadow(0 6px 10px rgba(110, 80, 40, .16));
  overflow-wrap: anywhere;
}
.legal__doc > * + * { margin-top: 1em; }
.legal__doc h2 {
  margin-top: 2.2em;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
  scroll-margin-top: 96px;
}
.legal__doc h2:first-child, .legal__notice + h2 { margin-top: 0; }
.legal__notice + h2 { margin-top: 1.6em; }
.legal__doc h3 { margin-top: 1.6em; font-family: var(--serif); font-size: clamp(1.15rem, 1.4vw, 1.35rem); color: var(--ink); scroll-margin-top: 96px; }
.legal__doc h2 + *, .legal__doc h3 + * { margin-top: .6em; }
.legal__doc strong { color: var(--ink); }
.legal__doc ul { padding-left: 1.3em; }
.legal__doc li + li { margin-top: .5em; }
.legal__doc li::marker { color: var(--rust); }
.legal__doc a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.legal__notice {
  padding: 1em 1.2em;
  color: var(--ink);
  font-weight: 600;
  background: rgba(181, 107, 74, .1);
  border: 1.5px dashed rgba(181, 107, 74, .6);
  border-radius: 8px;
}
.legal__table { overflow-x: auto; margin-block: 1.4em; border: 1.5px dashed rgba(166, 112, 62, .55); border-radius: 8px; background: rgba(255, 252, 245, .6); }
.legal__table table { width: 100%; border-collapse: collapse; font-size: .95em; line-height: 1.5; }
.legal__table th, .legal__table td { padding: .8em 1em; text-align: left; vertical-align: top; }
.legal__table thead th { font-family: var(--serif); color: var(--ink); background: rgba(166, 112, 62, .12); }
.legal__table tbody th { font-weight: 600; color: var(--ink); min-width: 11em; }
.legal__table tbody tr + tr > * { border-top: 1px solid rgba(166, 112, 62, .25); }
@media (max-width: 640px) {
  .legal__lang { float: none; display: inline-flex; margin: 0 0 18px; }
  .legal-hero .eyebrow { display: flex; width: max-content; }
  .legal__table table { min-width: 560px; }
}

/* ===== Round 15: sprig shadows without hard edges =====
   The sprigs fade their cut stems with a mask-image, and a mask clips to the element's own box, so the
   drop-shadow filter (painted first, then masked) was cut off in a straight line at the box's right and
   bottom edges, leaving a visible rectangle corner. Fix: the art and its mask move to a ::before layer, and
   the drop-shadow stays on the element, so the shadow is cast from the already-masked art and is never
   clipped by the mask box. The element paints no image itself (background-size 0). */
.decor > .deco.features__flowers, .decor > .deco.faq__flowers,
.decor > .deco.how__flowers, .decor > .deco.pricing__flowers {
  -webkit-mask-image: none; mask-image: none; background-size: 0 0;
}
.decor > .deco.features__flowers::before, .decor > .deco.faq__flowers::before,
.decor > .deco.how__flowers::before, .decor > .deco.pricing__flowers::before {
  content: ""; position: absolute; inset: 0;
  background-image: inherit; background-position: inherit; background-repeat: no-repeat; background-size: contain;
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 9%, #000 24%);
  mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 9%, #000 24%);
}
/* the FAQ posy is a whole bunch with natural stem ends, so it needs no fade */
.decor > .deco.faq__flowers::before { -webkit-mask-image: none; mask-image: none; }

/* Goodnight's knitted rib trim straddles the FAQ's bottom edge and is drawn above the FAQ's content (round 16;
   the round 15-16 scroll lighting was removed in round 17) */
.night.seam::before { z-index: 8; }