/* ==========================================================================
   After the film: 95 kilos, your week, inside the book, the offer, questions,
   the close, and the checkout sheet. No labels over headings, no badges.
   ========================================================================== */

section { position: relative; }
.story, .week, .inside, .offer, .faq, .closing { padding-block: clamp(100px, 12vw, 180px); }

/* ---------- 95 ---------- */
.story { overflow: hidden; }
.story::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 22% 50%, rgba(230, 165, 59, .12), transparent 70%); }
.story__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.story__num { order: 2; margin: 0; display: flex; align-items: flex-end; justify-content: center; gap: .08em; line-height: .78; }
.story__odo { display: inline-flex; direction: ltr; font-family: var(--num); font-weight: 700; font-size: clamp(170px, 27vw, 440px); letter-spacing: -.04em; color: var(--gold); }
.story__unit { font-weight: 900; font-size: clamp(34px, 4.4vw, 72px); color: var(--cream); padding-bottom: .35em; }
.story__title { margin: 0; font-weight: 900; font-size: clamp(34px, 3.9vw, 66px); line-height: 1.08; text-wrap: balance; }
.story__punch { margin: 22px 0 0; font-weight: 900; font-size: clamp(30px, 3.2vw, 54px); line-height: 1.1; color: var(--gold); }
.story__who { display: flex; flex-wrap: wrap; gap: 18px 56px; margin: 44px 0 0; }
.story__who div { display: grid; gap: 2px; }
.story__who dt { font-size: 18px; color: var(--cream-2); }
.story__who dd { margin: 0; font-weight: 800; font-size: 26px; }
.story__who bdi { font-family: var(--num); font-weight: 700; font-size: 1.25em; color: var(--gold); }
.story__note { margin-top: 36px; font-size: 13px; line-height: 1.6; color: var(--cream-3); max-inline-size: 46em; }
@media (max-width: 860px) {
  .story__grid { grid-template-columns: minmax(0, 1fr); }
  .story__num { order: 0; justify-content: flex-start; }
}

/* ---------- your week ---------- */
.week__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.week__rows { display: grid; gap: 14px; margin-top: 44px; }
.week__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 10px 0; }
.week__row img { inline-size: 64px; block-size: 64px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); transition: transform .8s var(--ease); }
.week__row:hover img { transform: rotate(-24deg); }
.week__name { font-weight: 800; font-size: clamp(19px, 1.7vw, 25px); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { inline-size: 48px; block-size: 48px; border: 0; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--cream); font-family: var(--num); font-size: 22px; cursor: pointer; transition: box-shadow .2s, color .2s, transform .2s; }
.stepper button:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.stepper button:active { transform: scale(.94); }
.stepper output { min-inline-size: 44px; text-align: center; font-family: var(--num); font-weight: 700; font-size: 28px; }
.week__sum { display: grid; gap: 6px; justify-items: start; }
.week__line { margin: 0; font-size: clamp(18px, 1.5vw, 23px); color: var(--cream-2); }
.week__line b { font-family: var(--num); font-weight: 700; color: var(--cream); }
.week__big { margin: 0; line-height: .9; }
.week__big > span { display: inline-flex; direction: ltr; font-family: var(--num); font-weight: 700; font-size: clamp(88px, 10vw, 170px); letter-spacing: -.03em; color: var(--gold); }
.week__note { margin-top: 18px; font-size: 13px; color: var(--cream-3); }
@media (max-width: 900px) { .week__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inside the book ----------
   A real hardcover: gold cloth boards that overhang the pages, charcoal
   endpapers, and paper pages that fold from the corner as they turn (the fold
   is drawn by flipbook.js). On phones it is the same book, scaled down whole;
   "read closely" flies the camera onto one page. */
/* a page mid-fold is rotated far past the book's edge; clip, or a phone widens the page to fit it */
.inside { overflow-x: clip; }
.leaf-book { margin-top: clamp(56px, 7vw, 96px); }
.leaf-book__stage { position: relative; }
.spread-fit { perspective: 2600px; perspective-origin: 50% 40%; }
.spread {
  --paper: #F3EBDD; --paper-ink: #1E1A16; --paper-2: #6B6155; --paper-gold: #9A6718;
  --end: #1C1916; --turn-in: #B97C22; --ov: 1.1cqi; --open: 0;
  position: relative; inline-size: min(1060px, 100%); aspect-ratio: 3 / 2; margin-inline: auto;
  container-type: inline-size; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 10px;
  translate: calc(25% * (1 - var(--open))) 0; /* a closed book sits centred on its cover */
}
/* the book's shadow on the table follows its footprint as the cover opens */
.spread__cast {
  position: absolute; z-index: 0; top: 1.5%; bottom: -1%; left: 1%; right: calc(1% + 50% * (1 - var(--open)));
  box-shadow: 0 3.4cqi 6cqi rgba(0, 0, 0, .6), 0 .8cqi 1.6cqi rgba(0, 0, 0, .35);
}
/* the boards' insides: charcoal, a hairline of the gold cloth turned in */
.spread__board, .board-in { background-color: var(--end); box-shadow: inset 0 0 0 calc(var(--ov) * .42) var(--turn-in); }
.spread__board { position: absolute; z-index: 1; top: calc(-1 * var(--ov)); left: calc(-1 * var(--ov)); inline-size: calc(50% + var(--ov)); block-size: calc(100% + 2 * var(--ov)); }
/* page edges: the block on each side is as thick as the pages still on it */
.spread__edge { position: absolute; top: 0; inline-size: 50%; block-size: 100%; background: var(--paper); visibility: hidden; }
.spread__edge--l { left: 0; z-index: 2; }
.spread__edge--r { left: 50%; z-index: 3; }

.page, .leaf__face { position: absolute; top: 0; inline-size: 50%; block-size: 100%; background: var(--paper); color: var(--paper-ink); overflow: hidden; }
.page--left { left: 0; z-index: 3; }
.leaf { display: contents; }
.leaf__front { left: 0; }
.leaf__back { left: 50%; visibility: hidden; }
.leaf.is-turned .leaf__front { visibility: hidden; }
.leaf.is-turned .leaf__back, .leaf.is-turning .leaf__face { visibility: visible; }
/* the gutter: every page darkens into the spine */
.page--left::after, .leaf__front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 88%, rgba(0, 0, 0, .18)); }
.leaf__back::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, transparent 88%, rgba(0, 0, 0, .16)); }
.fold-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
@media (pointer: fine) { .spread { cursor: pointer; } }
/* after the cover opens itself, the arrow that turns the page pulses twice */
.icon-btn.is-cue { animation: cue 1.4s cubic-bezier(.4, 0, .2, 1) 2; }
@keyframes cue {
  0% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 0 rgba(227, 162, 59, .6); color: var(--gold); }
  70% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 18px rgba(227, 162, 59, 0); color: var(--gold); }
  100% { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 0 rgba(227, 162, 59, 0); }
}

/* the cover: one stiff board, hinged at the spine, turning in 3D */
.leaf--cover {
  display: block; position: absolute; z-index: 40; top: calc(-1 * var(--ov)); left: calc(-1 * var(--ov));
  inline-size: calc(50% + var(--ov)); block-size: calc(100% + 2 * var(--ov));
  transform-origin: right center; transform-style: preserve-3d; transform: perspective(2400px) rotateY(calc(var(--open) * -180deg));
  cursor: pointer;
}
.leaf--cover.is-turned { z-index: 2; }
.leaf--cover.is-turning { z-index: 45; }
.leaf--cover .leaf__face { left: 0; inline-size: 100%; visibility: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.leaf--cover .leaf__back { transform: rotateY(180deg); }
/* which side of the board faces up is decided in script too: WebKit does not
   always honour backface-visibility here, and shows the inside through the cover */
.leaf.leaf--cover:not(.is-past) .leaf__back, .leaf.leaf--cover.is-past .leaf__front { visibility: hidden; }
.leaf--cover .leaf__face::after { background: #000; opacity: var(--lit, 0); }

.cover {
  container-type: inline-size; color: #1A1612;
  background:
    radial-gradient(120% 90% at 40% 35%, rgba(255, 240, 200, .12), rgba(60, 30, 0, .24)),
    repeating-linear-gradient(90deg, rgba(90, 50, 0, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(90, 50, 0, .05) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #EFB452, #E3A23B 50%, #C8882A);
}
/* the hinge groove, where the board bends at the spine */
.cover::before { content: ""; position: absolute; top: 0; bottom: 0; right: 6%; inline-size: .5cqi; background: rgba(70, 40, 5, .3); box-shadow: .2cqi 0 0 rgba(255, 235, 190, .3); }
.cover__win { position: absolute; left: 8.5%; top: 6.8%; inline-size: 79%; block-size: 43%; overflow: hidden; background: #2A2019; box-shadow: 0 0 0 .4cqi rgba(26, 22, 18, .9); }
.cover__win video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover__win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .18), transparent 8% 90%, rgba(0, 0, 0, .22)); }
.cover p { position: absolute; right: 12.5%; margin: 0; white-space: nowrap; line-height: 1; }
/* the logo in charcoal on the cloth, its periods in cream; the א. mark where the plate mark was */
.cover__logo { position: absolute; right: 12.5%; top: 55%; inline-size: 56%; block-size: auto; }
.cover__kind { top: 83.6%; font-weight: 500; font-size: 3cqi; color: rgba(26, 22, 18, .8); }
.cover__kind::before { content: ""; position: absolute; right: 0; top: -2.6cqi; inline-size: 79cqi; block-size: 2px; background: rgba(26, 22, 18, .28); }
.cover__by { top: 88.6%; font-weight: 700; font-size: 2.85cqi; color: rgba(26, 22, 18, .72); }
.cover__mark { position: absolute; left: 9.5%; top: calc(87.6% - 2.9cqi); inline-size: 4.8cqi; block-size: auto; }

/* the inside of the cover: the first recipe, pasted to the board (no contents page, per Ben) */
.leaf--cover .board-in { background-color: var(--end); }
.board-page { position: absolute; left: 0; right: var(--ov); top: var(--ov); bottom: var(--ov); background: var(--paper); color: var(--paper-ink); }
.board-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, transparent 88%, rgba(0, 0, 0, .16)); }

.page__in { position: relative; block-size: 100%; padding: 9% 10%; display: flex; flex-direction: column; }
.page__big { margin: 0; font-weight: 900; font-size: clamp(30px, 3.6vw, 54px); line-height: .98; }
.page__head { margin: 0 0 18px; font-weight: 900; font-size: clamp(20px, 2vw, 30px); }
.page__more ul { margin: 0; padding: 0; list-style: none; display: grid; }
.page__more li { font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); padding: 12px 0; border-bottom: 1px solid rgba(30, 26, 22, .12); }
.page__end { justify-content: center; align-items: flex-start; gap: 26px; }
.page__photo { padding: 0; }
.page__photo img, .page__photo video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.recipe { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.5; }
.recipe__title { margin: 0 0 6px; font-weight: 900; font-size: clamp(20px, 2.2vw, 31px); line-height: 1.05; }
.recipe__meta { margin: 0 0 4%; color: var(--paper-2); }
.recipe__meta b { font-family: var(--num); font-weight: 600; color: var(--paper-ink); }
.recipe__h { margin: 3% 0 1%; font-weight: 800; color: var(--paper-gold); }
.recipe__list, .recipe__steps { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 1px; }
.recipe__steps { gap: 4px; }
.leaf-book__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
.leaf-book__count { font-family: var(--num); font-weight: 600; font-size: 16px; color: var(--cream-2); min-inline-size: 4em; text-align: center; direction: ltr; }
.read-btn { display: none; }

/* phones: the whole spread, drawn at a fixed size and scaled to fit; reading
   mode scales it up until one page fills the width */
.leaf-book.is-phone .leaf-book__stage { block-size: var(--stage-h, 300px); overflow: hidden; margin-inline: -8px; transition: block-size .85s cubic-bezier(.65, .05, .25, 1); }
.leaf-book.is-phone .spread-fit { position: absolute; top: 0; left: 0; inline-size: 760px; transform-origin: 0 0; transition: transform .85s cubic-bezier(.65, .05, .25, 1); }
.leaf-book.is-phone .spread { inline-size: 760px; margin: 0; }
.leaf-book.is-phone.is-snap .leaf-book__stage, .leaf-book.is-phone.is-snap .spread-fit { transition: none; }
.leaf-book.is-phone .page__in { padding: 8% 8.5%; }
.leaf-book.is-phone .recipe { font-size: 13.5px; line-height: 1.42; }
.leaf-book.is-phone .recipe__title { font-size: 24px; }
.leaf-book.is-phone .page__big { font-size: 36px; }
.leaf-book.is-phone .page__head { font-size: 24px; }
.leaf-book.is-phone .page__more li { font-size: 17px; padding: 10px 0; }
.leaf-book.is-phone .leaf-book__nav { margin-top: 18px; }
.leaf-book.is-phone .read-btn {
  display: flex; align-items: center; gap: 8px; margin: 6px auto 0; min-block-size: 44px; padding: 0 16px;
  border: 0; background: none; color: var(--cream-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.read-btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.read-btn[aria-pressed="true"] { color: var(--gold); }
/* reading closely wants the whole screen: the bars step aside */
.topbar { transition: background-color .5s, backdrop-filter .5s, box-shadow .5s, translate .5s cubic-bezier(.65, .05, .25, 1); }
html.book-reading .topbar { translate: 0 -100%; }
/* the logo docks in the bar once the bar turns solid: never over the film, which opens on the logo itself */
.topbar__logo { margin-inline-end: auto; display: inline-flex; align-items: center; min-block-size: 44px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.topbar__logo img { display: block; block-size: 24px; inline-size: auto; }
.topbar.is-solid .topbar__logo { opacity: 1; visibility: visible; }
html.book-reading .buybar.is-on { transform: translateY(calc(100% + 24px)); }

/* ---------- voices (hidden until real) ---------- */
.voices { padding-block: clamp(96px, 12vw, 176px); }
.voices__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px 56px; margin-top: 48px; }
.voices blockquote { margin: 0; }
.voices blockquote p { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }
.voices cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--cream-3); }

/* ---------- the offer ---------- */
.offer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 25% 50%, rgba(230, 165, 59, .10), transparent 70%); }
.offer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.offer__card { position: relative; max-inline-size: 640px; }
.offer__title { margin: 0; font-weight: 900; font-size: clamp(40px, 4.8vw, 80px); line-height: 1; }
.price { margin: 26px 0 8px; display: flex; align-items: flex-end; gap: 18px; line-height: .85; }
.price bdi { display: inline-flex; align-items: flex-start; font-family: var(--num); font-weight: 700; color: var(--gold); }
.price__n { display: inline-flex; direction: ltr; font-size: clamp(110px, 12vw, 190px); line-height: 1; letter-spacing: -.03em; }
.price__cur { font-size: clamp(38px, 4.2vw, 64px); margin-top: .2em; margin-inline-end: .06em; }
.price__was { font-family: var(--num); font-weight: 600; font-size: clamp(30px, 3vw, 46px); color: var(--cream-3); text-decoration-thickness: 3px; padding-bottom: .5em; }
.price__note { margin: 0 0 26px; font-size: 17px; color: var(--cream-2); }
.price__note bdi { font-family: var(--num); font-weight: 600; }
.offer__what { margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: var(--cream-2); max-inline-size: 36em; }
.offer__pay { margin: 10px 0 0; font-size: 14px; color: var(--cream-3); }
.offer__book { inline-size: min(440px, 100%); block-size: auto; margin-inline: auto; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .6)); }
@media (max-width: 900px) { .offer__grid { grid-template-columns: minmax(0, 1fr); } .offer__book { inline-size: 60%; order: -1; } }

/* ---------- FAQ ---------- */
.faq__list { margin-top: 48px; border-top: 1px solid var(--line); max-inline-size: 900px; }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font-weight: 800; font-size: clamp(19px, 1.8vw, 25px); transition: color .25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--num); font-weight: 600; font-size: 28px; line-height: 1; color: var(--gold); transition: transform .45s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq details p { margin: 0; padding-bottom: 28px; max-inline-size: 62ch; font-size: 18px; color: var(--cream-2); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- closing ---------- */
.closing { overflow: hidden; }
.closing__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.closing__book { inline-size: min(420px, 100%); margin-inline: auto; perspective: 900px; }
.closing__book img { inline-size: 100%; block-size: auto; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .6)); transform-style: preserve-3d; }
.closing__title { margin: 0 0 30px; font-weight: 900; font-size: clamp(44px, 5.6vw, 100px); line-height: .95; }
.closing__line { margin-top: 18px; font-size: 16px; color: var(--cream-3); }
@media (max-width: 820px) { .closing__grid { grid-template-columns: minmax(0, 1fr); } .closing__book { inline-size: 58%; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 calc(120px + env(safe-area-inset-bottom, 0px)); }
.footer__grid { display: grid; gap: 16px; justify-items: start; }
.footer__name { margin: 0; display: grid; gap: 12px; justify-items: start; }
.footer__logo { display: block; inline-size: 190px; block-size: auto; }
.footer__name span { font-weight: 700; font-size: 15px; color: var(--cream-2); }
.footer__legal { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cream-3); max-inline-size: 60em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a { font-size: 14px; color: var(--cream-2); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--gold); }

/* ---------- the phone's buy bar ---------- */
.buybar {
  position: fixed; z-index: 70; inset-inline: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(22, 20, 18, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%); transition: transform .5s var(--ease);
}
.buybar.is-on { transform: none; }
.buybar .btn { min-block-size: 52px; }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- checkout sheet ---------- */
.sheet { inline-size: min(500px, 100%); max-inline-size: 100%; max-block-size: 100dvh; margin: auto; padding: 0; border: 0; background: var(--ink-2); color: var(--cream); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line-2); }
.sheet::backdrop { background: rgba(10, 9, 8, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet[open] { animation: sheet-in .55s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) } }
.sheet__form { position: relative; display: grid; gap: 16px; padding: 34px 30px 28px; }
.sheet__close { position: absolute; top: 12px; inset-inline-end: 12px; inline-size: 44px; block-size: 44px; border: 0; background: transparent; color: var(--cream-2); font-size: 28px; cursor: pointer; }
.sheet__title { margin: 0; font-weight: 900; font-size: 30px; line-height: 1.1; }
.sheet__sum { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-block: 1px solid var(--line); font-size: 15px; color: var(--cream-2); }
.sheet__price { display: flex; align-items: baseline; gap: 10px; }
.sheet__price b { font-family: var(--num); font-weight: 700; font-size: 26px; color: var(--gold); }
.sheet__price s { font-family: var(--num); font-weight: 600; font-size: 16px; color: var(--cream-3); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--cream-2); }
.field input { block-size: 54px; padding: 0 14px; border: 0; border-radius: 0; background: #110F0D; font-size: 17px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.field input[dir="ltr"] { text-align: left; }
.field input::placeholder { color: #6F6556; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.field.is-bad input { box-shadow: inset 0 0 0 1.5px var(--paprika); }
.field em { font-style: normal; font-size: 13px; color: #F07A5F; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--cream-2); cursor: pointer; min-block-size: 44px; padding-top: 4px; }
.check input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; accent-color: var(--gold); flex: 0 0 auto; }
.sheet__disclaimer { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cream-3); }
.sheet__legal { margin: 0; font-size: 13px; color: var(--cream-3); text-align: center; }
.sheet__legal a { color: var(--cream-2); }
.sheet__error { margin: 0; font-size: 14px; color: #F07A5F; text-align: center; }
.sheet__error:empty { display: none; }
.btn.is-busy { pointer-events: none; opacity: .75; }
@media (max-width: 560px) {
  .sheet { inline-size: 100%; margin: auto 0 0; max-block-size: 94dvh; overflow: auto; }
  .sheet[open] { animation: sheet-up .55s var(--ease); }
  @keyframes sheet-up { from { transform: translateY(100%) } }
  .sheet__form { padding: 28px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn--gold::after { transition: none; }
}