/* ============================================================
 * page-horoscopes.css — the horoscopes HUB /horoscopes/ (the 23 Sep sheets:
 * desktop D3, mobile 1c; no tablet sheet — 820 reflows from the desktop
 * pattern). Built by src/deploy/horoscopes.php (ca_hx_hub_html); the markup
 * carries class hooks only, every value is a token.
 *
 * D3: eyebrow · h1 · lede → the zodiac grid (6 × 150 at 40 / 24 gaps, glyph 80,
 * name 20 / .12em, dates 13 / .14em) → the poster promo (420 photo | copy + buy)
 * → the reading card | the two draw widgets → the capture panel.
 * 1c: eyebrow · h1 · lede → the grid 2 × 6 (glyph 48, name 19, dates 10) → the
 * two draw widgets as compact tiles (icon + "Daily tarot →") → the capture
 * panel. The poster promo and the reading card are NOT on the phone sheet.
 *
 * Token-only (bin/check-design-tokens.sh). The few plain px lengths are artwork
 * sizes the design draws once and the token set does not name.
 * ============================================================ */

/* ─── hero ─────────────────────────────────────────────────── */
.cap-shell .cap-hx-hub__hero { padding-top: var(--cap-space-after-header); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-hero-step); }
.cap-shell .cap-hx-hub__h1 { max-width: 22ch; font-size: var(--cap-type-xl); line-height: var(--cap-leading-hero-mid); text-wrap: balance; }   /* D3 52 / 1c 28, "Monthly Horoscopes / for Every Sign" */
.cap-shell .cap-hx-hub__lede { max-width: 52ch; font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-data); }

/* ─── the zodiac grid ──────────────────────────────────────── */
.cap-shell .cap-hx-grid { margin-top: var(--cap-space-band-close); display: grid; grid-template-columns: repeat(6, 150px); gap: var(--cap-space-panel-pad) var(--cap-gutter); justify-content: center; }
.cap-shell .cap-hx-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-sm); color: var(--cap-color-text); transition: opacity var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-hx-tile:hover { color: var(--cap-color-text); } }
.cap-shell .cap-hx-tile__glyph { display: block; width: 80px; height: 80px; color: var(--cap-hx-sign, var(--cap-color-text)); transition: color var(--cap-ease); }
.cap-shell .cap-hx-tile__glyph svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@media (hover: hover) { .cap-shell .cap-hx-tile:hover .cap-hx-tile__glyph { color: var(--cap-color-text); } }   /* round 25 (owner): a tile's hover turns its glyph INK (mouse only) — replaces round 23's option (a), violet */
.cap-shell .cap-hx-tile__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-feature); text-transform: uppercase; margin-top: var(--cap-space-gap-1); line-height: var(--cap-leading-ui); }
.cap-shell .cap-hx-tile__dates { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-caption); color: var(--cap-color-muted); }

/* ─── the poster promo (D3) ────────────────────────────────── */
.cap-shell .cap-hx-hub__poster { margin-top: var(--cap-space-xl); }
.cap-shell .cap-hx-promo { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: center; color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-hx-promo:hover { color: var(--cap-color-text); } }
.cap-shell .cap-hx-promo__img { position: relative; display: block; min-height: 280px; height: 100%; overflow: hidden; background: var(--cap-color-bg-deep); }
.cap-shell .cap-hx-promo__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-hx-promo__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cap-space-panel-pad); align-items: center; padding: var(--cap-space-band-close); }
.cap-shell .cap-hx-promo__copy { display: flex; flex-direction: column; gap: var(--cap-space-gap-6); }
.cap-shell .cap-hx-promo__copy .cap-lede { max-width: 44ch; }
/* doubled class: the shared .cap-hx-title below (same specificity, later) was resetting these to card scale */
.cap-shell .cap-hx-title.cap-hx-promo__title { max-width: 18ch; font-size: var(--cap-type-h2); line-height: var(--cap-leading-display); letter-spacing: var(--cap-track-display); }
.cap-shell .cap-hx-promo__spec { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cap-space-gap-7); }
.cap-shell .cap-hx-promo__spec .cap-meta { font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); }
.cap-shell .cap-hx-promo__sep { display: block; width: 1px; height: var(--cap-space-md); background: var(--cap-color-line); }
.cap-shell .cap-hx-promo__buy { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-5); }
.cap-shell .cap-hx-promo__price { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-tile-price); letter-spacing: var(--cap-track-price); line-height: var(--cap-leading-tight); }   /* D3 markup: Barlow 600 18 / .06em (was the display face) */
.cap-shell .cap-hx-promo__amount { font-weight: inherit; }   /* the amount reads as the line's own text on desktop (D3) */
.cap-shell .cap-hx-frames { display: flex; gap: var(--cap-space-gap-3); }
.cap-shell .cap-hx-frames i { display: block; width: 22px; height: 22px; border-radius: var(--cap-radius-pill); border: var(--cap-border-hairline) solid transparent; }
.cap-shell .cap-hx-frames i.is-white { background: var(--cap-color-frame-white); border-color: var(--cap-color-line); }
.cap-shell .cap-hx-frames i.is-black { background: var(--cap-color-frame-black); }
.cap-shell .cap-hx-frames i.is-oak { background: var(--cap-color-frame-oak); }
.cap-shell .cap-hx-frames i.is-walnut { background: var(--cap-color-frame-walnut); }

/* ─── the reading card | the two widgets (D3) ──────────────── */
.cap-shell .cap-hx-hub__two { margin-top: var(--cap-gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-gutter); }
.cap-shell .cap-hx-reading { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; padding: 0; color: var(--cap-color-on-ink); }
@media (hover: hover) { .cap-shell .cap-hx-reading:hover { color: var(--cap-color-on-ink); } }
.cap-shell .cap-hx-reading__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-md); padding: var(--cap-space-lg); }
.cap-shell .cap-hx-reading__copy .cap-hx-title { font-size: var(--cap-type-product-tile); line-height: var(--cap-leading-ui); }
.cap-shell .cap-hx-reading__copy .cap-lede { color: var(--cap-color-on-ink-3); }
.cap-shell .cap-hx-reading__copy .cap-btn { margin-top: var(--cap-space-sm); }
.cap-shell .cap-hx-reading__pages { position: relative; height: 100%; min-height: 250px; overflow: hidden; }
.cap-shell .cap-hx-reading__pages img { position: absolute; right: var(--cap-gutter); top: var(--cap-gutter); display: block; width: 202px; height: 284px; object-fit: cover; object-position: 50% 0; background: var(--cap-color-bg); box-shadow: var(--cap-shadow-dark); transform: scale(1.05); transform-origin: 50% 0; }
.cap-shell .cap-hx-widgets { display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-shell .cap-hx-widget { flex: 1; display: flex; align-items: center; gap: var(--cap-space-panel-pad); border-radius: var(--cap-radius-flat); padding: var(--cap-gutter); color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-hx-widget:hover { color: var(--cap-color-text); box-shadow: var(--cap-shadow-halo); } }
.cap-shell .cap-hx-widget__icon { display: block; flex: none; width: max-content; color: var(--cap-color-primary); }
.cap-shell .cap-hx-widget__icon svg { display: block; width: auto; height: calc(28px * 346.37 / 220.49); fill: currentColor; }   /* the owner's pair in one frame (icon-*.svg, 2026-10-08): sized by height, the card as before, the stone as drawn beside it */
.cap-shell .cap-hx-widget__copy { flex: 1; display: flex; flex-direction: column; gap: var(--cap-space-xs); }
.cap-shell .cap-hx-widget__title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-tile-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; }
.cap-shell .cap-hx-widget__t-m { display: none; }
.cap-shell .cap-hx-widget__copy .cap-lede { color: var(--cap-color-muted); }
.cap-shell .cap-hx-widget__free { flex: none; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-primary); }

/* ─── the "Don't know your sign?" band (D3-Hub-band, 26 Sep; CD field rule 3: a single field next to its button, no
   label, the hint only) ───────────────────────────────────────── */
.cap-shell .cap-hx-hub__capture { margin-top: var(--cap-gutter); padding-bottom: var(--cap-space-hero-open); }
.cap-shell .cap-hx-capture { display: flex; flex-direction: column; align-items: flex-start; padding: var(--cap-space-band-close); background: var(--cap-color-bg-deep); border-radius: var(--cap-radius-flat); }
.cap-shell .cap-hx-title.cap-hx-capture__title { margin: var(--cap-space-gap-5) 0 0; max-width: var(--cap-band-head); font-size: var(--cap-type-product-tile); line-height: var(--cap-leading-band-head); }
.cap-shell .cap-hx-capture__sign { color: inherit; text-decoration: underline; text-decoration-color: var(--cap-color-primary); text-decoration-thickness: var(--cap-border-emphasis); text-underline-offset: var(--cap-space-band-underline); }
.cap-shell .cap-hx-capture__free { color: var(--cap-color-primary); text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-hx-capture__sign:hover, .cap-shell .cap-hx-capture__free:hover { color: var(--cap-color-primary); } }
.cap-shell .cap-hx-capture__more { display: none; }   /* the phone's chips + link row (1c-2); desktop keeps the inline links */
.cap-shell .cap-hx-capture__form { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--cap-space-sm) var(--cap-space-gap-6); margin-top: var(--cap-space-block-5); }   /* round 25 (owner): a grid, not a wrapping row — a wrapping row is as wide as all its items end to end, so the error box ran 38 px past Go; here the two columns are the field and Go, and the box spans exactly them */
.cap-shell .cap-hx-capture__field { display: block; position: relative; flex: none; width: var(--cap-band-field); }
/* round 22 (owner): "Clear" at the right end of the pill, on its middle line, once a box holds something */
.cap-shell .cap-hx-capture .cap-hx-capture__clear { top: 50%; bottom: auto; right: calc(var(--cap-space-field-x) + var(--cap-border-hairline) - (var(--cap-tap-min) - var(--cap-cell-clear-icon)) / 2); transform: translateY(-50%); }   /* round 25 (owner): the ✕ as far from the pill's right end as the date is from its left (the pill's edge + its side inset), at every width */
@media (max-width: 699px) { .cap-shell .cap-hx-capture .cap-birth__slash { word-spacing: -0.2em; padding: 0 var(--cap-space-gap-1); } }   /* round 25: the room for that inset comes from the two slashes (as the phone birth cells, round 22), so the ✕'s 44 band still clears the year box and Go */
@media (max-width: 379px) { .cap-shell .cap-hx-capture__form .cap-hx-capture__go { padding-left: var(--cap-space-gap-6); padding-right: var(--cap-space-gap-6); } }   /* round 25: on the narrowest phones Go gives up 24 px, so the field keeps the ✕'s inset and Go stays on the field's line */
.cap-shell .cap-hx-capture .cap-hx-capture__parts { width: 100%; height: var(--cap-space-field-h); box-sizing: border-box; }   /* the three typed boxes (round 20) in the engine's pill (.cap-parts) */
.cap-shell .cap-hx-capture .cap-hx-capture__parts[aria-invalid="true"] { border-color: var(--cap-color-error); }
.cap-shell .cap-hx-capture__go { flex: none; }
.cap-shell .cap-hx-capture__msg { grid-column: 1 / -1; contain: inline-size; margin: 0; }   /* the alert box (.cap-alert, the 2j board) — round 22 (owner): inside the form, exactly as wide as the field and the button (contain keeps its words from widening the form); its own row 8 under them */

/* ─── shared display headline (card scale) ─────────────────── */
.cap-shell .cap-hx-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-h3-card); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: inherit; }

/* ─── 700–1279 (no tablet sheet: the desktop pattern wraps) ── */
@media (max-width: 1279px) {
  .cap-shell .cap-hx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {   /* two-column splits collapse below 1280 (owner rule 2026-09-30, reflow.md) */
  .cap-shell .cap-hx-promo { grid-template-columns: 1fr; }
  .cap-shell .cap-hx-promo__img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .cap-shell .cap-hx-hub__two { grid-template-columns: 1fr; }
  .cap-shell .cap-hx-reading { grid-template-columns: 1fr; }
  .cap-shell .cap-hx-reading__pages { min-height: 220px; }
}

/* ─── 700–1279 · T21 (1024; 820 follows it): one column of the desktop blocks — the grid 6 × 119 at 24 / 32, glyph 64;
   the poster promo as a 340 square photo | copy, the button left and the price right on one row; the reading band with
   the report's cover on its right; the two draws side by side in the phone's words ("Daily Tarot →", no "Free →");
   the capture band's headline on a 472 measure ───────────────────────────────────────────── */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-hx-grid { grid-template-columns: repeat(6, 119px); gap: var(--cap-space-lg) var(--cap-gutter); }   /* geometry: T21's 119 columns */
  .cap-shell .cap-hx-tile__glyph { width: 64px; height: 64px; }   /* geometry: T21's 64 glyph */
  .cap-shell .cap-hx-tile__name { font-size: var(--cap-type-tile-label); line-height: normal; }
  .cap-shell .cap-hx-tile__dates { line-height: normal; }
  .cap-shell .cap-hx-promo { grid-template-columns: 340px minmax(0, 1fr); align-items: stretch; }   /* geometry: the 340 square photo */
  .cap-shell .cap-hx-promo__img { min-height: 340px; aspect-ratio: auto; height: 100%; }
  .cap-shell .cap-hx-promo__body { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--cap-space-lg); padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-hx-title.cap-hx-promo__title { max-width: none; font-size: var(--cap-type-product-tile); line-height: var(--cap-leading-ui); }
  .cap-shell .cap-hx-promo__buy { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  /* T21 + the sign page (owner 2026-10-01): "FROM" a caps caption, the amount a display figure — the same two rules as .cap-hx-poster__from / __amount */
  .cap-shell .cap-hx-promo__price { display: flex; align-items: baseline; gap: var(--cap-space-sm); font-weight: 500; font-size: var(--cap-type-summary-k); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-caption); }
  .cap-shell .cap-hx-promo__amount { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-tight); text-transform: none; color: var(--cap-color-text); }
  .cap-shell .cap-hx-hub__two { grid-template-columns: 1fr; }
  .cap-shell .cap-hx-reading { grid-template-columns: minmax(0, 1fr) 240px; align-items: stretch; }
  .cap-shell .cap-hx-reading__copy { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-hx-reading__pages { min-height: 0; }
  .cap-shell .cap-hx-reading__pages img { right: calc(var(--cap-gutter) + var(--cap-space-gap-3)); top: var(--cap-space-lg); transform: none; }
  .cap-shell .cap-hx-widgets { flex-direction: row; gap: var(--cap-gutter); }
  .cap-shell .cap-hx-widget { gap: var(--cap-space-md); }
  .cap-shell .cap-hx-widget__t-d, .cap-shell .cap-hx-widget__free { display: none; }
  .cap-shell .cap-hx-widget__t-m { display: inline; }
  .cap-shell .cap-hx-title.cap-hx-capture__title { max-width: 25ch; }
  .cap-shell .cap-hx-tile__dates { color: var(--cap-color-caption); }
  .cap-shell .cap-hx-reading__copy .cap-btn { font-size: var(--cap-type-btn-large); line-height: var(--cap-leading-btn-large); letter-spacing: var(--cap-track-btn-large); padding: var(--cap-btn-pad-large); }   /* T21: the Large pill */
  .cap-shell .cap-hx-widget__title { line-height: normal; }
  .cap-shell .cap-hx-widget__copy .cap-lede { line-height: var(--cap-leading-co-cast); color: var(--cap-color-caption); }
  .cap-shell .cap-hx-capture { padding: var(--cap-space-panel-pad); }
}

/* 700–1023 (no T21-820 sheet): six across does not fit the 708 column — four across, three rows, the tablet tiles (owner
   2026-10-01), centred like the 1024 grid */
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-hx-grid { grid-template-columns: repeat(4, 119px); row-gap: var(--cap-space-band-close); }   /* geometry: T21's 119 columns — round 22 (owner): 56 between the three rows */
  .cap-shell .cap-hx-tile__dates { margin-top: calc(var(--cap-space-gap-3) - var(--cap-space-sm)); }   /* round 22 (owner): the dates 6 under the sign's name (the tile's own gap is 8) */
  /* round 22 (owner): the poster box keeps its eyebrow on one line and drops the frame swatches, "Frame options" and "Sizes to suit the wall" */
  .cap-shell .cap-hx-promo .cap-eyebrow { white-space: nowrap; }
  .cap-shell .cap-hx-promo__spec { display: none; }
}
/* round 22 (owner): below 820 the 340 photo left the copy 178 wide — the button stuck out of it — so the photo takes 40% */
@media (min-width: 700px) and (max-width: 819px) {
  .cap-shell .cap-hx-promo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .cap-shell .cap-hx-promo__img { min-height: 0; }
}

/* ─── < 700 · the mobile sheet (1c) ────────────────────────── */
@media (max-width: 699px) {
  .cap-shell .cap-hx-hub__hero { gap: var(--cap-space-gap-7); padding-bottom: var(--cap-space-sm); }
  .cap-shell .cap-hx-hub__h1 { max-width: none; line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell .cap-hx-hub__lede { color: var(--cap-color-text); font-size: var(--cap-type-base); font-weight: 400; }
  /* 1c (28 Sep): grid 20 under the hero; name + dates on the face's own line box; dates 11 / .14em caps in the caption grey */
  .cap-shell .cap-hx-grid { margin-top: var(--cap-space-panel-pad); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-space-gap-5) 0; }
  .cap-shell .cap-hx-tile { padding: var(--cap-space-md) var(--cap-space-gap-6); gap: var(--cap-space-gap-3); }
  .cap-shell .cap-hx-tile__glyph { width: 48px; height: 48px; }
  .cap-shell .cap-hx-tile__name { font-weight: 500; font-size: var(--cap-type-h3-card); letter-spacing: var(--cap-track-name); margin-top: var(--cap-space-xs); line-height: normal; }
  .cap-shell .cap-hx-tile__dates { font-size: var(--cap-mp-type-hx-meta); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-caption); line-height: normal; }
  /* not on the phone sheet: the poster promo and the reading card */
  .cap-shell .cap-hx-hub__poster, .cap-shell .cap-hx-reading { display: none; }
  .cap-shell .cap-hx-hub__two { margin-top: calc(var(--cap-space-lg) + var(--cap-space-sm)); gap: 0; }   /* 1c: the grid's 8 foot + 24 */
  /* the two widgets as the sheet's compact tiles: icon 30 tall, "Daily tarot →", 14 px pads */
  .cap-shell .cap-hx-widgets { flex-direction: row; gap: var(--cap-space-gap-5); }
  .cap-shell .cap-hx-widget { flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-3); padding: var(--cap-space-card-pad); }
  .cap-shell .cap-hx-widget__icon svg { height: calc(19.4px * 346.37 / 220.49); }
  .cap-shell .cap-hx-widget__title { line-height: normal; }
  .cap-shell .cap-hx-widget__t-d, .cap-shell .cap-hx-widget__copy .cap-lede, .cap-shell .cap-hx-widget__free { display: none; }
  .cap-shell .cap-hx-widget__t-m { display: inline; }
  .cap-shell .cap-hx-hub__capture { margin-top: var(--cap-space-lg); padding-bottom: var(--cap-space-lg); }
  /* the band on a phone: NO SHEET YET (owner 2026-09-26) — the 1c layout it had (pill + Go on one row, 12 between rows,
     8 between pill and Go); only the headline shows where the 1c blurb was, because the cusp answer is written there */
  .cap-shell .cap-hx-capture { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-hx-title.cap-hx-capture__title { margin-top: var(--cap-space-gap-6); line-height: var(--cap-leading-serif-title); letter-spacing: var(--cap-track-tile); }
  .cap-shell .cap-hx-capture__form { align-self: stretch; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cap-space-sm) var(--cap-space-gap-5); margin-top: var(--cap-space-gap-8); }
  /* 1c-2 D-band-3 (28 Sep): the headline's links read as text; two 44 chips, then the free-chart link row (44 tap, 6 under
     the chips, 4 above the pill — the sheet's −6 / −12 margins inside its 12 gap) */
  .cap-shell .is-cusp .cap-hx-capture__sign { text-decoration: none; }
  .cap-shell .is-cusp .cap-hx-capture__free { display: none; }
  .cap-shell .cap-hx-capture__more { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--cap-space-gap-6); }
  .cap-shell .cap-hx-capture__chips { display: flex; gap: var(--cap-space-gap-5); }
  .cap-shell .cap-hx-capture__chip { min-height: var(--cap-tap-min); padding: 0 var(--cap-mp-chip-x); box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: var(--cap-border-hairline) solid var(--cap-color-line-emphasis); border-radius: var(--cap-radius-pill); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-btn); text-transform: uppercase; color: var(--cap-color-text); text-decoration: none; white-space: nowrap; }
  @media (hover: hover) { .cap-shell .cap-hx-capture__chip:hover { background: var(--cap-color-text); border-color: var(--cap-color-text); color: var(--cap-color-on-ink); } }
  .cap-shell .cap-hx-capture__cast { min-height: var(--cap-tap-min); display: flex; align-items: center; margin-top: var(--cap-space-gap-3); text-decoration: none; }
  .cap-shell .cap-hx-capture__cast span { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-mp-type-hx-meta); letter-spacing: var(--cap-track-btn); text-transform: uppercase; color: var(--cap-color-text); border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); padding-bottom: var(--cap-mp-hx-link-pad); white-space: nowrap; line-height: normal; }
  @media (hover: hover) { .cap-shell .cap-hx-capture__cast:hover span { color: var(--cap-color-primary); } }
  .cap-shell .is-cusp .cap-hx-capture__form { margin-top: var(--cap-space-xs); }
  .cap-shell .cap-hx-capture__field { flex: 1; width: auto; }
}

/* sweep 3 (owner review 2026-09-23): D3's capture band → page end is 80 on desktop (the phone keeps its own) */
@media (min-width: 700px) { .cap-shell .cap-hx-hub__capture { padding-bottom: var(--cap-space-page-end); } }

/* the field-attached "Go →": the D3-Hub-band sheet (26 Sep) draws it as a Large (15 px, .16em), stretched flush to its 48 px field */
.cap-shell .cap-hx-capture__form .cap-btn { align-self: stretch; padding-top: 0; padding-bottom: 0; }
/* round 34 (owner 2026-10-06): below 360 the pill takes the full width and Go sits under it, full width, the field's height —
   at 320 the pill was 167 wide and its ✕ sat on the year */
@media (max-width: 359px) {
  .cap-shell .cap-hx-capture__form { grid-template-columns: minmax(0, 1fr); }
  .cap-shell .cap-hx-capture__form .cap-hx-capture__go { width: 100%; min-height: var(--cap-space-field-h); padding-left: var(--cap-space-md); padding-right: var(--cap-space-md); }
}

/* 700–1023 (owner 2026-10-01): the poster card's copy column is 286 wide and "Frame options | Sizes to suit the wall" needs 411 —
   the two items STACK with no divider (swatches + "Frame options", then "Sizes to suit the wall"); from 1024 they share a line */
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-hx-promo__sep { display: none; }
  .cap-shell .cap-hx-promo__spec > .cap-meta:last-child { flex-basis: 100%; }
  .cap-shell .cap-hx-promo__buy { flex-direction: column-reverse; align-items: flex-start; }   /* the button (198) and FROM $39 (84) need more than 286: the price under the button */
}