/* ============================================================
   GROWTH SCOPE — CART, BONUS & SERVICE REQUEST
   ============================================================
   Loaded after growth-score.css on the pricing, scanner and
   request pages. Everything here is built from the tokens already
   defined in main.css and the .gs-page block in growth-score.css —
   no new palette, no new type scale.

   Three groups:
     1. additions to the existing plan card (question, bonus)
     2. the cart button and drawer
     3. the /request/ page
   ============================================================ */

/* ============================================================
   1. PLAN CARD ADDITIONS
   ============================================================ */

/* The question this tier answers. It sits directly under the price
   and is the line that actually separates the three plans, so it
   carries more weight than the positioning line beneath it. */
.gs-plan__q {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--gs-text);
  margin: var(--space-3) 0 var(--space-1);
}

.gs-plan__for {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gs-text-dim);
  font-style: normal;
  margin: 0 0 var(--space-4);
}

/* Secondary route under a paid CTA, for someone who has not run a
   scan yet. Deliberately quiet — it must not compete with the
   Add to Cart button above it. */
.gs-plan__alt {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gs-plan__alt:hover { color: var(--gs-accent-soft); }

/* Give the emphasised (middle) tier real presence. The lift is
   dropped on small screens, where cards stack and a raised card
   just looks misaligned. */
.gs-plan--feature {
  box-shadow: 0 12px 34px rgba(108, 59, 255, 0.16);
}
@media (min-width: 900px) {
  .gs-plan--feature { transform: translateY(-10px); }
}

/* ---- the guest-post bonus ---------------------------------- */

/* Visually distinct from the feature list so it reads as a bonus
   rather than as more of the same. Warm tint against the purple
   card so it stands apart without introducing a second brand
   colour. */
.gs-bonus {
  margin: var(--space-5) 0 var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: #FFF8E8;
  border: 1px dashed #E8C88A;
}

.gs-bonus__tag {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A5A00;
  margin: 0 0 var(--space-2);
}

.gs-bonus__head {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #5C441A;
  margin: 0 0 var(--space-3);
}

.gs-bonus__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.gs-bonus__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #5C441A;
}
.gs-bonus__list li::before {
  content: "•";
  position: absolute;
  left: 0.25rem;
  color: #B98A2E;
}

/* Which tier the bonus belongs to. Sits between the list and the
   qualification note, weighted so it reads as a fact about the plan
   rather than as another bullet. */
.gs-bonus__with {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: #F6E3BC;
  color: #6B4E12;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gs-bonus__note {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #7A6438;
  font-style: italic;
}

/* ============================================================
   1b. GROWTH SCOPE HUB  (/growth-scope/)
   ============================================================ */

.gsc-tools {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
@media (min-width: 720px) {
  .gsc-tools { grid-template-columns: repeat(2, 1fr); }
}

.gsc-tool {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  background: var(--gs-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.gsc-tool:hover {
  border-color: var(--gs-accent);
  box-shadow: 0 10px 26px var(--gs-accent-glow);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.gsc-tool:hover { transform: none; }
}

.gsc-tool.is-soon { opacity: 0.62; }

.gsc-tool__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gsc-tool__emoji { font-size: 1.5rem; line-height: 1; }
.gsc-tool__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0;
}
.gsc-tool__soon {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--gs-surface-2);
  color: var(--gs-text-dim);
}
.gsc-tool__line {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gs-text-dim);
}
.gsc-tool__cta {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gs-accent-soft);
}

/* ============================================================
   2. CART BUTTON + DRAWER
   ============================================================ */

.gs-cartbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-full);
  background: var(--gs-surface);
  color: var(--gs-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* A class selector beats the UA's [hidden] rule, so an explicit
   display:none is required or the empty cart stays on screen
   showing "Cart 0". */
.gs-cartbtn[hidden] { display: none; }
.gs-cartbtn:hover {
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 3px var(--gs-accent-faint);
}
.gs-cartbtn__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-full);
  background: var(--gs-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
@media (max-width: 560px) {
  .gs-cartbtn__label { display: none; }
}

/* ---- drawer ------------------------------------------------ */

.dwt-noscroll { overflow: hidden; }

.dwt-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.dwt-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dwt-drawer.is-open .dwt-drawer__scrim { opacity: 1; }

.dwt-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--gs-surface);
  box-shadow: -18px 0 44px rgba(17, 17, 17, 0.14);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.dwt-drawer.is-open .dwt-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .dwt-drawer__panel,
  .dwt-drawer__scrim { transition: none; }
}

.dwt-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--gs-border);
}
.dwt-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0;
}
.dwt-drawer__x {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gs-text-muted);
  cursor: pointer;
}
.dwt-drawer__x:hover { background: var(--gs-surface-2); color: var(--gs-text); }

.dwt-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}
.dwt-drawer__empty {
  color: var(--gs-text-dim);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-8) 0;
}

.dwt-dline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gs-border-light, var(--gs-border));
}
.dwt-dline:last-child { border-bottom: none; }
.dwt-dline__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  margin: 0;
}
.dwt-dline__bonus {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: #8A5A00;
}
.dwt-dline__side { text-align: right; flex-shrink: 0; }
.dwt-dline__price {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
}
.dwt-dline__rm {
  margin-top: var(--space-1);
  border: none;
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  text-decoration: underline;
  cursor: pointer;
}
.dwt-dline__rm:hover { color: var(--gs-bad); }

.dwt-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--gs-border);
  display: grid;
  gap: var(--space-3);
}
.dwt-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-heading);
}
.dwt-drawer__total strong { font-size: var(--text-xl); font-weight: 800; }
.dwt-drawer__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.5;
}

/* ============================================================
   3. REQUEST PAGE
   ============================================================ */

.dwt-reqpage .gs-nav__inner { justify-content: space-between; }

.dwt-shell { max-width: 1060px; }

.dwt-head {
  text-align: center;
  padding: var(--space-10) 0 var(--space-8);
}
.dwt-head__lede {
  max-width: 46ch;
  margin: var(--space-3) auto 0;
  color: var(--gs-text-dim);
  font-size: var(--text-base);
  line-height: 1.6;
}

.dwt-grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .dwt-grid { grid-template-columns: 1fr 1fr; }
}
.dwt-col { display: grid; gap: var(--space-5); align-content: start; }

.dwt-card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.dwt-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.dwt-card__sub {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--gs-text-dim);
  line-height: 1.55;
}
.dwt-card__foot {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}
.dwt-card__foot a { color: var(--gs-accent-soft); text-decoration: underline; }

.dwt-card--bonus {
  background: #FFF8E8;
  border-color: #E8C88A;
  border-style: dashed;
}
.dwt-bonuscard__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-base);
  color: #8A5A00;
  margin: 0 0 var(--space-1);
}
.dwt-bonuscard__head {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #5C441A;
}
.dwt-card--bonus .dwt-check li { color: #5C441A; }
.dwt-card--bonus .dwt-check li::before { color: #B98A2E; }

/* ---- cart lines -------------------------------------------- */

.dwt-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-md);
  background: var(--gs-bg);
}
.dwt-line + .dwt-line { margin-top: var(--space-3); }
.dwt-line__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  margin: 0;
}
.dwt-line__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
}
.dwt-line__side { text-align: right; flex-shrink: 0; }
.dwt-line__price {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-lg);
}
.dwt-line__rm {
  margin-top: var(--space-1);
  border: none;
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  text-decoration: underline;
  cursor: pointer;
}
.dwt-line__rm:hover { color: var(--gs-bad); }

/* ---- lists -------------------------------------------------- */

.dwt-incl__for {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  margin: var(--space-4) 0 var(--space-2);
}
.dwt-incl__for:first-child { margin-top: 0; }

.dwt-check,
.dwt-arrow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.dwt-check li,
.dwt-arrow li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gs-text);
}
.dwt-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--gs-ok);
  font-weight: 700;
}
.dwt-arrow li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gs-accent);
  font-weight: 700;
}

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

.dwt-field { margin-bottom: var(--space-4); }
.dwt-field label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}
.dwt-req { color: var(--gs-accent); }
.dwt-opt {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
}

.dwt-field input,
.dwt-field textarea {
  width: 100%;
  padding: 0.75rem var(--space-4);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-md);
  background: var(--gs-surface);
  color: var(--gs-text);
  font-family: var(--font-body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the page
     on focus, which then leaves the layout scrolled sideways. */
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dwt-field textarea { resize: vertical; min-height: 5rem; }
.dwt-field input:focus,
.dwt-field textarea:focus {
  outline: none;
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 3px var(--gs-accent-faint);
}
.dwt-field input.is-bad,
.dwt-field textarea.is-bad { border-color: var(--gs-bad); }

.dwt-err {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-bad);
}

.dwt-formerr {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.dwt-formerr a { color: #991B1B; text-decoration: underline; font-weight: 600; }

/* ---- charity ------------------------------------------------ */

.dwt-card--cause {
  background: linear-gradient(180deg, var(--gs-surface-2) 0%, var(--gs-surface) 60%);
}

.dwt-causes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dwt-cause {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  text-align: left;
  padding: var(--space-4);
  border: 1.5px solid var(--gs-border);
  border-radius: var(--radius-md);
  background: var(--gs-surface);
  cursor: pointer;
  font-family: var(--font-body);
  /* Comfortably past the 44px tap target on mobile. */
  min-height: 5.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dwt-cause:hover { border-color: var(--gs-accent); }
.dwt-cause:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gs-accent-faint);
}
.dwt-cause.is-on {
  border-color: var(--gs-accent);
  background: var(--gs-surface-2);
  box-shadow: 0 0 0 3px var(--gs-accent-faint);
}
/* Selection is carried by border, tint AND a tick, never by colour
   alone — aria-pressed covers assistive tech, this covers everyone
   who cannot pick the tinted card out by eye. */
.dwt-cause.is-on::after {
  content: "✓";
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  color: var(--gs-accent-soft);
  font-weight: 700;
}
.dwt-cause { position: relative; }

.dwt-cause__emoji { font-size: 1.35rem; line-height: 1; }
.dwt-cause__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gs-text);
}
.dwt-cause__line {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--gs-text-dim);
}

.dwt-cause__alloc {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  font-size: var(--text-sm);
  color: var(--gs-text);
}

.dwt-fineprint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--gs-text-dim);
}
.dwt-fineprint--center { text-align: center; margin-top: var(--space-3); }

/* ---- consent ------------------------------------------------
   Two checkboxes, visually identical, because they are equally
   real permissions. The optional one is marked in words rather
   than by being made smaller or greyer — a permission that is
   easy to miss is not a permission that was given.
   ------------------------------------------------------------ */

.dwt-consents {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gs-border);
}
.dwt-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  cursor: pointer;
}
.dwt-consent input[type="checkbox"] {
  /* A 1.15rem box on a 44px-tall row: comfortably tappable on a
     phone without an oversized control on desktop. */
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--gs-accent);
  flex-shrink: 0;
}
.dwt-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gs-accent);
  outline-offset: 2px;
}
.dwt-consent__label {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--gs-text);
}
.dwt-consent__note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--gs-text-dim);
}
.dwt-consent input[aria-invalid="true"] { outline: 2px solid var(--gs-bad); outline-offset: 2px; }

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

.dwt-summary { margin-top: var(--space-5); }

.dwt-sum { margin: 0 0 var(--space-6); }
.dwt-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--gs-border);
}
.dwt-sum__row dt { color: var(--gs-text-dim); font-size: var(--text-sm); }
.dwt-sum__row dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: right;
}
.dwt-sum__row--total dd { font-size: var(--text-lg); font-weight: 800; }
.dwt-sum__row--due dd { color: var(--gs-ok); }
.dwt-sum__row--id dd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}
.dwt-sum__none { color: var(--gs-text-dim); font-weight: 400; }

/* ---- what happens next -------------------------------------- */

.dwt-next {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gs-bg);
  border: 1px solid var(--gs-border);
  margin-bottom: var(--space-5);
}
.dwt-next__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  margin: 0 0 var(--space-4);
}
.dwt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}
.dwt-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.dwt-steps__n {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--gs-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}
.dwt-steps li strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
}
.dwt-steps li span:not(.dwt-steps__n) {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gs-text-dim);
}

/* The final CTA stays reachable on a long mobile page without an
   overlay bar covering content. */
.dwt-submit { position: sticky; bottom: var(--space-4); z-index: 2; }
.dwt-submit:disabled { opacity: 0.6; cursor: progress; }

/* ---- empty + success ---------------------------------------- */

.dwt-empty,
.dwt-done {
  text-align: center;
  padding: var(--space-16) 0;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}
.dwt-empty__emoji,
.dwt-done__emoji { font-size: 2.5rem; margin: 0; }
.dwt-empty p { color: var(--gs-text-dim); margin: 0; }

.dwt-done__lede {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--gs-text);
}
.dwt-sum--done {
  width: 100%;
  max-width: 26rem;
  text-align: left;
  margin: var(--space-4) 0;
}
.dwt-done__next {
  max-width: 40ch;
  margin: 0;
  color: var(--gs-text-dim);
  line-height: 1.6;
}

/* The one line the customer must not misread, so it gets its own
   block rather than trailing off the end of the lede. */
.dwt-done__nocharge {
  max-width: 44ch;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gs-surface-2);
  border: 1px solid var(--color-purple-mid);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gs-text);
}

/* "Nothing paid" is a status, not a good-news green tick — the
   accent green on .dwt-sum__row--due would read as "settled". */
.dwt-sum--done .dwt-sum__row--due dd { color: var(--gs-text); }
.dwt-sum__note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gs-text-dim);
}

.dwt-next--done {
  width: 100%;
  max-width: 26rem;
  text-align: left;
  margin-bottom: 0;
}

.dwt-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---- mobile ------------------------------------------------- */

@media (max-width: 640px) {
  .dwt-card { padding: var(--space-5); }
  .dwt-head { padding: var(--space-8) 0 var(--space-6); }
  .dwt-causes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* Long unbroken strings — a pasted URL, a request id — must wrap
     rather than push the page sideways. */
  .dwt-sum__row dd,
  .dwt-line__name { overflow-wrap: anywhere; }
}