/* =============================================================
   discover.css — Discover / calculator page
   Builds ON TOP of order.css (same tokens, fonts, components).
   Link order.css FIRST, then this file.
   ============================================================= */

/* ---- mode visibility helpers --------------------------------
   body[data-mode="fallback"]  → no calc result yet (default)
   body[data-mode="personal"]  → chartData arrived
   ------------------------------------------------------------- */
[data-when="personal"] { display: none; }
body[data-mode="personal"] [data-when="personal"] { display: revert; }
body[data-mode="personal"] [data-when="fallback"] { display: none; }

/* =============================================================
   S02 · CALCULATOR
   ============================================================= */
.calc { background: var(--sand); padding-block: clamp(40px, 6vw, 80px); }
.calc__head { text-align: center; max-width: 660px; margin: 0 auto clamp(26px, 3.4vw, 44px); }
.calc__kicker {
  font-family: var(--f-hand);
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.16;
  color: var(--brown-ink);
  margin: 0 0 14px;
}
.calc__sub { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--brown); margin: 0; text-wrap: pretty; }

.calc__frame {
  position: relative;
  width: 100%;
  margin: clamp(8px, 1.5vw, 20px) 0 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(105,77,47,0.06), 0 24px 64px rgba(105,77,47,0.10);
}
.calc__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream-2);
}
.calc__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.calc__dot:nth-child(1) { background: var(--terra); opacity: 0.7; }
.calc__dot:nth-child(2) { background: var(--gold-deep); opacity: 0.85; }
.calc__dot:nth-child(3) { background: var(--blush); opacity: 0.7; }
.calc__url {
  margin-inline-start: auto;
  font-family: var(--f-latin);
  font-size: 12px; letter-spacing: 0.08em; color: var(--blush); direction: ltr;
}

/* flash hint when a locked element bounces the user back here */
.calc__flash {
  max-width: 640px; margin: 0 auto clamp(18px, 2.4vw, 26px);
  text-align: center;
  font-family: var(--f-body); font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px); color: var(--brown-ink);
  background: rgba(237,204,148,0.32);
  border: 1px solid var(--gold-deep);
  padding: 12px 18px;
  opacity: 0; transform: translateY(-6px); height: 0; padding-block: 0; border-width: 0; overflow: hidden;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.calc__flash.is-on {
  opacity: 1; transform: none; height: auto; padding-block: 12px; border-width: 1px;
}

/* gentle nudge under the calculator (personal mode) */
.calc__more { text-align: center; margin-top: clamp(26px, 3.4vw, 42px); }
.calc__more-q {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--brown-ink);
  margin: 0 0 18px;
}

/* =============================================================
   POPUP — 5-slide carousel
   mobile: bottom sheet · desktop: centered modal
   ============================================================= */
.pop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
  visibility: hidden; pointer-events: none;
}
@media (min-width: 769px) { .pop { align-items: center; padding: 24px; } }
.pop.is-open { visibility: visible; pointer-events: auto; }

.pop__backdrop {
  position: absolute; inset: 0;
  background: rgba(61,45,28,0.5);
  opacity: 0; transition: opacity var(--med) var(--ease);
  backdrop-filter: blur(2px);
}
.pop.is-open .pop__backdrop { opacity: 1; }

.pop__panel {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 92vh;
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom: 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--slow) var(--ease-out);
  box-shadow: 0 -30px 80px rgba(61,45,28,0.35);
}
@media (min-width: 769px) {
  .pop__panel {
    border-bottom: 1px solid var(--line);
    max-height: 88vh;
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform var(--med) var(--ease-out), opacity var(--med) var(--ease-out);
    box-shadow: 0 50px 120px rgba(61,45,28,0.4);
  }
}
.pop.is-open .pop__panel { transform: none; opacity: 1; }

.pop__grab {
  width: 44px; height: 4px; border-radius: 99px; background: var(--line);
  margin: 12px auto 0; flex: none;
}
@media (min-width: 769px) { .pop__grab { display: none; } }

.pop__close {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3;
  width: 36px; height: 36px; border: 1px solid var(--line); background: var(--cream);
  color: var(--brown); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.pop__close:hover { border-color: var(--brown); color: var(--brown-ink); background: var(--cream-2); }
.pop__close svg { width: 15px; height: 15px; }

/* track / slides */
.pop__viewport { overflow: hidden; flex: 1; }
.pop__track { display: flex; transition: transform var(--med) var(--ease); height: 100%; }
.pop__slide {
  flex: 0 0 100%;
  padding: clamp(34px, 5vw, 52px) clamp(26px, 4vw, 44px) clamp(16px, 2vw, 22px);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.pop__eyebrow {
  font-family: var(--f-body); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 9px;
}
.pop__eyebrow::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--accent); flex: none; }
.pop__title {
  font-family: var(--f-display);
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--brown-ink);
  margin: 0 0 clamp(16px, 2vw, 22px);
  text-wrap: balance;
}
.pop__text { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.78; color: var(--brown); margin: 0; text-wrap: pretty; }
.pop__text + .pop__text { margin-top: 14px; }
.pop__key { color: var(--accent-deep); font-weight: 700; font-style: normal; }
.pop__summary {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.35;
  color: var(--brown-ink);
  text-align: center;
}

/* intro slide specifics */
.pop__slide--intro { justify-content: center; text-align: center; }
.pop__slide--intro .pop__eyebrow {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  display: block;
  text-align: center;
  margin: 0 0 20px;
}
.pop__slide--intro .pop__eyebrow::before { display: none; }
.pop__intro-swipe {
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--f-hand);
  font-size: clamp(19px, 1.9vw, 24px);
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 12px; align-self: center;
}
.pop__intro-swipe svg { width: 30px; height: 16px; }
.pop__intro-swipe svg path { stroke: var(--accent-deep); }

/* category slide cta */
.pop__cta {
  margin-top: auto; padding-top: clamp(22px, 3vw, 30px);
}
.pop__cta .btn { width: 100%; justify-content: center; }

/* persistent reassurance line + footer controls */
.pop__note {
  flex: none;
  text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--blush);
  padding: 11px clamp(20px, 3vw, 30px) 0;
}
.pop__foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(20px, 3vw, 30px) 14px;
  background: var(--cream-2);
  border-top: 1px solid var(--line-soft);
  margin-top: 11px;
}
.pop__dots { display: inline-flex; gap: 8px; }
.pop__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background var(--fast), transform var(--fast); }
.pop__dot.is-active { background: var(--accent); transform: scale(1.25); }
.pop__hint { font-size: 12px; color: var(--blush); line-height: 1.4; text-align: start; }
.pop__nav { display: inline-flex; gap: 8px; }
.pop__arrow {
  width: 38px; height: 38px; border: 1px solid var(--line); background: var(--cream);
  color: var(--brown); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--fast), background var(--fast), opacity var(--fast);
}
.pop__arrow:hover { border-color: var(--brown); background: var(--cream-2); }
.pop__arrow:disabled { opacity: 0.32; cursor: default; }
.pop__arrow svg { width: 13px; height: 13px; }

/* =============================================================
   S03 · FOUR THINGS (accordion)
   ============================================================= */
.things { background: var(--cream); }
.things__head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 4.4vw, 56px); }
.things__head .h2 { margin-bottom: 16px; overflow-wrap: normal; word-break: keep-all; }
.things__head .lede + .lede { margin-top: 0; }
/* fallback: "go up and enter your details" CTA — same as the hero CTA, arrow points up */
.things__unlock { margin-top: clamp(20px, 2.6vw, 30px); }

.things__list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.thing { border-bottom: 1px solid var(--line); }
.thing__btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: start;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2vw, 22px);
  padding: clamp(22px, 2.8vw, 32px) 4px;
  transition: padding-inline-start var(--fast) var(--ease);
}
.thing__btn:hover { padding-inline-start: 10px; }
.thing__cat {
  font-family: var(--f-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-deep);
  writing-mode: horizontal-tb;
  min-width: 64px;
}
.thing__title {
  font-family: var(--f-display);
  font-size: clamp(19px, 2.2vw, 29px);
  line-height: 1.18;
  color: var(--brown-ink);
  text-wrap: balance;
}
.thing__icon {
  flex: none; width: 38px; height: 38px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--accent); position: relative;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.thing__btn:hover .thing__icon { border-color: var(--accent); }
.thing__icon svg { width: 16px; height: 16px; }
.thing__icon .thing__plus-v { transition: transform var(--med) var(--ease); trans-origin: center; }
.thing.is-open .thing__icon { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.thing.is-open .thing__plus-v { transform: scaleY(0); }

.thing__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med) var(--ease); }
.thing.is-open .thing__panel { grid-template-rows: 1fr; }
.thing__panel-inner { overflow: hidden; }
.thing__body {
  padding: 0 4px clamp(28px, 3.4vw, 38px) clamp(78px, 9vw, 86px);
}
.thing__full { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.85; color: var(--brown); margin: 0; text-wrap: pretty; }
.thing__expl {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.6; color: var(--blush);
}
.thing__expl::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; transform: rotate(45deg); border: 1px solid var(--gold-deep); }

/* locked (fallback) state */
.thing--locked .thing__btn { cursor: pointer; }
.thing--locked .thing__title { color: var(--blush); }
.thing--locked .thing__icon { color: var(--blush); border-color: var(--line); }
.thing__lock { display: none; }
.thing--locked .thing__lock { display: block; }
.thing--locked .thing__plus { display: none; }

/* gift teaser inside the type accordion — hidden when locked */
.thing--locked .thing__type-gift { display: none; }
.thing__type-gift {
  margin-top: clamp(22px, 2.8vw, 30px);
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2vw, 24px);
  background: linear-gradient(160deg, #FFFBF2 0%, #F5ECD9 100%);
  border: 1px solid var(--gold-deep);
  text-align: center;
}
.thing__type-gift-pre {
  font-family: var(--f-hand);
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--accent-deep);
  margin: 0 0 6px;
}
.thing__type-gift-title {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.28;
  color: var(--brown-ink);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.thing__type-gift .btn { width: 100%; justify-content: center; }

/* outro under the four things */
.things__outro { max-width: 680px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.things__aside {
  font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; color: var(--brown);
  margin: 0 0 clamp(30px, 4vw, 46px); text-wrap: pretty;
}
.things__aside b { color: var(--brown-ink); font-weight: 600; }
.things__gift {
  position: relative;
  background: linear-gradient(180deg, #FFFBF2 0%, #FBF3E2 100%);
  border: 1px solid var(--gold-deep);
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 40px);
}
.things__gift-eyebrow {
  font-family: var(--f-hand); font-size: clamp(20px, 2.1vw, 27px);
  color: var(--accent-deep); margin: 0 0 12px;
}
.things__gift-title {
  font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 32px);
  color: var(--brown-ink); margin: 0 0 14px; line-height: 1.15;
}
.things__gift-body { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: var(--brown); margin: 0; }
.things__gift-cue {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); cursor: pointer; text-decoration: none;
}
.things__gift-cue svg { width: 14px; height: 16px; animation: cueDrop 1.8s var(--ease) infinite; }
@keyframes cueDrop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .things__gift-cue svg { animation: none; } }

/* =============================================================
   S04 · FLIPBOOK (reuses .flip / .phone from order.css)
   ============================================================= */
.flip__head .flip__lead-hand {
  font-family: var(--f-hand);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--gold);
  margin: 0 auto;
  max-width: 22ch;
}
/* CTA banner embedded at the BOTTOM of pages 9 / 11 / 12 */
.flip__cta {
  position: absolute; left: 50%; bottom: 4.5%;
  transform: translateX(-50%);
  width: 88%;
  z-index: 3; cursor: pointer; border: 0; background: transparent; padding: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.28));
  transition: transform var(--fast) var(--ease);
}
.flip__cta img { width: 100%; height: auto; display: block; }
.flip__cta:hover { transform: translateX(-50%) translateY(-3px); }
/* page-9 CTA is a taller panel — seat it a touch lower & wider */
.flip__cta--panel { width: 92%; bottom: 5.5%; }

/* fallback note above the generic flipbook */
.flip__fallback-note {
  max-width: 46ch; margin: 0 auto clamp(14px, 1.8vw, 20px); text-align: center;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--gold);
}
.flip__fallback-flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 4px;
  font-family: var(--f-hand);
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.2;
  color: var(--gold);
  background: rgba(237,204,148,0.12);
  border: 1px solid rgba(237,204,148,0.42);
  border-radius: 999px;
  padding: 7px 20px 9px;
}
.flip__fallback-flag::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(237,204,148,0.18);
}
.flip__fallback-cta { margin: clamp(18px, 2.4vw, 28px) 0 clamp(26px, 3.4vw, 38px); display: flex; justify-content: center; }
/* mobile: order.css turns .flip .wrap into a flex column and reorders items.
   Keep the fallback CTA ABOVE the phone (right under the "general preview" flag),
   matching the order page's sticky-CTA placement, with clear spacing. */
@media (max-width: 820px) {
  .flip__fallback-cta { order: 1; position: relative; z-index: 2; margin: clamp(18px, 4vw, 26px) 0 clamp(26px, 6vw, 38px); }
}

/* =============================================================
   S05 · FULL BOOK pitch
   ============================================================= */
.fullbook { background: var(--sand); }
.fullbook__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.fullbook__head.h2 { margin: 14px auto clamp(22px, 2.8vw, 32px); overflow-wrap: normal; word-break: keep-all; }
.fullbook__body { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.75; color: var(--brown); margin: 0 auto clamp(16px, 1.8vw, 24px); max-width: 58ch; text-wrap: pretty; }
#bookSwipeLabel { font-size: clamp(13px, 1.1vw, 15px); }
.fullbook__body b { color: var(--brown-ink); font-weight: 600; }
.fullbook__body em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.fullbook__cta { display: flex; justify-content: center; }
/* final swipe-to-continue slider (mirrors the order page's swipe) */
.swipe--book {
  width: min(560px, 100%);
  height: auto; min-height: 66px;
  margin-inline: auto;
  background: var(--cream);
}
/* keep the (long) label fully visible: in-flow above the fill/thumb, padded
   clear of the thumb on the right (inline-start in RTL), wraps on narrow screens. */
.swipe--book .swipe__fill { z-index: 0; }
.swipe--book .swipe__thumb { z-index: 1; }
.swipe--book .swipe__label {
  position: relative; z-index: 2;
  padding: 14px 86px 14px 18px;
  white-space: normal; line-height: 1.3;
  font-size: clamp(13px, 1.5vw, 16px);
}

/* =============================================================
   FOOTER
   ============================================================= */
.foot { background: var(--cream); border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 60px) var(--gutter); }
.foot__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
}
.foot__logo img { height: 30px; width: auto; }
.foot__nav { display: inline-flex; gap: 12px; justify-content: center; }
.foot__nav a {
  width: 36px; height: 36px; border: 1px solid var(--line); color: var(--brown);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.foot__nav a:hover { border-color: var(--brown); color: var(--brown-ink); background: var(--cream-2); }
.foot__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; }
.foot__copy { font-size: 12px; letter-spacing: 0.03em; color: var(--blush); }
.foot__legal a { font-size: 12px; color: var(--brown); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color var(--fast), border-color var(--fast); }
.foot__legal a:hover { color: var(--brown-ink); border-color: var(--brown); }
@media (max-width: 720px) {
  .foot__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__legal { align-items: center; text-align: center; }
}

/* =============================================================
   DEV test panel — lets Michal simulate a chart result without the widget.
   Hidden by default; toggled with the small tab, or ?dev=1.
   ============================================================= */
.devkit { position: fixed; inset-inline-end: 0; bottom: 0; z-index: 120; font-family: var(--f-body); direction: rtl; }
.devkit__tab {
  position: absolute; bottom: 12px; inset-inline-end: 12px;
  background: var(--brown-ink); color: var(--gold); border: 0; cursor: pointer;
  font-size: 11px; letter-spacing: 0.1em; padding: 7px 12px; opacity: 0.55;
  transition: opacity var(--fast);
}
.devkit__tab:hover { opacity: 1; }
.devkit__panel {
  position: absolute; bottom: 0; inset-inline-end: 0;
  width: min(320px, 92vw); background: var(--cream); border: 1px solid var(--brown);
  padding: 16px; box-shadow: 0 20px 60px rgba(61,45,28,0.4);
  display: none; flex-direction: column; gap: 10px;
}
.devkit.is-open .devkit__panel { display: flex; }
.devkit.is-open .devkit__tab { display: none; }
.devkit__row { display: flex; flex-direction: column; gap: 4px; }
.devkit__row label { font-size: 11px; color: var(--blush); letter-spacing: 0.04em; }
.devkit__row select { font-family: var(--f-body); font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); background: var(--cream-2); color: var(--brown-ink); }
.devkit__actions { display: flex; gap: 8px; margin-top: 4px; }
.devkit__actions .btn { flex: 1; padding: 11px 14px; font-size: 13px; }
.devkit__title { font-family: var(--f-display); font-size: 17px; color: var(--brown-ink); margin: 0; }
.devkit__x { position: absolute; top: 10px; inset-inline-end: 10px; border: 0; background: none; cursor: pointer; color: var(--blush); font-size: 16px; }

/* =============================================
   GIFT GATE — inline form inside things__gift
   ============================================= */
.things__gift-field {
  display: flex; flex-direction: row; gap: 8px;
  text-align: start; margin-top: 6px;
}
/* min-width:0 — בלי זה inputs לא מתכווצים מתחת לרוחב ברירת המחדל שלהם וגולשים מהשורה */
.things__gift-input--name  { flex: 0 1 38%; min-width: 0; }
.things__gift-input--email { flex: 1 1 62%; min-width: 0; }
@media (max-width: 520px) {
  .things__gift-field { flex-direction: column; gap: 6px; }
  .things__gift-input--name,
  .things__gift-input--email { flex: 1 1 auto; }
}
.things__gift-label {
  font-family: var(--f-body); font-size: 13px;
  color: var(--brown); font-weight: 500;
}
.things__gift-input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--cream); font-family: var(--f-body);
  font-size: 15px; color: var(--brown-ink);
  transition: border-color 0.2s; box-sizing: border-box;
}
.things__gift-input:focus { outline: none; border-color: var(--blush); }
.things__gift-input.is-error { border-color: #c0392b; }
.things__gift-consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  text-align: start; cursor: pointer; margin-top: 4px;
}
.things__gift-checkbox { flex-shrink: 0; margin-top: 3px; accent-color: var(--terra); }
.things__gift-consent-text {
  font-family: var(--f-body); font-size: 13px;
  line-height: 1.6; color: var(--brown);
}
.things__gift-error {
  font-family: var(--f-body); font-size: 13px;
  color: #c0392b; margin: 0; text-align: start;
}
.things__gift-status {
  font-family: var(--f-body); font-size: 15px;
  color: var(--sage-deep); font-weight: 600; margin: 0;
}
.things__gift-skip {
  margin: 0; font-family: var(--f-body); font-size: 13px;
  color: var(--blush);
}
.things__gift-skip a { color: inherit; text-decoration: underline; }
.things__gift-skip a:hover { color: var(--brown); }