/* Homepage styles (round-4 design, live since 2026-09-29). Loaded after the page's inline <style>
   and /assets/hero.css, which own the live look (rail, nav, hero, statement band, Club, FAQ,
   newsletter, footer, WhatsApp bubble); the rules here refine them and style the new sections.

   Motion switch: `html.motion-off` is set in <head> for ?still and for reduced motion,
   and hero.js keeps it in sync. Every entrance below renders its final state under it.

   THE PINK FRIDGE (.pf), measured on /assets/home/fridge-pink.webp (1350 x 1790).
   Horizontal values are % of the image width, vertical values % of its height.
     --pf-in-l / --pf-in-r      interior: left wall 21.5%, front edge of the glass shelves 54.5%
     --pf-shelf-1 / -2          glass shelf lines, where a standing pack's base sits: 45% and 58%
     --pf-crisper-t / -b        crisper drawer: 72% to 86% down (21.9% to 57% across)
     --pf-frz-l/-r/-t/-b        freezer box, door closed in the photo: 21.5% to 53.7% across, 12.3% to 27.4% down
     --pf-door-l / -r           door bins, left and right edges: 58.1% and 89.3%
     --pf-door-1 / -2           door bins, the line a pack stands on: 48.3% and 74.9%
     --pf-pack                  width of one square pack cut-out: 15%. The pouch fills 74% of that
                                square, so it is 11.1% of the image width: a 15 cm bag in a fridge
                                about 48 cm wide inside. */

/* ---------- browser surfaces ---------- */
::selection { background: var(--pink); color: var(--ink); }
html { caret-color: var(--pink); scrollbar-color: #C4C4C4 #FFFFFF; scrollbar-gutter: stable; }
/* the live bubble is display:flex, so its hidden state needs saying */
.wa[hidden] { display: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* icons: inline Phosphor SVGs (MIT), sized like the icon font they replace: 1em, set by the parent's font-size */
.ic { display: inline-block; line-height: 1; font-style: normal; }
.ic svg { display: block; width: 1em; height: 1em; fill: currentColor; }
/* tabular figures go on digit runs only: Circular's tnum also widens spaces and commas */
.num { font-variant-numeric: tabular-nums; }
/* the live FAQ's open sign was an en dash; a minus sign reads the same */
.faq details[open] summary::after { content: "\2212"; }
.faq details p a, .r3-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.faq details p a:hover, .r3-link:hover { color: var(--pink-dark); }

/* ---------- hero: two actions of equal size ---------- */
.hero-ctas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; }
.hero-ctas .btn { justify-content: center; border: 1.5px solid var(--pink); }
.hero-ctas .btn-ghost { border-color: var(--ink); }

/* ---------- new-section heading: heading, then one plain line ---------- */
.r3-head { margin-bottom: 40px; }
.r3-head p { margin-top: 16px; max-width: 60ch; color: var(--muted); font-size: 1.05rem; font-weight: 500; }
.r3-head p.r3-lede { color: var(--ink); font-size: 1.2rem; }


/* ---------- #menu: the shelf, the hint, the highlights, the bag ---------- */
/* --zone: height of a pack bay; --stage: the grey fridge interior behind the small packs.
   The pulled-forward pack is taller than the stage and stands out above it. */
.r3-menu { --zone: 330px; --stage: 210px; --small: .4; --big: .84; border-bottom: 1px solid var(--line); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.shelf-wrap { min-width: 0; }
.interior { position: relative; padding: 0 12px; }
.interior::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--zone) - var(--stage)); height: calc(var(--stage) + 6px); background: #F4F4F4; box-shadow: inset 0 0 0 1px var(--line); }
.shelf { position: relative; z-index: 1; list-style: none; display: flex; justify-content: center; gap: 6px; }
.shelf-glass { position: absolute; left: -12px; right: -12px; top: calc(var(--zone) - 8px); z-index: 1; height: 14px;
  background: linear-gradient(180deg, #FFFFFF 0 38%, #EEF2F3 38%); border-top: 1px solid #E2E2E2; border-bottom: 1px solid #BDBDBD; box-shadow: 0 6px 8px -6px rgba(20, 20, 20, .25); }
.shelf-item { position: relative; width: 108px; flex: 1 1 108px; min-width: 0; display: flex; flex-direction: column; transition: flex-basis .48s cubic-bezier(.16, 1, .3, 1); }
.shelf-item[data-open] { flex: 0 0 272px; }
.pack-area { position: relative; z-index: 2; height: var(--zone); }
/* the pulled-forward pack stands on the one soft pink surface */
.pack-area::before { content: ""; position: absolute; inset: 0 -3px 6px; background: var(--tint); opacity: 0; transition: opacity .35s; }
.shelf-item[data-open] .pack-area::before { opacity: 1; }
.pack { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.pack:focus-visible { outline-offset: -4px; }
/* the cut-out pouch spans about 4% to 96% of its square image; it stands in the glass */
.pk-scale { position: absolute; left: 50%; bottom: -9px; width: 356px; height: 356px; pointer-events: none;
  transform-origin: 50% 96%; transform: translateX(-50%) scale(var(--small)); transition: transform .56s cubic-bezier(.16, 1, .3, 1); }
.shelf-item[data-open] .pk-scale { transform: translateX(-50%) scale(var(--big)); }

/* turn over: every pack has a front (the label) and a back (the chicken) */
.pk-3d { position: absolute; inset: 0; }
.pk-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1600px) rotateY(0deg); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.shelf-item[data-turned] .pk-flip { transform: perspective(1600px) rotateY(180deg); }
.face { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: drop-shadow(0 12px 12px rgba(20, 20, 20, .13)); }
.face.back { transform: rotateY(180deg); }
.turn { display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink);
  font: 700 .8rem/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.turn i { font-size: 17px; }
.turn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.shelf-item[data-open] .turn { display: inline-flex; }

/* the hint: "Click" (or "Tap") bouncing over the pack next to the open one, until the visitor picks one */
.hint { position: absolute; left: 50%; bottom: 158px; z-index: 4; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px 6px 12px; border-radius: 999px; background: var(--pink); color: var(--ink); pointer-events: none;
  font: 700 .78rem/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 12px -6px rgba(20, 20, 20, .45);
  opacity: 0; transform: translateX(-50%); transition: opacity .3s; }
.hint i { font-size: 14px; }
.hint-tap { display: none; }
@media (hover: none) { .hint-click { display: none; } .hint-tap { display: inline; } }
.shelf-item[data-hint] .hint { opacity: 1; animation: r3-bounce 1.2s ease-in-out infinite; }
.shelf.hint-done .hint { opacity: 0; animation: none; }
@keyframes r3-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }

/* shelf-edge tags. Round 4 (Tom): the card's head (name, price, badge) is a button that pulls the pack
   forward, like the pack itself. While the pack is back on the shelf the whole card is its target;
   the stepper sits above that target, so it keeps its own clicks. */
.stag-pick { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.stag-top, .stag-name, .stag-price, .stag-cal { display: block; }
.shelf-item:not([data-open]) .stag-pick::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.stag .stepper, .stag .stag-link { position: relative; z-index: 2; }
.stag-pick:focus-visible { outline: none; }
.stag:has(.stag-pick:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
.shelf-item[data-open] .stag-pick { cursor: default; }
/* shelf-edge tags */
.stag { position: relative; margin-top: 16px; padding: 12px 8px 12px 11px; background: #FFFFFF; border: 1px solid var(--line); overflow: hidden; }
/* the flavour colour runs along the top edge, as on the prints */
.stag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--fc); }
.stag-name { font-weight: 700; font-size: .85rem; line-height: 1.2; }
.stag-price { margin-top: 4px; font-weight: 900; font-size: .85rem; line-height: 1; white-space: nowrap; }
.stag-count { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--pink); color: var(--ink); font: 900 .75rem/22px var(--sans); text-align: center; }
.stag-count[hidden] { display: none; }
.stag:has(.stag-count:not([hidden])) .stag-name { padding-right: 24px; }
.stag-more, .stepper { display: none; }
.shelf-item[data-open] .stag { padding: 18px 16px 16px 18px; }
.shelf-item[data-open] .stag-name { font-size: 1.2rem; letter-spacing: -.02em; }
.shelf-item[data-open] .stag-price { font-size: 1.75rem; margin-top: 6px; letter-spacing: -.03em; }
.shelf-item[data-open] .stag-more, .shelf-item[data-open] .stepper { display: block; }
.shelf-item[data-open] .stepper { display: flex; }
.shelf-item[data-open] .stag-cal { display: none; }
/* Small desktop tags: the name keeps two lines so the five prices share one baseline. The large white-on-pink
   badge is too wide for a small tag, so there it runs as a strip along the card's bottom edge, and every small
   card keeps the same height. */
@media (min-width: 1024px) {
  .shelf-item:not([data-open]) .stag-pick { display: flex; flex-direction: column; min-height: var(--stag-h, 132px); }
  .shelf-item:not([data-open]) .stag-top { display: contents; }
  .shelf-item:not([data-open]) .stag-name { order: 1; min-height: 2.4em; }
  .shelf-item:not([data-open]) .stag-price { order: 2; }
  .shelf-item:not([data-open]) .stag-cal { order: 3; }
  .shelf-item:not([data-open]) .fav { order: 4; display: block; margin: auto -8px -12px -11px; padding: 6px 8px 8px 11px; border-radius: 0; }
}

/* per-flavour highlights (Tom): Naked's calories in pink with a hop; a badge on Spicy Tomato and Sesame */
.stag-cal { margin-top: 6px; font-weight: 900; font-size: 1.17rem; line-height: 1; letter-spacing: -.02em; color: var(--pink); }
.stag-cal small { font-size: .7rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.hop { display: inline-block; animation: r3-hop 3.6s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes r3-hop { 0%, 76%, 100% { transform: translateY(0); } 82% { transform: translateY(-6px); } 88% { transform: translateY(0); } 92% { transform: translateY(-2px); } }
/* Round 4 (Tom): white text on the pink badge. White on #FF2D7A measures 3.55:1, so the badge is set as
   large text (bold, at least 18.67 px), where WCAG AA asks for 3:1. */
.fav { display: inline-block; margin-top: 8px; padding: 4px 9px 5px; border-radius: 8px; background: var(--pink); color: #FFFFFF;
  font-weight: 900; font-size: 1.17rem; line-height: 1.05; letter-spacing: -.01em; }
.shelf-item[data-open] .fav { margin: 8px 0 2px; padding: 5px 12px 6px; border-radius: 999px; white-space: nowrap; }
/* the badge follows the name (no label above the name) */
.shelf-item[data-open] .stag-top { display: flex; flex-direction: column; align-items: flex-start; }
.stag-line { margin-top: 10px; font-size: .88rem; line-height: 1.4; color: var(--muted); font-weight: 500; }
.stag-pitch { margin-top: 8px; font-size: .88rem; line-height: 1.4; font-weight: 700; }
.stag-macros { margin-top: 14px; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 6px; }
.stag-macros div { display: flex; flex-direction: column-reverse; }
.stag-macros dt { font-size: .7rem; color: var(--muted); font-weight: 500; }
.stag-macros dd { font-weight: 900; font-size: 1rem; white-space: nowrap; }
.stag-macros dd.is-hi { color: var(--pink); font-size: 1.17rem; line-height: 1.1; }
.stag-allergens { margin-top: 12px; font-size: .8rem; line-height: 1.4; color: var(--muted); font-weight: 500; }
.stag-allergens b { color: var(--ink); font-weight: 700; }
.stag-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .8rem; font-weight: 700; }
.stag-link:hover { color: var(--pink-dark); }
.stepper { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 12px; }
.step-btn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--ink); background: #FFFFFF; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; font-size: 18px; transition: background-color .15s, transform .15s; }
.step-btn:active { transform: scale(.94); }
.step-btn.add { background: var(--ink); color: #FFFFFF; }
.step-btn[disabled] { border-color: rgba(20, 20, 20, .25); color: rgba(20, 20, 20, .35); cursor: not-allowed; transform: none; }
.step-n { font: 900 1.5rem/1 var(--sans); min-width: 2ch; text-align: center; }
.macro-note { margin-top: 24px; font-size: .85rem; color: var(--muted); font-weight: 500; }

/* the bag */
.bag { position: sticky; top: 88px; padding: 24px; background: #FFFFFF; border: 1px solid var(--line); }
.bag h3 { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; }
.bag h3 i { font-size: 22px; }
.bag-lines { list-style: none; margin-top: 16px; font-size: .9rem; font-weight: 500; }
.bag-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.bag-lines li + li { border-top: 1px solid var(--line); }
.bag-empty { margin-top: 12px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.bag-total { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bag-total > span { font-size: .9rem; color: var(--muted); font-weight: 500; }
.bag-total strong { font-weight: 900; font-size: 1.9rem; letter-spacing: -.03em; white-space: nowrap; }
.bag-progress { margin-top: 16px; display: flex; gap: 6px; }
.bag-progress i { flex: 1; height: 22px; border: 1.5px dashed rgba(20, 20, 20, .3); transition: background-color .25s, border-color .25s; }
.bag-progress i.on { background: var(--pink); border: 1.5px solid var(--pink); }
.bag-status { margin-top: 10px; font-weight: 700; font-size: .92rem; line-height: 1.35; }
.bag-note { margin-top: 6px; font-size: .8rem; color: var(--muted); line-height: 1.45; font-weight: 500; }
.msg-label { margin-top: 18px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.msg-text { margin-top: 6px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #F2F2F2; color: var(--ink);
  font-size: .82rem; line-height: 1.45; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.bag .btn { width: 100%; margin-top: 16px; justify-content: center; }
.bag .btn i { font-size: 18px; }
.msg-solo { display: none; margin-top: 16px; max-width: 420px; }

/* ---------- #club: the live black block, plus a shelf picture per tier ---------- */
/* Round 4 (Tom): the Club's name is the headline, larger than the live h2; the old h2 is the line under it */
.club .club-name { max-width: none; font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.04em; line-height: .95; }
.club .club-sub { margin-top: 14px; max-width: 22ch; color: rgba(255, 255, 255, .72); font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.club .club-sub + .lead { margin-top: 28px; }
.tier .t-price small { display: block; margin-top: 4px; }
.rack { display: grid; gap: 12px; margin: 16px 0 10px; padding: 0 6px; }
.rack-row { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); aspect-ratio: 7 / 1.12; align-items: end; }
.rack-row img { position: relative; z-index: 1; width: 120%; max-width: none; height: auto; aspect-ratio: 1; justify-self: center; margin-bottom: -5%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 24ms), opacity .18s linear calc(var(--i) * 24ms); }
/* thin light glass, readable on black */
.rack-row::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 6px; z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16)); box-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 6px 10px -4px rgba(0, 0, 0, .6); }
.rack-row.is-empty::after { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07)); box-shadow: none; }
/* the restock: set by home.js per rack, the first time that rack comes into view */
.rack[data-restock="wait"] .rack-row img { opacity: 0; transform: translateY(-26px); transition: none; }

/* ---------- the pink fridge: its measured geometry (see the header) ---------- */
.pf { --pf-in-l: 21.5%; --pf-in-r: 54.5%; --pf-shelf-1: 45%; --pf-shelf-2: 58%; --pf-crisper-t: 72%; --pf-crisper-b: 86%;
  --pf-frz-l: 21.5%; --pf-frz-r: 53.7%; --pf-frz-t: 12.3%; --pf-frz-b: 27.4%;
  --pf-door-l: 58.1%; --pf-door-r: 89.3%; --pf-door-1: 48.3%; --pf-door-2: 74.9%; --pf-pack: 15%;
  position: relative; aspect-ratio: 1350 / 1790; isolation: isolate; }
.pf-img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- #area: the map and its two lists ---------- */
.r3-area { border-top: 1px solid var(--line); }
.area { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.area-copy h3 { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; }
.area-copy h3 + p, .area-copy .places + p { margin-top: 10px; }
.area-copy p { color: var(--muted); font-weight: 500; max-width: 46ch; }
.area-copy p strong { color: var(--ink); }
.area-part + .area-part { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
/* map legend: the same pink area and grey dashed line as on the map */
.key { flex: none; display: inline-block; width: 28px; height: 16px; }
.key-in { background: rgba(255, 45, 122, .2); border: 2.5px solid var(--pink); }
.key-out { border-top: 2px dashed #8C8C8C; height: 0; }
.places { list-style: none; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.area-in .places li { font-weight: 700; font-size: 1.05rem; }
.area-out .places li { font-weight: 500; color: var(--muted); }
/* the floating WhatsApp bubble sits at the bottom right: the copy ends well above it and stays out of its lane */
.area-copy { padding-bottom: 96px; }
@media (min-width: 1200px) { .area-copy { padding-right: 48px; } }
.area-pin { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.area-pin p { color: var(--ink); font-weight: 700; }
.area-pin .btn i { font-size: 18px; }

/* ---------- FAQ: the last item asks a question on WhatsApp (Round 4, Tom); the newsletter input's look ---------- */
.ask { display: grid; justify-items: start; gap: 10px; max-width: 64ch; padding: 0 0 26px; }
.ask label { font-weight: 700; font-size: .95rem; }
.ask textarea { width: 100%; min-height: 104px; padding: 14px 18px; border-radius: 22px; border: 1.5px solid var(--ink); background: #FFFFFF; color: var(--ink);
  font: 500 .95rem/1.5 var(--sans); resize: vertical; }
.ask textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 45, 122, .45); }
.ask textarea[aria-invalid="true"] { border-color: var(--pink); }
.faq .ask .ask-help { padding: 0; font-size: .85rem; color: var(--muted); font-weight: 500; }
.ask .btn { margin-top: 4px; }
.ask .btn i { font-size: 18px; }
.ask .btn:disabled { background: #F2F2F2; color: #6B6B6B; cursor: not-allowed; transform: none; }

/* ---------- newsletter: a designed error and success ---------- */
.news .sr + input { margin: 0; }
.news .msg { display: flex; justify-content: center; align-items: flex-start; gap: 8px; max-width: 52ch; margin-inline: auto; color: var(--ink); line-height: 1.45; }
.news .msg:empty { display: none; }
.news .msg i { flex: none; font-size: 20px; margin-top: 1px; }
.news .msg.is-error i { color: var(--pink); }
.news .msg.is-ok i { color: #1E7A48; }
.news .msg a { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: .2em; }
.news input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 45, 122, .45); }
.news input[aria-invalid="true"] { border-color: var(--pink); }

/* ---------- hover (pointer only) ---------- */
@media (hover: hover) {
  .pack:hover .pk-scale { transform: translateX(-50%) scale(calc(var(--small) + .03)); }
  .shelf-item[data-open] .pack:hover .pk-scale { transform: translateX(-50%) scale(var(--big)); }
  .turn:hover { border-color: var(--ink); }
  .step-btn:not([disabled]):hover { background: var(--tint); }
  .step-btn.add:hover { background: #000000; }
  .shelf-item:not([data-open]) .stag:hover { border-color: var(--ink); }
}

/* ---------- responsive ---------- */
@media (min-width: 1440px) { .builder { grid-template-columns: minmax(0, 1fr) 310px; } }
@media (max-width: 1199px) {
  .builder { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bag { top: 72px; z-index: 5; order: -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 12px 14px 14px 16px; }
  .bag h3, .bag-lines, .bag-empty, .bag-note, .bag .msg-label, .bag .msg-text { display: none; }
  .bag-total { grid-column: 1; margin-top: 0; padding-top: 0; border-top: 0; }
  .bag-total strong { font-size: 1.35rem; }
  .bag-status { grid-column: 1; margin-top: 2px; font-size: .8rem; }
  .bag-progress { grid-column: 1; margin-top: 8px; gap: 6px; }
  .bag-progress i { height: 12px; border-radius: 2px; }
  .bag .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; margin-top: 0; }
  .msg-solo { display: block; }
}
@media (max-width: 1023px) {
  .interior { padding: 0; }
  .interior::before, .shelf-glass { display: none; }
  .shelf { flex-direction: column; gap: 12px; }
  .shelf-item, .shelf-item[data-open] { width: auto; flex: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); transition: none; }
  /* the row carries the frame; the pack bay is sized to the pack and centred beside a tall tag card */
  .shelf-item, .shelf-item[data-open] { align-items: center; border: 1px solid var(--line); background: #FFFFFF; }
  .pack-area { height: 150px; background: #F4F4F4; }
  .pack-area::before { inset: 0; }
  .pack-area::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none;
    background: linear-gradient(180deg, #FFFFFF 0 38%, #EEF2F3 38%); border-top: 1px solid #E2E2E2; border-bottom: 1px solid #BDBDBD; }
  .pack { z-index: 1; }
  .pk-scale, .shelf-item[data-open] .pk-scale { bottom: 6px; width: 132px; height: 132px; transform: translateX(-50%); transition: none; }
  .face { filter: none; }
  .shelf-item .turn { top: 6px; left: auto; right: 6px; transform: none; width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; }
  .shelf-item .turn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hint { bottom: auto; top: -14px; }
  .stag, .shelf-item[data-open] .stag { align-self: stretch; margin-top: 0; border: 0; padding: 17px 14px 14px 18px; }
  .stag-name, .shelf-item[data-open] .stag-name { font-size: 1.1rem; padding-right: 30px; }
  .stag-price, .shelf-item[data-open] .stag-price { font-size: 1.15rem; margin-top: 4px; }
  .fav { white-space: nowrap; border-radius: 999px; }
  .stepper { display: flex; }
  .area { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 767px) {
  .bag { grid-template-columns: minmax(0, 1fr); }
  .bag .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: 12px; }
}

/* ---------- calm: ?still and reduced motion show every final state ---------- */
.motion-off .hop, .motion-off .shelf-item[data-hint] .hint { animation: none; }
.motion-off .rack-row img, .motion-off .shelf-item, .motion-off .pk-scale { transition: none; }

/* ================= the process shelf and the pink fridge =================
   Two parts: the glass shelf ("why it's juicy", #made) and the pink fridge ("Keep it. Heat it.", #keep).
   Every class carries the a- prefix. */
.a-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--pink);color:#fff}

/* ---------- why it's juicy: one glass shelf in 3D ---------- */
.a-made{padding:72px 0 112px;border-bottom:1px solid var(--line);overflow-x:clip}
.a-head{max-width:60ch;margin-bottom:44px}
.a-head h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.a-head .a-lede{margin-top:14px;color:var(--ink);font-size:clamp(1.2rem,1rem + .6vw,1.45rem);font-weight:500;line-height:1.35;max-width:40ch}

/* the stage holds the rotating shelf (photos + glass) and, outside the rotation, the flat row of tags */
.a-stage{--d:150px;--gap:22px;--pad:20px;position:relative;perspective:1200px;perspective-origin:50% -10%;padding:28px 0 0}
.a-shelf{position:relative;transform-style:preserve-3d;transform:rotateX(-7deg)}
.a-row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--gap);padding:0 var(--pad);transform-style:preserve-3d}
.a-slot{position:relative;aspect-ratio:1;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent}
.a-drop,.a-lift{position:absolute;inset:0;transform-style:preserve-3d}
.a-lift{transition:transform .6s cubic-bezier(.16,1,.3,1)}

/* each print is a real button: it opens the photo larger (the modal below) */
.a-open{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in;border-radius:14px;-webkit-tap-highlight-color:transparent}
.a-open:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.a-slot.is-pack .a-open:focus-visible{outline-offset:-2px}
/* a print standing on the glass: white mat, the photo in a window that parallaxes */
.a-print{position:absolute;inset:0;display:block;margin:0;background:#fff;padding:7px;border-radius:14px;
  box-shadow:0 0 0 1px rgba(20,20,20,.06),0 20px 26px -20px rgba(20,20,20,.45);transition:box-shadow .6s cubic-bezier(.16,1,.3,1)}
.a-win{position:relative;display:block;height:100%;overflow:hidden;border-radius:8px;background:#EEF1F1;isolation:isolate}
.a-win img{width:100%;height:100%;object-fit:cover;transform:scale(1.2)}
.a-win::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,20,20,.05);pointer-events:none}
/* the last stop is the real pack itself, standing on the glass */
.a-print.is-pack{background:none;padding:0;box-shadow:none}
.a-print.is-pack img{position:absolute;left:50%;bottom:0;width:auto;height:100%;max-width:none;transform:translate(-50%,4%);filter:drop-shadow(0 10px 10px rgba(20,20,20,.22))}

/* its reflection, drawn in the glass top itself (so the glass clips it): flipped, softened, fading toward the front edge */
.a-refl{position:absolute;top:50%;height:50%;width:calc((100% - 2 * var(--pad) - 4 * var(--gap)) / 5);
  left:calc(var(--pad) + var(--i) * ((100% - 2 * var(--pad) - 4 * var(--gap)) / 5 + var(--gap)));
  overflow:hidden;pointer-events:none;opacity:.12;transition:opacity .5s;
  -webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.a-refl img{position:absolute;left:7px;right:7px;top:0;width:calc(100% - 14px);height:auto;aspect-ratio:1;max-width:none;object-fit:cover;transform:scaleY(-1);filter:blur(2px)}
.a-refl.is-pack{opacity:.14}
.a-refl.is-pack img{left:0;width:100%;object-fit:contain;object-position:50% 100%}
.a-refl.is-up{opacity:0}

/* the glass: one slab across the whole row (top face, bright front edge), and a contact shadow under each card */
.a-glass{position:absolute;left:0;right:0;bottom:0;height:0;transform-style:preserve-3d;pointer-events:none}
.a-top{position:absolute;left:0;right:0;top:calc(var(--d) / -2);height:var(--d);transform:rotateX(90deg);overflow:hidden;
  background:linear-gradient(180deg,rgba(186,216,212,.42),rgba(206,230,227,.62) 55%,rgba(226,242,240,.82) 92%,#fff)}
.a-edge{position:absolute;left:0;right:0;top:0;height:12px;transform:translateZ(calc(var(--d) / 2));overflow:hidden;border-radius:3px;
  background:linear-gradient(180deg,#FFFFFF 0 1.5px,#DCEFEC 2px,#B9D8D3 55%,#CFE6E2 85%,#E9F5F3);
  box-shadow:0 14px 18px -12px rgba(20,20,20,.28)}
.a-edge::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 12%,rgba(255,255,255,.95) 88%,rgba(255,255,255,0))}
.a-contact{position:absolute;left:6%;right:6%;bottom:-20px;height:40px;transform:translateY(-1px) rotateX(90deg);pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,20,20,.46),rgba(20,20,20,.18) 55%,rgba(20,20,20,0));
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}
.a-slot.is-pack .a-contact{left:22%;right:22%}

/* the light: a soft glare inside each photo window, on the glass top and along the edge, placed from the pointer */
.a-shine{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,.22) 45%,rgba(255,255,255,0));
  mix-blend-mode:overlay;opacity:0;transition:opacity .5s}
.a-top .a-shine{width:170px;height:var(--d);margin:calc(var(--d) / -2) 0 0 -85px;border-radius:0;mix-blend-mode:normal;
  background:radial-gradient(ellipse 50% 60% at 50% 55%,rgba(255,255,255,.45),rgba(255,255,255,0))}
.a-edge .a-shine{width:220px;height:40px;margin:-20px 0 0 -110px;mix-blend-mode:normal;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
.a-made.is-lit .a-shine{opacity:1}
/* in each photo, a soft diagonal sheen crosses the glare's centre, like light on a glossy print */
.a-win .a-shine::after{content:"";position:absolute;inset:25%;mix-blend-mode:normal;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 70%)}

/* the tags: a flat row outside the rotation (sharp text); it only shifts sideways with the tilt, in whole pixels */
.a-tags{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--gap);padding:0 var(--pad);margin-top:50px}
.a-tag{position:relative;background:#fff;border-radius:12px;padding:14px 14px 16px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(20,20,20,.07),0 16px 22px -16px rgba(20,20,20,.42);transition:box-shadow .4s}
.a-name{font-weight:700;font-size:.9rem;line-height:1.2}
.a-fig{margin-top:6px;font-weight:900;font-size:clamp(1.45rem,1rem + 1vw,2rem);letter-spacing:-.035em;line-height:1;white-space:nowrap}
.a-line{margin-top:10px;font-size:.84rem;line-height:1.4;color:#4A4A4A;font-weight:500}

/* lifted: hover, keyboard focus or a tap on a photo or its tag */
.a-slot.is-up .a-lift{transform:translate3d(0,-30px,110px)}
.a-slot.is-up .a-print:not(.is-pack){box-shadow:0 0 0 1px rgba(20,20,20,.06),0 46px 46px -24px rgba(20,20,20,.55)}
.a-slot.is-up .a-print.is-pack img{filter:drop-shadow(0 26px 22px rgba(20,20,20,.3))}
.a-slot.is-up .a-contact{transform:translateY(-1px) rotateX(90deg) scale(1.5,2);opacity:.55}
.a-tag.is-up{box-shadow:0 0 0 1.5px var(--ink),0 22px 26px -18px rgba(20,20,20,.5)}

/* phones and narrow tablets: a horizontal snap row on one continuous glass edge, no tilt */
@media (max-width:899px){
  .a-made{padding:56px 0 80px}
  .a-head{margin-bottom:26px}
  .a-stage{--gap:14px;--pad:0px;perspective:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;
    margin:0 -24px;padding:26px 24px 28px;scrollbar-width:none}
  .a-stage::-webkit-scrollbar{display:none}
  .a-shelf{transform:none!important;width:max-content}
  .a-row,.a-tags{grid-template-columns:repeat(5,min(62vw,248px));width:max-content}
  .a-slot{scroll-snap-align:center}
  .a-glass{left:-24px;right:-24px}
  .a-top{transform:none;top:-11px;height:11px;background:linear-gradient(180deg,rgba(214,234,232,.35),rgba(226,241,239,.9))}
  .a-edge{transform:none;border-radius:0}
  .a-contact{transform:none;bottom:-8px;height:16px}
  .a-slot.is-up .a-contact{transform:scale(1.2,1.3);opacity:.45}
  .a-slot.is-up .a-lift{transform:translate3d(0,-14px,0) scale(1.03)}
  .a-refl{display:none}
  .a-tags{margin-top:16px;transform:none!important}
  .a-win img{transform:none}
  .a-shine{display:none}
}

/* ---------- the photo, larger: a native <dialog> ---------- */
.a-modal{width:min(64vw,920px);max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;background:none;color:var(--ink);overflow:auto;overscroll-behavior:contain;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.a-modal:focus{outline:none}
.a-modal::backdrop{background:rgba(20,20,20,.74)}
.a-modal[open]{opacity:1;transform:none;transition:opacity .18s ease-out,transform .22s cubic-bezier(.16,1,.3,1)}
.a-modal[open]::backdrop{opacity:1;transition:opacity .18s ease-out}
@starting-style{.a-modal[open]{opacity:0;transform:scale(.96)}.a-modal[open]::backdrop{opacity:0}}
html:has(.a-modal[open]){overflow:hidden}
.a-m-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:1fr auto;grid-template-areas:"pic cap" "pic nav";
  column-gap:32px;padding:14px 28px 14px 14px;background:#fff;border-radius:18px}
.a-m-pic{grid-area:pic;display:grid;place-items:center;border-radius:10px}
.a-m-img{border-radius:10px;width:100%;height:auto;max-height:calc(100dvh - 52px);object-fit:contain}
.a-m-box.is-pack .a-m-pic{background:#F4F4F4;overflow:hidden}
.a-m-box.is-pack .a-m-img{width:auto;max-width:100%;height:min(calc(100dvh - 52px),600px);filter:drop-shadow(0 16px 16px rgba(20,20,20,.18))}
.a-m-cap{grid-area:cap;align-self:end;padding-top:72px}
.a-m-step{font-size:.85rem;font-weight:500;color:var(--muted)}
.a-m-name{margin-top:6px;font-weight:700;font-size:1.15rem;line-height:1.2}
.a-m-fig{margin-top:6px;font-weight:900;font-size:clamp(2.4rem,1.6rem + 2vw,3.4rem);letter-spacing:-.04em;line-height:1}
.a-m-line{margin-top:14px;font-size:1.05rem;line-height:1.5;font-weight:500;color:#4A4A4A;max-width:34ch}
.a-m-nav{grid-area:nav;display:flex;gap:10px;margin-top:28px;padding-bottom:14px}
.a-m-nav button,.a-m-close{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font-size:20px;cursor:pointer;transition:background-color .15s,transform .15s}
.a-m-nav button:active,.a-m-close:active{transform:scale(.94)}
.a-m-close{position:absolute;top:14px;right:14px;z-index:2;border-color:transparent;background:#F2F2F2}
.a-m-nav button:focus-visible,.a-m-close:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
@media (hover:hover){.a-m-nav button:hover{background:var(--tint)}.a-m-close:hover{background:var(--tint)}.a-tag:hover{box-shadow:0 0 0 1.5px var(--ink),0 22px 26px -18px rgba(20,20,20,.5)}}
@media (max-width:899px){
  .a-modal{width:calc(100vw - 20px);border-radius:16px}
  .a-m-box{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"pic" "cap" "nav";padding:10px 10px 4px;border-radius:16px}
  .a-m-img{max-height:52dvh}
  .a-m-box.is-pack .a-m-img{height:min(52dvh,360px)}
  .a-m-cap{padding:18px 8px 0}
  .a-m-fig{font-size:2.3rem}
  .a-m-line{font-size:1rem;margin-top:10px}
  .a-m-nav{margin-top:16px;padding:0 8px 12px;justify-content:flex-end}
  .a-m-close{top:18px;right:18px;background:rgba(255,255,255,.92)}
}

/* a phone held sideways: photo and caption side by side, the photo capped to the screen height */
@media (max-width:899px) and (orientation:landscape) and (max-height:500px){
  .a-modal{width:calc(100vw - 24px)}
  .a-m-box{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:1fr auto;grid-template-areas:"pic cap" "pic nav";column-gap:20px;padding:10px 16px 10px 10px}
  .a-m-img{max-height:calc(100dvh - 44px)}
  .a-m-box.is-pack .a-m-img{height:calc(100dvh - 44px)}
  .a-m-cap{padding:56px 0 0}
  .a-m-fig{font-size:2rem}
  .a-m-line{font-size:.95rem}
  .a-m-nav{margin-top:12px;padding:0 0 4px;justify-content:flex-start}
  .a-m-close{top:10px;right:10px}
}

/* ---------- keep it, heat it: the pink fridge ---------- */
.a-keep{padding:96px 0 104px;border-bottom:1px solid var(--line);overflow-x:clip}
.a-keep-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);grid-template-areas:"fridge khead" "fridge kbody" "fridge heat";
  grid-template-rows:auto auto 1fr;column-gap:clamp(40px,6vw,88px);align-items:start}
.a-khead{grid-area:khead;align-self:end}
.a-kbody{grid-area:kbody}
.a-heat{grid-area:heat;margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.a-keep h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}

/* the fridge: generated pink fridge + real pack cut-outs at true scale (a 15 cm pack, a 48 cm wide interior) */
.a-fridge{grid-area:fridge;width:100%;max-width:540px;justify-self:center}
.a-fz{position:absolute;left:21.48%;top:12.63%;width:32.37%;height:14.13%}
.a-fz-in{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#B9C6CB,#CCD6DA 40%,#D8E0E3 78%,#C3CED2);
  box-shadow:inset 0 22px 22px -12px rgba(20,20,20,.34),inset 18px 0 18px -14px rgba(20,20,20,.22),inset -18px 0 18px -14px rgba(20,20,20,.18),inset 0 -10px 12px -8px rgba(20,20,20,.22)}
.a-pk{position:absolute;z-index:2;width:var(--pf-pack);height:auto;aspect-ratio:1;max-width:none;transform-origin:50% 96%;
  filter:drop-shadow(0 2px 1.5px rgba(20,20,20,.28)) brightness(.97);
  transition:transform .9s cubic-bezier(.65,0,.35,1) var(--out,0s),filter .6s ease var(--out,0s)}
.a-pk1{left:21.56%;top:34.61%;--to:translate(1.31%,-170.86%) perspective(420px) rotateX(50deg) rotate(-2deg);--out:.42s;--in:.12s}
.a-pk2{left:34.16%;top:34.28%;--to:translate(13.65%,-167.9%) perspective(420px) rotateX(50deg) rotate(2.5deg);--out:.3s;--in:.24s;z-index:3}
.a-pk3{left:22.45%;top:48.8%}
.a-pk4{left:36.53%;top:48.36%;--to:translate(-50.54%,-300.25%) perspective(420px) rotateX(52deg) rotate(-1deg);--out:.18s;--in:.36s;z-index:4}
/* the front lip of each glass shelf, cut from the same photo, sits over the pack bottoms */
.a-lip{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}
.a-lip1{clip-path:polygon(21.7% 45.36%,54.67% 44.58%,54.67% 46.26%,21.7% 46.42%)}
.a-lip2{clip-path:polygon(21.7% 59.72%,54.67% 58.55%,54.67% 59.33%,21.7% 60.56%)}
/* frost and the freezer door sit on top */
.a-fz-top{position:absolute;left:21.48%;top:12.63%;width:32.37%;height:14.13%;z-index:6;perspective:520px;perspective-origin:50% 260%;pointer-events:none}
.a-frost{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:
    radial-gradient(ellipse 55% 38% at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 70% at 0% 50%,rgba(255,255,255,.5),rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 22% 70% at 100% 50%,rgba(255,255,255,.5),rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 70% 26% at 50% 100%,rgba(255,255,255,.6),rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(240,248,251,.2),rgba(236,245,249,.14));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 16px 2px rgba(255,255,255,.55)}
.a-door{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.65,0,.35,1) var(--dout,.95s)}
.a-door i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.a-door-f{background:url(/assets/home/fridge-pink.webp) no-repeat;background-size:308.92% 707.51%;background-position:31.76% 14.7%}
.a-door-b{transform:rotateX(180deg);background:linear-gradient(0deg,#E9EEEF,#F7F9F9 60%,#DDE3E5);box-shadow:inset 0 0 0 2px rgba(20,20,20,.06)}

.a-fridge.is-frozen .a-pk1,.a-fridge.is-frozen .a-pk2,.a-fridge.is-frozen .a-pk4{transform:var(--to);transition-delay:var(--in);
  filter:saturate(.55) brightness(1.08) drop-shadow(0 0 1.2px rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(20,20,20,.18))}
.a-fridge.is-frozen .a-frost{opacity:1;transition:opacity .7s ease .95s}
.a-fridge.is-frozen .a-door{transform:rotateX(-104deg);transition:transform .6s cubic-bezier(.16,1,.3,1) 0s}

/* the two-state switch and the three-way method picker share one pill control */
.a-seg{--n:2;--i:0;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);margin-top:26px;max-width:100%}
.a-seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:999px;background:var(--pink);
  transform:translateX(calc(100% * var(--i)));transition:transform .4s cubic-bezier(.16,1,.3,1)}
.a-seg button{position:relative;z-index:1;border:0;background:none;font:inherit;font-weight:700;font-size:.9rem;letter-spacing:.01em;color:var(--ink);
  padding:12px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .25s}
.a-seg button[aria-checked="true"]{color:var(--ink)}
.a-seg button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.a-seg button:active{transform:scale(.98)}
.a-seg3{--n:3}

/* the big figure: the digit rolls, the unit swaps */
.a-kfig{display:flex;align-items:baseline;gap:.22em;margin-top:30px;font-weight:900;font-size:clamp(4rem,7.4vw,6rem);letter-spacing:-.045em;line-height:1}
.a-dg{display:inline-block;height:1.1em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.a-dgs{display:flex;flex-direction:column;transform:translateY(calc(var(--d,5) * -1.1em));transition:transform 1.1s cubic-bezier(.16,1,.3,1) .35s}
.a-dgs span{height:1.1em;line-height:1.1em;font-variant-numeric:tabular-nums}
.a-units{display:inline-grid}
.a-units span,.a-klines span{grid-area:1/1;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.a-units span:not(.is-on){opacity:0;transform:translateY(.35em)}
.a-klines{display:grid;margin-top:14px;max-width:34ch;font-size:1.05rem;font-weight:500;color:var(--muted);line-height:1.5}
.a-klines span:not(.is-on){opacity:0;transform:translateY(8px)}
.a-klines b{color:var(--ink);font-weight:700}

/* heat it: two groups (from the fridge, from frozen); each way has a small line drawing and its time as a plain fact */
.a-ways{list-style:none;margin-top:26px}
.a-ways[hidden]{display:none}
.a-way{display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.a-way:last-child{border-bottom:1px solid var(--line)}
.a-ico{display:block;width:72px;height:72px;color:var(--ink);overflow:visible}
.a-ico *{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.a-ico .a-food{stroke:var(--pink)}
.a-ico .a-soft{stroke:rgba(20,20,20,.35)}
.a-ico .a-frost-mark{stroke:rgba(20,20,20,.55);stroke-width:2}
.a-steam path{stroke:rgba(20,20,20,.38);opacity:.55}
.a-bub circle{stroke:var(--pink);opacity:0}
.a-orbit{transform-box:fill-box;transform-origin:center}
.a-hand{transform-box:view-box;transform-origin:44px 20px}
.a-wname{font-weight:700;font-size:.95rem;line-height:1.2;letter-spacing:0}
.a-wfig{margin-top:4px;font-weight:900;font-size:clamp(1.9rem,1.3rem + 1.4vw,2.5rem);letter-spacing:-.04em;line-height:1}
.a-wfig small{font-size:1rem;letter-spacing:0;margin-left:.15em}
.a-wfig-words{font-size:clamp(1.5rem,1.1rem + 1vw,1.9rem);letter-spacing:-.03em;line-height:1.05}
.a-wline{margin-top:8px;color:var(--muted);font-weight:500;line-height:1.45;max-width:36ch}
/* choosing a group: its ways rise in one after another and each drawing moves once (steam, a turn, bubbles, a sweep). Nothing counts. */
.a-ways.is-play .a-way{animation:a-rise .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * 70ms)}
.a-ways.is-play .a-steam path{animation:a-steam 1.1s ease-out 2 both}
.a-ways.is-play .a-steam path:nth-child(2){animation-delay:.35s}
.a-ways.is-play .a-steam path:nth-child(3){animation-delay:.7s}
.a-ways.is-play .a-orbit{animation:a-orbit 1.6s cubic-bezier(.45,0,.55,1) 1 .15s}
.a-ways.is-play .a-bub circle{animation:a-bub 1.2s ease-in 2 .2s}
.a-ways.is-play .a-bub circle:nth-child(2){animation-delay:.6s}
.a-ways.is-play .a-bub circle:nth-child(3){animation-delay:1s}
.a-ways.is-play .a-hand{animation:a-sweep 1.2s cubic-bezier(.16,1,.3,1) .1s 1 both}
@keyframes a-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes a-steam{0%{opacity:0;transform:translateY(4px)}35%{opacity:.8}100%{opacity:0;transform:translateY(-9px)}}
@keyframes a-orbit{0%{transform:translate(8px,0) scale(1,1)}25%{transform:translate(0,2px) scale(.72,1.08)}50%{transform:translate(-8px,0) scale(1,1)}75%{transform:translate(0,-2px) scale(.72,.92)}100%{transform:translate(0,0) scale(1,1)}}
@keyframes a-bub{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-13px)}}
@keyframes a-sweep{from{transform:rotate(-300deg)}to{transform:none}}
.a-then{margin-top:18px;font-weight:500;color:var(--ink);max-width:40ch}
.a-heat[data-g="fridge"] .a-then{display:none}
.a-slow{margin-top:30px;font-weight:700;font-size:1.05rem}

@media (max-width:819px){
  .a-keep{padding:64px 0 72px}
  .a-keep-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"khead" "kbody" "fridge" "heat";grid-template-rows:none}
  .a-fridge{max-width:300px;margin-top:18px}
  .a-kbody .a-seg{margin-top:18px}
  .a-kfig{margin-top:16px;font-size:3.4rem}
  .a-klines{margin-top:8px;font-size:1rem}
  .a-seg{display:grid;width:100%}
  .a-seg button{padding:12px 10px}
  .a-way{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:16px 0}
  .a-ico{width:56px;height:56px}
  .a-heat{margin-top:40px;padding-top:36px}
}

/* ?still and reduced motion: settled states, nothing moves on its own */
.motion-off .a-made *,.motion-off .a-keep *,.motion-off .a-modal,.motion-off .a-modal *,.motion-off .a-modal::backdrop{transition:none!important;animation:none!important}
.motion-off .a-shelf{transform:rotateX(-7deg)!important}
.motion-off .a-tags{transform:none!important}
.motion-off .a-win img{transform:scale(1.2)!important}
@media (prefers-reduced-motion:reduce){
  .a-lift,.a-contact,.a-pk,.a-door,.a-dgs,.a-seg::before,.a-modal,.a-modal::backdrop{transition:none!important}
  .a-frost,.a-units span,.a-klines span{transition-property:opacity!important;transition-delay:0s!important}
}
