/* ==========================================================================================
   Desk · the "pastel" theme · Launch page. Loaded after style.css and built from its tokens,
   tiles (.tk .t-*), panels, buttons, money (.money .amt .usd), big numbers (.big .cents) and avatars (.av).
   Phone first at 390 px; from 1080 px the form sits beside its summary, which stays in view (720 px or less tall,
   and it scrolls inside itself on a shorter window). Under 1080 px the summary follows the form, and a bar
   at the foot of the screen (white, 1 px --line edge, 24 px top corners) carries "In all", the total and the
   violet Launch button until the summary's own total and button come into view; tapping it brings the summary up.

   Shared       the nav and its current-page bar, the page title (.page-title), the numeral squares (.lc-n), the tile
                toggles (.mt), the chip ("Optional"), .sr, .nobr and button.btn are style.css's, as on every page
   Summary head "Your launch" set as a card head (22 px, 850), with a lilac tile square carrying the hero's violet
                "picked" check where the form cards have numerals

   Form cards   white .panel cards, 24 px radius, each headed by a violet numeral (the How it works square, 36 px)
   Fields       lavender-cream fill (--ground) with a 1 px --line border, 14 px radius, 52 px tall, 17 px text;
                on focus white with a violet border and a 3 px --violet-soft ring
   Choices      white option cards with a 1 px border; the chosen one has a 2 px violet border and the hero's
                violet check, the same "picked" mark as the home page's tiles
   Pays order   each chosen asset is a row in its own tile colours, numbered, with move and remove buttons
   Refusals     kind and inline: a rose note (#8E1F4D on #FFF1F5, 7.6:1) under the field it is about
   Motion       one, as Home's: when a choice rewrites a line of the summary, that line is washed in lilac and fades
                (1.6 s); under 1080 px the bar's total is washed the same way when a choice changes it. Typing the
                name or symbol does not wash. The confirmation opens without motion. prefers-reduced-motion removes it.
   ========================================================================================== */

/* ---------- page head ---------- */

.lh { min-width: 0; padding-top: 16px; padding-bottom: 12px; }
.lh h1 { margin-bottom: 12px; }


/* ---------- layout ---------- */

.lf { display: grid; gap: 12px; padding-bottom: 48px; }
.lf-fields { display: grid; gap: 12px; min-width: 0; }
.lf-sum { min-width: 0; }

/* ---------- form cards ---------- */

.lc { margin: 0; min-width: 0; padding: 20px; }
fieldset.lc { border: 1px solid var(--line); }
.lc-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0;
}
legend.lc-head { float: left; width: 100%; }
legend.lc-head + * { clear: both; }
.lc-head h2 { font-size: 22px; font-weight: 850; line-height: 1.2; letter-spacing: -0.01em; }
.lc-head h2 label { cursor: pointer; }
/* the violet numeral square (.lc-n) is style.css's; "Optional" is the shared chip */
.opt { margin-left: auto; }
.lc-help { margin: -6px 0 16px; }

/* ---------- fields ---------- */

.field { min-width: 0; }
.field + .field, .lc-pair + .field, .field + .lc-pair { margin-top: 18px; }
.f-lab { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1.35; }
.f-lab.small { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.f-lab[hidden] { display: none; }
.help { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.help .tk { line-height: 22px; }
.help-row { display: flex; justify-content: space-between; gap: 12px; }
.count { flex: none; font-weight: 700; }

.in {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.in:hover { border-color: var(--line-hover); }
.in:focus { outline: none; background: var(--surface); border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
textarea.in { min-height: 100px; resize: vertical; }
.in-sym { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; }
.in[aria-invalid="true"] { border-color: #F2ADC4; background: #FFF6F9; }
.in[aria-invalid="true"]:focus { border-color: #D9658F; box-shadow: 0 0 0 3px #FFE0EA; }

/* a kind refusal, under the field it is about */
.refuse {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 14px;
  border: 1px solid #F2ADC4; border-radius: 14px; background: #FFF1F5;
  color: #8E1F4D; font-size: 15px; font-weight: 700; line-height: 1.45; text-wrap: pretty;
}
.refuse[hidden] { display: none; }
.refuse svg { flex: none; margin-top: 1px; }

/* ---------- image ---------- */

.f-image { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.f-image > .f-lab { grid-column: 1 / -1; margin-bottom: 8px; }
.drop {
  position: relative; display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden;
  border: 1.5px dashed var(--line-hover); border-radius: 22px; background: var(--ground); color: var(--violet);
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drop:hover { border-color: var(--violet); background: var(--violet-soft); }
.drop:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.drop img[hidden] { display: none; }
.drop.has { border-style: solid; border-color: var(--line); }
.drop.has .drop-plus { visibility: hidden; }
.drop-side { min-width: 0; }
.drop-pick { display: inline-block; color: var(--violet-deep); font-weight: 800; cursor: pointer; overflow-wrap: anywhere; }
.drop-pick:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.drop-side .help { margin-top: 2px; }
.text-btn {
  margin: 4px 0 0 -8px; padding: 0 8px; min-height: 36px; border: 0; border-radius: 10px; background: none;
  color: var(--violet-deep); font-size: 15px; font-weight: 800; cursor: pointer;
}
.text-btn:hover { background: var(--violet-soft); }
.text-btn[hidden] { display: none; }

/* ---------- links ---------- */

.socials { display: grid; gap: 14px; }
.socials .field + .field { margin-top: 0; }
.socials + .help { margin-top: 10px; }

/* ---------- option cards (Paired with, First buy) ---------- */

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-width: 0; min-height: 84px; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover { border-color: var(--line-hover); }
.choice input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice.on { border: 2px solid var(--violet); padding: 12px 13px; background: #FBFAFF; }
.choice:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.choice .pick { display: none; top: -8px; right: -8px; box-shadow: 0 0 0 2.5px var(--surface); }
.choice.on .pick { display: grid; }
.choice-sub { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.35; }

.stock-pick { margin-top: 16px; }
.stock-pick[hidden] { display: none; }
.stock-pick .field + .field { margin-top: 14px; }
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; font-weight: 800; letter-spacing: 0.02em; }
.sel-chev { position: absolute; right: 16px; top: 50%; margin-top: -8px; color: var(--violet-deep); pointer-events: none; }
[data-pair-help] { margin-top: 14px; }
[data-pair-help][hidden] { display: none; }

/* ---------- pays: the chosen, in order ---------- */

.order { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.order[hidden] { display: none; }
/* phone: number, ticker and buttons on one line, when it pays beneath; wider: all on one line */
.or {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n t acts" "n w w";
  align-items: center; column-gap: 10px;
  min-height: 60px; padding: 8px 8px 9px 12px;
  background: var(--bg); border: 1px solid var(--bd); border-radius: 16px; color: var(--fg);
}
.or-n {
  grid-area: n; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--bd); font-size: 15px; font-weight: 900; line-height: 1;
}
.or-t { grid-area: t; min-width: 0; font-size: 18px; font-weight: 850; letter-spacing: 0.02em; line-height: 1.2; }
.or-when { grid-area: w; font-size: 15px; font-weight: 700; line-height: 1.3; }
.or-acts { grid-area: acts; display: flex; gap: 4px; }
/* one item alone: no number; set by the pair: no number and no buttons */
.or-one { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t acts" "w w"; padding-left: 16px; }
.or-lock { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "w"; row-gap: 2px; padding: 10px 16px 11px; }
.ib {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid var(--bd, var(--line)); border-radius: 50%; background: var(--surface); color: var(--fg, var(--violet-deep));
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ib:hover:not(:disabled) { border-color: currentColor; }
.ib:disabled { opacity: 0.35; cursor: default; }
.ib svg { display: block; }
.ib:focus-visible { border-radius: 50%; }
.ib-lg { width: 52px; height: 52px; --bd: var(--line); --fg: var(--violet-deep); background: var(--ground); }

.locked {
  margin-top: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--ground); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5;
}
.locked[hidden] { display: none; }
.locked .tk { line-height: 22px; }

/* ---------- pays: the menu to pick from ---------- */

.menus { margin-top: 16px; }
.menus[hidden] { display: none; }
.menus .f-lab { margin-bottom: 8px; }
.menu + .f-lab { margin-top: 16px; }
.menu { display: flex; flex-wrap: wrap; gap: 10px; }
/* the tile, its picked ring and check are style.css's tile toggle (as the Coins filters) */
.mt { cursor: pointer; }
.mt:disabled { opacity: 0.45; cursor: default; }
.mt:focus-visible { border-radius: 14px; }
[data-pays-help] { margin-top: 16px; }

/* ---------- creator tax ---------- */

.stepper { display: flex; align-items: center; gap: 10px; }
.pct { position: relative; display: block; width: 128px; }
.pct .in { min-height: 52px; padding-right: 37px; text-align: right; font-size: 21px; font-weight: 850; }
.pct-sign { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 21px; font-weight: 850; pointer-events: none; }
#r-tax + .help, .stepper + .help { margin-top: 12px; }

/* ---------- first buy ---------- */

.buys .choice { min-height: 76px; gap: 2px; }
.buys .buy-other .buy-amt { text-wrap: balance; }
.buy-amt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; color: var(--ink); font-size: 18px; font-weight: 850; line-height: 1.3; }
.buy-unit { font-size: 15px; font-weight: 800; color: var(--ink); }
.buy-usd { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.35; }
.custom { margin-top: 16px; }
.custom[hidden] { display: none; }
.unit-in { position: relative; display: block; max-width: 280px; }
.unit-in .in { padding-right: 84px; font-weight: 800; }
.unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 16px; font-weight: 800; pointer-events: none; }

/* ---------- the summary ---------- */

.sum { padding: 20px 20px 18px; scroll-margin-top: 12px; }
.sum-head { margin-bottom: 12px; }
/* where the form cards have a violet numeral, the summary has a lilac tile square with the hero's "picked" check */
.lc-ok {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--bg); border: 1px solid var(--bd); border-radius: 12px;
}
.lc-ok .pick { position: static; box-shadow: none; }
.sum-coin { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.sum-coin .av-lg { width: 52px; height: 52px; }
.sum-id { min-width: 0; }
.sum-name { font-size: 24px; font-weight: 850; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sum-name.empty { color: var(--ink-2); }
.sum-meta { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.4; text-wrap: balance; }
.av-blank { color: var(--line-hover); }
.av-in img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.sum-lines { margin: 0 -10px; padding-top: 6px; }
.sum-row { padding: 4px 10px 5px; border-radius: 14px; }
.sum-row + .sum-row { margin-top: 1px; }
/* a short row: its label and words on one line where they fit */
.sum-row-short { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }
.sum-row.sum-row-short dd { font-size: 15px; }
.sum-row dt { color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.4; }
.sum-row dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.sum-row dd .tk { line-height: 22px; }
.sum-row dd .bad { color: #8E1F4D; font-weight: 700; }

.sum-money { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.sum-money > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
.sum-money dt { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.sum-money dd { margin: 0; font-size: 16px; }
.sum-money .tk { line-height: 22px; }
.sum-money .none { color: var(--ink-2); font-weight: 700; }

.sum-foot { padding-top: 12px; }
.sum-total { padding: 10px 16px 12px; border-radius: 18px; background: var(--violet-soft); }
.sum-total-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }
.sum-total .lbl { color: var(--violet-deep); }
.sum-total .cents { color: var(--ink-2); }
.sum-total-line { margin-top: 2px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.sum-total-line .tk { line-height: 22px; }

.sum-go { width: 100%; margin-top: 14px; white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 12px; text-wrap: balance; overflow-wrap: anywhere; }
.sum-note { margin-top: 6px; color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.45; text-align: center; text-wrap: balance; }
.sum-note .tk { line-height: 22px; }
.sum-fix { margin-top: 12px; }
.sum-fix + .sum-go { margin-top: 12px; }
.sum-foot { background: var(--surface); }

/* the one motion: the summary line a choice rewrote is washed in lilac, then fades (the bar's total too) */
.sum-row.fresh, .lbar-sum.fresh { animation: sum-wash 1600ms linear both; }
@keyframes sum-wash {
  0%   { background-color: #DDD1FF; }
  35%  { background-color: #DDD1FF; animation-timing-function: ease-in-out; }
  100% { background-color: rgba(221, 209, 255, 0); }
}

/* ---------- the bar under 1080 px: in view until the summary's own total and button are ---------- */

.lbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.lbar[hidden] { display: none; }
.lbar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lbar-sum {
  flex: none; display: flex; flex-direction: column; margin: 0 0 0 -10px; padding: 2px 10px 3px; border-radius: 14px;
}
.lbar-sum .lbl { line-height: 1.35; }
.lbar-sum .big { font-size: 26px; line-height: 1.15; }
.lbar-go { min-width: 0; flex: 0 1 auto; }
.lbar-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html { scroll-padding-bottom: 100px; }
.foot { padding-bottom: calc(24px + 84px + env(safe-area-inset-bottom, 0px)); }

/* ---------- the confirmation ---------- */

.confirm {
  width: min(500px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink);
  box-shadow: 0 28px 60px -30px rgba(62, 38, 170, 0.5);
}
.confirm::backdrop { background: rgba(30, 26, 60, 0.32); }
.cf-in { padding: 24px 20px 20px; }
.cf-h { font-size: 26px; font-weight: 850; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 6px; }
.cf-lede { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
.cf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cf-step {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "n kind" "body body";
  column-gap: 10px; row-gap: 8px; align-items: center;
  padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--ground);
}
.cf-step .lc-n { grid-area: n; width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
.cf-kind { grid-area: kind; color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.4; }
.cf-body { grid-area: body; min-width: 0; }
.cf-title { font-size: 18px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.cf-title .tk { line-height: 22px; }
.cf-what { margin-top: 4px; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.cf-what .tk, .cf-terms .tk { line-height: 22px; }
.cf-terms { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.cf-terms[hidden] { display: none; }
.cf-terms > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
.cf-terms dt { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.cf-terms dd { margin: 0; font-size: 16px; font-weight: 700; }
.cf-note {
  margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--violet-soft);
  color: var(--violet-deep); font-size: 15px; font-weight: 800; line-height: 1.45;
}
.cf-close { width: 100%; margin-top: 14px; }

/* live: the wallet under the button, the API's summary and each step's status in the confirmation, the Sign button */
.sum-wallet { margin-top: 8px; }
.sum-wallet[hidden] { display: none; }
.choice[hidden] { display: none; }
.cf-sum {
  list-style: none; margin: 0 0 12px; padding: 12px 14px; display: grid; gap: 4px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1.45;
}
.cf-status { margin-top: 10px; color: var(--violet-deep); font-size: 15px; font-weight: 800; line-height: 1.45; }
.cf-status[hidden] { display: none; }
.cf-status.ok { color: var(--live); }
.cf-status.bad { color: #8E1F4D; }
.cf-status a { color: inherit; }
.cf-sign { width: 100%; margin-top: 14px; }
.cf-sign[hidden] { display: none; }
.cf-sign:disabled { opacity: 0.6; cursor: default; }
.sum-go:disabled { opacity: 0.7; cursor: default; }

/* ---------- tablet ---------- */

@media (min-width: 720px) {
  .lh { padding-top: 16px; padding-bottom: 16px; }

  .lc { padding: 24px; }
  .lc-pair { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
  .lc-pair .field + .field { margin-top: 0; }
  .socials { grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
  .pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stock-pick { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .stock-pick[hidden] { display: none; }
  .stock-pick .field + .field { margin-top: 0; }
  .stock-pick .refuse { grid-column: 1 / -1; }
  .or { grid-template-columns: 30px auto minmax(0, 1fr) auto; grid-template-areas: "n t w acts"; column-gap: 12px; }
  .or-one { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t w acts"; }
  .or-lock { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t w"; column-gap: 12px; padding: 8px 16px 9px; }
  .lbar { padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cf-in { padding: 28px 28px 24px; }
  .cf-step { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "n kind" "n body"; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px; }
  .cf-step .lc-n { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
}

/* ---------- desktop: the form beside its summary ---------- */

@media (min-width: 1080px) {
  /* the title heads the form column; the summary starts level with it */
  .lh { grid-area: head; padding-top: 16px; padding-bottom: 0; }
  .lh h1 { margin-bottom: 14px; }
  .lf {
    grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "head sum" "fields sum";
    gap: 32px; align-items: start; padding-bottom: 64px;
  }
  .lf-fields { grid-area: fields; }
  .lf-fields { gap: 16px; }
  .lc { padding: 28px; }
  .lc-head { margin-bottom: 18px; }
  .lc-head h2 { font-size: 24px; }
  .lc-help { margin: -8px 0 18px; }
  .lf-sum { grid-area: sum; position: sticky; top: 24px; margin-top: 16px; }
  /* a guard: on a short window the summary scrolls inside itself rather than running off the screen */
  .lf-sum .sum { max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; }
  .sum { padding: 20px 24px 18px; }
  .sum-head { margin-bottom: 12px; }
  .sum-name { font-size: 24px; }
  .sum-total .big { font-size: 34px; }
  .sum-go { min-height: 56px; }
  /* when the window is too short for the whole summary, its foot (what is missing, the button, the signatures)
     stays at the bottom of the card and the rest scrolls above it */
  .sum-foot { position: sticky; bottom: -18px; margin: 0 -24px -18px; padding: 10px 24px 18px; }
  .sum.over .sum-foot { border-top: 1px solid var(--line-2); }
  .lbar { display: none; }
  html { scroll-padding-bottom: 0; }
  .foot { padding-bottom: 64px; }
  .help { font-size: 15px; }
}

/* a narrow desktop: the form column is about 550 px, so the four pairs go two by two */
@media (min-width: 1080px) and (max-width: 1279.98px) {
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sum-row.fresh, .lbar-sum.fresh { animation: none; }
}