/* Theme case studies: the industry interaction "Life-size" (signature type "wrist"). Markup: src/_includes/e2/theme/sig-wrist.njk; behaviour:
   e2-theme-wrist.js. Nothing is brand-specific: the wrapper's inline style carries the theme (--th-from / --th-to / --th-ink / --th-accent from stage,
   --th-f-head / ui / prod from tokens.fonts, --wr-r from tokens.button.radius) and the measured head image (--head-w, --body-px, --body-cx / cy,
   --lug-mm); every colour below derives from those.
   The look: a drawing board on the theme's own stage. Hairlines, square controls (the theme's buttons have no radius), the heading face for the
   sentences, tabular figures for every number. The accent is the ONE filled button; everything else that can be pressed is outlined, and the pressed
   one is outlined in ink.
   Geometry: the script sets --px (CSS pixels per millimetre) on the section; the card, the grid paper, the wrist bar, the strap and the watch head
   are all sized from it with calc(), so a change of scale is one custom property. The head image is drawn at --s = caseMm x px / bodyPx, so its
   case body (not its crown) is exactly caseMm wide. Every control is at least 44 x 44px. Without the script the section shows the finished
   default (165 mm wrist, 38 mm case, leather). */

.th-wristwrap {
  --wr-out: cubic-bezier(.2, .8, .2, 1);
  --wr-muted: color-mix(in srgb, var(--th-ink) 74%, transparent);
  --wr-line: color-mix(in srgb, var(--th-ink) 14%, transparent);
  --wr-line-2: color-mix(in srgb, var(--th-ink) 26%, transparent);
  --wr-paper: color-mix(in srgb, #fff 66%, transparent);
  --wr-brass: #8a6a33;          /* the theme's brass, deepened until a hairline and its figures read on white */
  --wr-rust: #a63b22;           /* the overhang: a UI red, not a brand colour */
  --wr-skin: #e7ddcf;
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-wristwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-wrist) :is(button, input) { font: inherit; color: inherit; }
.th-wrist__stage :focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

/* ---------- The stage ---------- */
.th-wrist { --px: 3.8; }
.th-wrist__stage {
  position: relative; isolation: isolate; border-radius: 28px; padding: clamp(18px, 3.4vw, 48px);
  background: linear-gradient(135deg, var(--th-from), var(--th-to)); color: var(--th-ink);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.4;
  display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px);
}
.th-wrist__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 90% 0%, rgba(255, 255, 255, .55), transparent 65%);
}
.th-wrist__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
.th-wrist__col { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 38px); min-width: 0; }
.th-wrist__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-wrist__h {
  display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--th-ink);
  font: 300 clamp(24px, 2.2vw, 30px)/1.1 var(--th-f-head); letter-spacing: -.01em;
}
.th-wrist__n {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; box-shadow: inset 0 0 0 1px currentColor;
  font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.th-wrist__lab, .th-wrist__flabel { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wr-muted); }

/* ---------- 1 Calibrate: the card ---------- */
.th-wrist__calib { display: flex; align-items: flex-start; min-height: calc(var(--ch, 54) * var(--px) * 1px); max-width: 100%; }
.th-wrist__card {
  --cw: 85.6; --ch: 54;
  position: relative; z-index: 3; flex: none; width: calc(var(--cw) * var(--px) * 1px); height: calc(var(--ch) * var(--px) * 1px); box-sizing: border-box;
  border-radius: calc(3.18 * var(--px) * 1px); border: 2px dashed var(--th-accent);
  background: color-mix(in srgb, var(--th-accent) 7%, transparent); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease;
}
.th-wrist__card.is-drag { background: color-mix(in srgb, var(--th-accent) 12%, transparent); }
.th-wrist__card:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 4px; }
/* the chip a bank card has, at its true size (11.7 x 9.3 mm), 9 mm from the left edge, 17 mm from the top */
.th-wrist__chip {
  position: absolute; left: calc(9 * var(--px) * 1px); top: calc(17 * var(--px) * 1px); width: calc(11.7 * var(--px) * 1px); height: calc(9.3 * var(--px) * 1px);
  border-radius: calc(1.4 * var(--px) * 1px); background: linear-gradient(135deg, color-mix(in srgb, #b8935a 60%, #fff), #b8935a); opacity: .55;
}
.th-wrist__stripe { display: none; }
.th-wrist__cardmm { position: absolute; left: calc(9 * var(--px) * 1px); bottom: calc(5 * var(--px) * 1px); font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--th-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-wrist__grab {
  position: absolute; top: 50%; right: -7px; width: 12px; height: 44px; translate: 0 -50%; border-radius: 6px; background: var(--th-accent);
  box-shadow: 0 0 0 3px var(--th-to);
}
.th-wrist__grab::before, .th-wrist__grab::after { content: ""; position: absolute; top: 14px; bottom: 14px; width: 1px; background: rgba(255, 255, 255, .7); }
.th-wrist__grab::before { left: 4px; }
.th-wrist__grab::after { right: 4px; }
.th-wrist__readrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.th-wrist__scale { margin: 0; font: 500 15px/1.3 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-wrist__steppers { display: flex; gap: 8px; }
.th-wrist__stepper {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--wr-r); cursor: pointer;
  background: var(--wr-paper); box-shadow: inset 0 0 0 1px var(--wr-line-2); transition: box-shadow .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-wrist__stepper:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-wrist__stepper:active { transform: scale(.95); transition-duration: .08s; }

/* ---------- 2 Your wrist ---------- */
.th-wrist__field { display: flex; flex-direction: column; gap: 6px; }
.th-wrist__input {
  display: block; width: 100%; min-width: 0; height: 52px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--wr-r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--wr-line-2); font: 400 20px/1 var(--th-f-ui); color: var(--th-ink); font-variant-numeric: tabular-nums; transition: box-shadow .15s ease;
}
.th-wrist__input::placeholder { color: var(--wr-muted); opacity: 1; }
@media (hover: hover) { .th-wrist__input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-wrist__input:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 2px; }
.th-wrist__norm { min-height: 2.6em; font-size: 12.5px; line-height: 1.3; color: var(--wr-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.th-wrist__norm[data-state="ok"] { color: var(--th-ink); font-weight: 500; }
.th-wrist__note { display: block; font-size: 12.5px; line-height: 1.35; color: var(--wr-muted); }
.th-wrist__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.th-wrist__case {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 64px; margin: 0; padding: 8px 14px; border: 0; border-radius: var(--wr-r); cursor: pointer; text-align: left;
  background: var(--wr-paper); box-shadow: inset 0 0 0 1px var(--wr-line-2); transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-wrist__cmm { font: 400 22px/1 var(--th-f-head); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.th-wrist__cl { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; color: var(--wr-muted); font-variant-numeric: tabular-nums; }
.th-wrist__cl::after { content: " lug to lug"; }
@media (hover: hover) { .th-wrist__case:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-wrist__case:active { transform: scale(.98); transition-duration: .08s; }
.th-wrist__case[aria-pressed="true"], .th-wrist__case[aria-pressed="true"]:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--th-ink); }

/* ---------- The drawing: true scale ---------- */
.th-wrist__col--draw { gap: 16px; }
.th-wrist__draw {
  --case-mm: 38; --l2l-mm: 46; --bar-mm: 54.45; --gap-mm: 4.2; --gap-abs: 4.2;
  --s: calc(var(--case-mm) * var(--px) / var(--body-px));
  position: relative; overflow: clip; width: 100%; height: calc(var(--bar-mm) * var(--px) * 1px + 112px); min-height: 280px; max-height: 760px;
  background-color: #fff;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--th-accent) 11%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--th-accent) 11%, transparent) 1px, transparent 1px);
  background-size: calc(10 * var(--px) * 1px) calc(10 * var(--px) * 1px); background-position: center center;
  box-shadow: inset 0 0 0 1px var(--wr-line);
  transition: height .25s var(--wr-out);
}
/* the wrist: a band across the drawing, as tall as the wrist is wide, running off both sides (it is an arm) */
.th-wrist__bar {
  position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--bar-mm) * var(--px) * 1px); translate: 0 -50%;
  background: var(--wr-skin); box-shadow: 0 -1px 0 var(--wr-line-2), 0 1px 0 var(--wr-line-2);
  transition: height .25s var(--wr-out);
}
/* the strap: lug width wide, over the bar and off the drawing at both ends (it wraps) */
.th-wrist__strap {
  position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--lug-mm) * var(--px) * 1px); translate: -50% 0; background: #5a3a24;
}
.th-wrist__strap::before { content: ""; position: absolute; inset: 0 calc(1.8 * var(--px) * 1px); border-inline: 1px dashed rgba(240, 222, 196, .7); }
[data-strap="rubber"] > .th-wrist__strap { background: linear-gradient(90deg, #121315, #26282b 22%, #1a1b1d 70%, #101112); }
[data-strap="rubber"] > .th-wrist__strap::before { border-inline: 0; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 calc(2.4 * var(--px) * 1px), rgba(255, 255, 255, .06) calc(2.4 * var(--px) * 1px) calc(2.7 * var(--px) * 1px)); }
[data-strap="bracelet"] > .th-wrist__strap { background: linear-gradient(90deg, #8d9397, #d6dadc 18%, #a9afb3 50%, #d0d4d6 82%, #858b8f); }
[data-strap="bracelet"] > .th-wrist__strap::before {
  border-inline: 0; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(5.4 * var(--px) * 1px), rgba(30, 36, 40, .55) calc(5.4 * var(--px) * 1px) calc(5.7 * var(--px) * 1px)),
    linear-gradient(90deg, transparent 34%, rgba(30, 36, 40, .3) 34% 35%, transparent 35% 65%, rgba(30, 36, 40, .3) 65% 66%, transparent 66%);
}
/* where the strap leaves the wrist it goes under: a little dark at the two edges of the bar */
.th-wrist__strap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 14, 20, .38), transparent calc(50% - var(--bar-mm) / 2 * var(--px) * 1px + 10px), transparent calc(50% + var(--bar-mm) / 2 * var(--px) * 1px - 10px), rgba(10, 14, 20, .38));
}
/* the head at true size: its image is 499 x 600 and its case body is --body-px of those; centred on the body, not on the crown */
.th-wrist__head {
  --s: calc(var(--case-mm) * var(--px) / var(--body-px));
  position: absolute; left: 50%; top: 50%; display: block; max-width: none;
  width: calc(var(--s) * var(--head-w) * 1px); height: calc(var(--s) * var(--head-h) * 1px);
  margin-left: calc(var(--s) * var(--body-cx) * -1px); margin-top: calc(var(--s) * var(--body-cy) * -1px);
  filter: drop-shadow(0 calc(1.2 * var(--px) * 1px) calc(1.6 * var(--px) * 1px) rgba(20, 24, 30, .35)); user-select: none; pointer-events: none;
}
/* dimension lines: the lug to lug (brass, right) and the wrist across (ink, left); a bracket in each gap between a lug tip and the wrist's edge */
.th-wrist__dim { position: absolute; top: 50%; width: 0; translate: 0 -50%; border-left: 1px solid; }
.th-wrist__dim::before, .th-wrist__dim::after { content: ""; position: absolute; left: -5px; width: 10px; height: 0; border-top: 1px solid; }
.th-wrist__dim::before { top: 0; }
.th-wrist__dim::after { bottom: 0; }
.th-wrist__dim b {
  position: absolute; left: 8px; top: 50%; translate: 0 -50%; padding: 2px 5px; background: rgba(255, 255, 255, .92); white-space: nowrap;
  font: 500 11px/1.2 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.th-wrist__dim--l2l { left: calc(50% + (var(--case-mm) * .5 + 6.5) * var(--px) * 1px); height: calc(var(--l2l-mm) * var(--px) * 1px); color: var(--wr-brass); transition: height .25s var(--wr-out); }
.th-wrist__dim--wrist { left: calc(50% - (var(--case-mm) * .5 + 6.5) * var(--px) * 1px); height: calc(var(--bar-mm) * var(--px) * 1px); color: var(--th-ink); transition: height .25s var(--wr-out); }
.th-wrist__dim--wrist b { left: auto; right: 8px; }
.th-wrist__gap {
  position: absolute; left: calc(50% - (var(--lug-mm) * .5 + 3.5) * var(--px) * 1px); width: 0; border-left: 2px solid var(--th-accent);
  height: calc(var(--gap-abs) * var(--px) * 1px); transition: height .25s var(--wr-out);
}
.th-wrist__gap--t { top: calc(50% - max(var(--l2l-mm), var(--bar-mm)) * .5 * var(--px) * 1px); }
.th-wrist__gap--b { bottom: calc(50% - max(var(--l2l-mm), var(--bar-mm)) * .5 * var(--px) * 1px); }
.th-wrist__gap b {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 500 10px/1 var(--mono); color: var(--th-accent); background: rgba(255, 255, 255, .9); padding: 1px 3px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.th-wrist__draw[data-state="over"] .th-wrist__gap { border-left-color: var(--wr-rust); }
.th-wrist__draw[data-state="over"] .th-wrist__gap b { color: var(--wr-rust); }
.th-wrist__draw[data-state="over"] .th-wrist__dim--l2l { color: var(--wr-rust); }

/* the verdict: one sentence, in the heading face; its mark says fits / tight / over */
.th-wrist__verd { display: flex; flex-direction: column; gap: 14px; }
.th-wrist__verdict {
  position: relative; margin: 0; padding-left: 34px; min-height: 2.6em; font: 300 clamp(22px, 2.1vw, 28px)/1.22 var(--th-f-head); letter-spacing: -.01em; text-wrap: pretty; font-variant-numeric: lining-nums;
}
.th-wrist__verdict::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; border-radius: 50%; background: var(--th-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.8 3.8 7.2-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.8 3.8 7.2-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  background: var(--th-accent);
}
.th-wrist__verdict[data-state="empty"] { padding-left: 0; color: var(--wr-muted); }
.th-wrist__verdict[data-state="empty"]::before { content: none; }
/* "take the 38 mm" inside an overhanging verdict: a quiet outline button, 44px tall (never the filled fill: the Reserve button is the one) */
.th-wrist__take {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 .15em; padding: 0 14px; border: 0; border-radius: var(--wr-r); cursor: pointer; vertical-align: middle;
  background: transparent; color: var(--th-ink); box-shadow: inset 0 0 0 1px var(--th-ink); font: 500 15px/1 var(--th-f-ui); letter-spacing: 0; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .15s ease;
}
@media (hover: hover) { .th-wrist__take:hover { background: color-mix(in srgb, var(--th-ink) 8%, transparent); } }
.th-wrist__verdict[data-state="tight"]::before { background: var(--wr-brass);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.th-wrist__verdict[data-state="over"]::before { background: var(--wr-rust);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.th-wrist__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--wr-line-2); }
.th-wrist__legend dt { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wr-muted); }
.th-wrist__legend dd { margin: 3px 0 0; font: 500 17px/1.2 var(--th-f-prod); font-variant-numeric: tabular-nums; }

/* ---------- 3 Strap and reserve ---------- */
.th-wrist__step--strap { max-width: 760px; width: 100%; margin-inline: auto; }
.th-wrist__straps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.th-wrist__strapb {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 64px; margin: 0; padding: 8px 12px; border: 0; border-radius: var(--wr-r); cursor: pointer; text-align: left;
  background: var(--wr-paper); box-shadow: inset 0 0 0 1px var(--wr-line-2); transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-wrist__sp { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 48px; overflow: hidden; }
.th-wrist__sp img { display: block; width: 100%; height: 100%; object-fit: contain; }
.th-wrist__sn { align-self: end; font: 400 19px/1.1 var(--th-f-head); }
.th-wrist__sprice { align-self: start; font: 500 13px/1.2 var(--th-f-prod); color: var(--wr-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-wrist__strapb:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-wrist__strapb:active { transform: scale(.98); transition-duration: .08s; }
.th-wrist__strapb[aria-pressed="true"], .th-wrist__strapb[aria-pressed="true"]:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--th-ink); }

/* ---------- The foot: the one filled button, then the rules ---------- */
.th-wrist__foot, .th-wrist__rules { width: min(100%, 540px); margin-inline: auto; }
.th-wrist__foot { display: flex; flex-direction: column; }
.th-wrist__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--wr-r); cursor: pointer;
  background: var(--th-accent); color: #fff; font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-wrist__ctal { text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-wrist__cta:hover { background: color-mix(in srgb, var(--th-accent) 84%, var(--th-ink)); } }
.th-wrist__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-wrist__check { display: none; margin-right: 10px; }
.th-wrist__cta.is-done, .th-wrist__cta.is-done:hover { background: var(--th-ink); }
.th-wrist__cta.is-done .th-wrist__check { display: block; animation: th-wr-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-wr-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-wrist__rules { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.th-wrist__under { margin: 0; font: 500 16px/1.4 var(--th-f-prod); font-variant-numeric: tabular-nums; text-wrap: balance; }
.th-wrist__batch { margin: 0; font-size: 14px; line-height: 1.45; color: var(--th-ink); text-wrap: balance; }
.th-wrist__promise { margin: 0; font-size: 13px; line-height: 1.4; color: var(--wr-muted); }

/* ---------- Narrower ---------- */
@media (max-width: 1099px) {
  .th-wrist__grid { grid-template-columns: minmax(0, 1fr); }
  .th-wrist__col--draw { order: 2; }
}
@media (max-width: 899px) {
  .th-wrist__dim b { display: none; }
}

/* ---------- Phones: the button row sticks to the bottom ---------- */
@media (max-width: 699px) {
  .th-wrist__stage { gap: 20px; padding: 16px 14px 12px; border-radius: 24px; }
  .th-wrist__col { gap: 24px; }
  .th-wrist__h { font-size: 24px; }
  .th-wrist__calib { margin-inline: -10px; }   /* the outline may use the stage's padding too: a phone is only just wider than the card is tall */
  .th-wrist__straps { grid-template-columns: minmax(0, 1fr); }
  .th-wrist__legend dd { font-size: 15px; }
  .th-wrist__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px; border-radius: var(--wr-r);
    background: color-mix(in srgb, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--wr-line), 0 18px 30px -18px color-mix(in srgb, var(--th-ink) 70%, transparent);
  }
  body:has(.vsw) .th-wrist__foot { bottom: 88px; }
  .th-wrist__cta { min-height: 52px; padding: 0 18px; font-size: 13px; letter-spacing: .06em; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row (its bottom offset + 68px + 16px) */
  .th-wrist__stage { --wr-clear: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px); }
  body:has(.vsw) .th-wrist__stage { --wr-clear: calc(88px + 68px + 16px); }
  .th-wrist__stepper, .th-wrist__case, .th-wrist__strapb, .th-wrist__card { scroll-margin-bottom: var(--wr-clear); }
  .th-wrist__input { scroll-margin-bottom: calc(var(--wr-clear) + 56px); }
}
@media (max-width: 359px) {
  .th-wrist__stage { padding-inline: 10px; }
  .th-wrist__case { padding-inline: 10px; }
}

/* ---------- Reduced motion: nothing eases; every state shows at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-wrist *, .th-wrist *::before, .th-wrist *::after { animation: none !important; transition: none !important; }
}