/* ============================================================
 * get-your-reading.css — the money page /birth-chart-reading/ (the 23 Sep sheets:
 * desktop D4 "product-page hero", mobile 1l; no tablet sheet — 820 takes the
 * phone's order at desktop values). Built by src/deploy/get-your-reading.php;
 * the hero, the sample carousel and the buy bar by Capriastro_Money_Page.
 *
 * D4 = a PRODUCT PAGE: the gallery left (~60 %: the ink carousel panel, 480 × 622
 * slides, arrows either side, dots · counter · caption, the pulled paragraph) and
 * the buy column right (440, the one rail width, 80 between, sticky at 24) with
 * eyebrow · H1 38 · lede · four ✦ lines · the price line · the form (its head, then the
 * card of cells). Below the carousel, in the left column (760): What's inside · the
 * contract panel · Not sure yet? · Questions ("How it works" removed, D4 27 Sep).
 * 1l stacks: copy (centred, the cover thumb, the CTA) · the ink band "Read a real
 * one first." full-bleed · What's inside · contract · the form (head + card)
 * · Not sure yet? · Questions · the sticky buy bar.
 *
 * THE GRID: the page container holds the blocks in the PHONE's order; the Elementor
 * widget wrappers are `display: contents`, so on desktop the blocks themselves are
 * placed by grid column/row. Every selector is prefixed `.cap-gyr` (the page
 * container, which also carries `cap-shell`); rules that must outrank a component
 * use `.cap-shell.cap-gyr …`. Token-only.
 * ============================================================ */

/* ─── page frame + the grid ───────────────────────────────── */
.cap-shell.cap-gyr { max-width: var(--cap-page-max); margin-left: auto; margin-right: auto; padding: var(--cap-space-after-header) var(--cap-page-x) var(--cap-space-hero-open); gap: 0; box-sizing: border-box; width: 100%; }
.cap-shell.cap-gyr > .elementor-element, .cap-shell.cap-gyr > .elementor-element > .elementor-widget-container { display: contents; }
.cap-shell.cap-gyr .elementor-widget { margin-bottom: 0; }
.cap-shell.cap-gyr { display: grid; grid-template-columns: minmax(0, 1fr) var(--cap-rail); column-gap: var(--cap-gutter-rail-product); row-gap: 0; align-items: start; }
.cap-gyr .cap-gyr__samples { grid-column: 1; grid-row: 1 / span 2; }
.cap-gyr .cap-gyr__copy { grid-column: 2; grid-row: 1; }
.cap-gyr .cap-gyr__rail { grid-column: 2; grid-row: 2 / span 6; position: sticky; top: var(--cap-rail-top, var(--cap-gutter)); display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-gyr .cap-gyr__inside, .cap-gyr .cap-gyr__contract, .cap-gyr .cap-gyr__notsure, .cap-gyr .cap-gyr__faq { grid-column: 1; max-width: 760px; width: 100%; }
/* "Not sure yet?" (D4, owner 2026-09-25; the phone too, replacing the rail's "Not ready yet?" card): the ink box before the
   Questions — the natal-chart icon in the pale violet, the heading on ink, the italic line, the cream pill. Desktop: the
   icon beside the copy; below 1280 the icon sits on top and the box runs the column's full width. */
.cap-gyr .cap-gyr__notsure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-lg); background: var(--cap-color-text); padding: var(--cap-space-lg); box-sizing: border-box; margin-top: var(--cap-space-primary-air); }
.cap-gyr .cap-gyr__notsure-icon { display: block; width: var(--cap-notsure-icon); height: var(--cap-notsure-icon); background: var(--cap-color-primary-pale); -webkit-mask: url('../img/natal-chart-icon.svg') center / contain no-repeat; mask: url('../img/natal-chart-icon.svg') center / contain no-repeat; }
.cap-gyr .cap-gyr__notsure-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-5); }
.cap-shell.cap-gyr .cap-gyr__notsure-title { margin: 0; font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); }
.cap-shell.cap-gyr .cap-gyr__notsure-lede { margin: 0; font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-section); line-height: var(--cap-leading-data); color: var(--cap-color-on-ink-3); }
.cap-shell.cap-gyr .cap-gyr__notsure-link { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--cap-space-gap-2); padding: var(--cap-notsure-pill-y) var(--cap-notsure-pill-x); border-radius: var(--cap-radius-pill); background: var(--cap-color-bg); color: var(--cap-color-text); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-btn-small); line-height: var(--cap-notsure-pill-lh); letter-spacing: var(--cap-track-btn); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--cap-ease-fast), color var(--cap-ease-fast); }   /* the cream pill (D4 · 1l, 27 Sep) */
@media (hover: hover) { .cap-shell.cap-gyr .cap-gyr__notsure-link:hover { background: var(--cap-color-primary); color: var(--cap-color-surface); } }
@media (min-width: 1280px) {
  .cap-gyr .cap-gyr__notsure { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 var(--cap-notsure-gap); padding: var(--cap-space-lg); margin-top: var(--cap-space-notsure-top); }   /* 27 Sep: 32 all round, the 100 icon, 28 to the copy */
  .cap-shell.cap-gyr .cap-gyr__notsure-lede { font-size: var(--cap-type-lede-box); line-height: var(--cap-leading-lede); }
  .cap-shell.cap-gyr .cap-gyr__notsure-link { margin-top: var(--cap-space-gap-3); }
  .cap-shell.cap-gyr .cap-gyr__faq { margin-top: var(--cap-space-band-close); }   /* the box sits above it */
}
@media (max-width: 699px) {
  /* 1l (27 Sep): the raised ink box with its violet edge, 20 all round, 10 between; the icon 2 in; the heading 19 / 1.25,
     the line 15 / 1.65 */
  .cap-gyr .cap-gyr__notsure { background: var(--cap-color-ink-raised); border: var(--cap-border-hairline) solid var(--cap-color-line-halo); padding: var(--cap-space-panel-pad); gap: var(--cap-space-gap-5); }
  .cap-gyr .cap-gyr__notsure-icon { margin: var(--cap-mp-gyr-notsure-icon-y) 0; }
  .cap-gyr .cap-gyr__notsure-copy { display: contents; }
  .cap-shell.cap-gyr .cap-gyr__notsure-title { font-size: var(--cap-mp-type-gyr-notsure-title); line-height: var(--cap-mp-leading-gyr-notsure-title); letter-spacing: normal; }
  .cap-shell.cap-gyr .cap-gyr__notsure-lede { font-size: var(--cap-mp-type-gyr-notsure-lede); line-height: var(--cap-mp-leading-sub); }
}
.cap-gyr .cap-gyr__bar { display: none; }

/* ─── the buy column ──────────────────────────────────────── */
.cap-gyr .cap-gyr__copy { display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-gyr .cap-gyr__h1 { font-family: var(--cap-font-display); font-weight: 800; font-size: var(--cap-type-h2); line-height: var(--cap-leading-display); letter-spacing: var(--cap-track-display); margin: 0; color: var(--cap-color-text); }
.cap-shell.cap-gyr .cap-gyr__lede { margin: 0; }
.cap-gyr .cap-gyr__thumb { display: none; }
.cap-gyr .cap-gyr__lines { list-style: none; margin: var(--cap-space-gap-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--cap-space-gap-5); font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-read); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-data); color: var(--cap-color-text-body); }
.cap-gyr .cap-gyr__lines li { display: flex; gap: var(--cap-space-gap-5); }
.cap-gyr .cap-gyr__star { color: var(--cap-color-primary); flex: none; }
.cap-shell.cap-gyr .cap-gyr__cta { display: none; }   /* the phone's hero button; the desktop rail buys through the form */

/* the form card (D4: white, 16 radius, 24 32 32) */
.cap-gyr .cap-gyr__card { background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-md); padding: var(--cap-gutter) var(--cap-space-lg) var(--cap-space-lg); margin-top: var(--cap-space-lg); display: flex; flex-direction: column; gap: var(--cap-space-gap-6); }
/* the form's head (D4 + 1l, 27 Sep): eyebrow · heading · lede, 10 between — no price (the hero's price line carries it on desktop) */
.cap-gyr .cap-gyr__form-head { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); }
.cap-shell.cap-gyr .cap-gyr__form-title { margin: 0; font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-form-head); line-height: var(--cap-leading-form-head); letter-spacing: var(--cap-track-form-head); color: var(--cap-color-text); text-wrap: balance; }
.cap-shell.cap-gyr .cap-gyr__form-lede { margin: 0; font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-form-lede); line-height: var(--cap-leading-form-lede); color: var(--cap-color-text-secondary); text-wrap: pretty; }
/* the price line under the hero's four lines (D4, desktop only): the eyebrow-style label left, the price right, a hairline under */
.cap-gyr .cap-gyr__price-line { display: none; }
.cap-shell.cap-gyr .cap-gyr__card .cap-form-panel { background: none; border: 0; border-radius: 0; padding: 0; max-width: none; }
.cap-shell.cap-gyr .cap-gyr__card .cap-purchase { max-width: none; }
.cap-shell.cap-gyr .cap-gyr__card .cap-purchase__badge { display: none; }   /* the hero's price line and the button carry the price; the phone's note is the caption below */
.cap-gyr .cap-gyr__form-note { display: none; text-align: center; }
/* the card's field hints read in sentence case on the sheets (D4 / 1l), not the component's caps */
.cap-shell.cap-gyr .cap-gyr__card .cap-hint { text-transform: none; letter-spacing: var(--cap-track-ui); font-size: var(--cap-type-small); font-weight: 400; line-height: var(--cap-leading-lede); }

/* ─── the gallery: the ink carousel panel ─────────────────── */
.cap-gyr .cap-gyr__samples { background: var(--cap-color-text); color: var(--cap-color-on-ink); padding: var(--cap-space-lg) 0 var(--cap-space-panel-pad); display: flex; flex-direction: column; align-items: center; gap: var(--cap-gutter); position: relative; }
.cap-gyr .cap-gyr__samples-head { display: none; }
.cap-gyr .cap-gyr__stage { display: flex; align-items: center; justify-content: center; gap: var(--cap-space-md); width: 100%; min-width: 0; }
.cap-shell.cap-gyr .cap-gyr__arrow { width: 44px; height: 44px; flex: none; border-radius: var(--cap-radius-pill); border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-3); background: none; color: var(--cap-color-on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-size: var(--cap-type-section); cursor: pointer; padding: 0; transition: background var(--cap-ease-fast), border-color var(--cap-ease-fast); }
.cap-shell.cap-gyr .cap-gyr__arrow svg { display: block; }   /* round 26 → 27 (owner): the site's one drawn arrow (Capriastro_Symbols), centred in its ring by geometry */
@media (hover: hover) { .cap-shell.cap-gyr .cap-gyr__arrow:not([aria-disabled="true"]):hover { background: var(--cap-color-primary); border-color: var(--cap-color-primary); color: var(--cap-color-surface); } }
.cap-shell.cap-gyr .cap-gyr__arrow[aria-disabled="true"] { opacity: var(--cap-opacity-disabled); cursor: not-allowed; }   /* the arrow at an end (round 36 follow-up): the site's disabled look */
.cap-gyr .cap-gyr__viewport { width: 480px; max-width: 100%; min-width: 0; overflow: hidden; contain: inline-size; touch-action: pan-y pinch-zoom; }
/* THE SLIDES NEVER WIDEN THE PAGE (round 35, owner — the page slid sideways on her iPhone): (1) the panel may shrink below
   its contents (min-width 0 — as an Elementor column item it could not, and nine page-wide slides then pushed the panel,
   and the page, out: measured 655 at 320 with the containment off); (2) the track is exactly its frame's width — the
   slides overflow IT, never size it; (3) the frame keeps its containment and clips. TOUCH (round 36): "pan-y pinch-zoom"
   is read by Safari since iOS 13 (MDN compatibility data — round 35 wrongly said Safari drops it, and added a second
   line and overflow: clip; both are gone, the frame is round 34's again). A sideways swipe is the script's: money.js
   reads it from touch events and holds the page still under it. */
.cap-gyr .cap-gyr__samples { min-width: 0; max-width: 100vw; overflow-x: clip; }
.cap-gyr .cap-gyr__track { display: flex; width: 100%; min-width: 0; transition: transform var(--cap-ease-shuffle); }
.cap-gyr .cap-gyr__slide { min-width: 100%; width: 100%; flex: none; box-sizing: border-box; display: flex; justify-content: center; }
.cap-gyr .cap-gyr__slide.is-far { visibility: hidden; }   /* round 26: a page more than one away from the one on show is not drawn (money.js) */
.cap-shell.cap-gyr .cap-gyr__page { display: block; width: 100%; min-width: 0; max-width: 100%; flex: 0 1 100%; aspect-ratio: 480 / 622; background: var(--cap-color-bg); border: 0; border-radius: var(--cap-radius-card-face-xs); box-shadow: var(--cap-shadow-sheet); overflow: hidden; padding: 0; cursor: zoom-in; }
.cap-shell.cap-gyr .cap-gyr__page img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cap-gyr .cap-gyr__page picture, .cap-gyr .cap-gyr__thumb picture { display: contents; }   /* the <picture> wrapper (WebP + JPEG) is transparent to the layout: the img stays the page's box */
.cap-gyr .cap-gyr__locked { width: 100%; aspect-ratio: 480 / 622; box-sizing: border-box; border: var(--cap-border-hairline) solid var(--cap-color-halo); background: var(--cap-color-line-on-ink); padding: var(--cap-space-panel-pad); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--cap-space-section-head-below); }
.cap-gyr .cap-gyr__locked-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-product-tile); line-height: var(--cap-leading-ui); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); }
.cap-shell.cap-gyr .cap-gyr__locked-cta { display: inline-flex; }   /* the end card carries the button at every width (owner 2026-09-29: dark panel, "Now yours.", the button) */
.cap-gyr .cap-gyr__nav { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-7); }
.cap-gyr .cap-gyr__nav > .cap-gyr__dots { display: flex; align-items: center; gap: var(--cap-space-sm); }
.cap-shell.cap-gyr .cap-gyr__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--cap-radius-pill); background: var(--cap-color-line-on-ink-3); cursor: pointer; transition: width var(--cap-ease), background var(--cap-ease); }
.cap-shell.cap-gyr .cap-gyr__dot.is-on { width: 22px; background: var(--cap-color-primary); }
@media (hover: hover) { .cap-shell.cap-gyr .cap-gyr__dot:not(.is-on):hover { background: var(--cap-color-line-on-ink-hover); } }   /* round 23 rule 12: a gallery control shows its hover by its edge / fill lightening on ink (the dots had none) */
.cap-shell.cap-gyr .cap-gyr__dot:focus-visible { outline-offset: var(--cap-focus-ring-offset-dot); }   /* D4b: the dots' ring sits 3px out; the current dot keeps its pill inside it */
/* the dots' INVISIBLE tap area (Lighthouse 2026-09-26): nothing drawn — each reaches half the gap to its neighbours (they meet,
   never overlap) and up to 44 tall, never further than the nav's own gap into the row above or below */
.cap-shell.cap-gyr .cap-gyr__dot { position: relative; }
.cap-shell.cap-gyr .cap-gyr__dot::after { content: ""; position: absolute; left: calc(var(--cap-space-sm) / -2); right: calc(var(--cap-space-sm) / -2); top: max(calc((100% - var(--cap-tap-min)) / 2), calc(-1 * var(--cap-space-gap-7))); bottom: max(calc((100% - var(--cap-tap-min)) / 2), calc(-1 * var(--cap-space-gap-7))); }
.cap-gyr .cap-gyr__nav-row { display: flex; align-items: center; gap: var(--cap-space-md); }
.cap-gyr .cap-gyr__counter { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-on-ink-muted); }
.cap-gyr .cap-gyr__nav { flex-direction: row; gap: var(--cap-space-md); }
.cap-gyr .cap-gyr__caption { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); color: var(--cap-color-on-ink-3); margin: calc(var(--cap-space-gap-5) * -1) 0 0; text-align: center; }
.cap-gyr .cap-gyr__swipe { display: none; color: var(--cap-color-on-ink-muted); }
.cap-gyr .cap-gyr__quote { width: 480px; max-width: 100%; border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); padding-top: var(--cap-gutter); margin-top: var(--cap-space-sm); display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-6); text-align: center; }
.cap-gyr .cap-gyr__quote p { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-lede); color: var(--cap-color-on-ink-heading); margin: 0; text-wrap: pretty; }
.cap-gyr .cap-gyr__quote-by { color: var(--cap-color-on-ink-muted); }
/* the lightbox */
.cap-gyr .cap-gyr__zoom { position: fixed; inset: 0; z-index: 9500; background: var(--cap-color-scrim); display: flex; align-items: center; justify-content: center; padding: var(--cap-space-lg); cursor: zoom-out; }
.cap-gyr .cap-gyr__zoom[hidden] { display: none; }
.cap-gyr .cap-gyr__zoom { overflow: hidden; }
.cap-gyr .cap-gyr__zoom img { max-width: 100%; max-height: 100%; box-shadow: var(--cap-shadow-modal); background: var(--cap-color-bg); transform-origin: 0 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }   /* money.js zooms it: pinch · drag · double-tap · wheel (owner 2026-09-29) */
@media (max-width: 699px) { .cap-gyr .cap-gyr__zoom { padding: 0; } }   /* a phone gives the page the whole width; money.js then opens it with the text column across the screen */
.cap-shell.cap-gyr .cap-gyr__zoom-close { z-index: 1; position: absolute; top: var(--cap-space-md); right: var(--cap-space-md); width: var(--cap-tap-min); height: var(--cap-tap-min); display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: none; color: var(--cap-color-on-ink); font-size: var(--cap-type-lg); line-height: 1; cursor: pointer; }   /* the ✕ alone, no circle (owner 2026-09-29); the 44 × 44 box stays its tap area */
html.cap-gyr-zoomed { overflow: hidden; }
html.cap-gyr-zoomed .cap-header-wrap { visibility: hidden; }   /* the header's menu lines sat right behind the bare ✕ and showed through the scrim */

/* ─── What's inside ───────────────────────────────────────── */
.cap-gyr .cap-gyr__inside { margin-top: var(--cap-space-hero-open); }   /* D4: the hero → What's inside is 64 and no rule (the rule + 24 were ours) */
.cap-shell.cap-gyr .cap-gyr__inside-head { display: block; margin: 0 0 var(--cap-gutter); }
.cap-gyr .cap-gyr__chapter-list { list-style: none; margin: 0; padding: 0; }
.cap-gyr .cap-gyr__chapter { display: flex; gap: var(--cap-space-gap-7); align-items: flex-start; border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding: var(--cap-space-row-pad) 0; }
.cap-gyr .cap-gyr__chapter-no { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-numeral); line-height: var(--cap-leading-one); color: var(--cap-color-primary); flex: none; width: 52px; }
.cap-gyr .cap-gyr__chapter-body { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); }
.cap-gyr .cap-gyr__chapter-title { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-gyr .cap-gyr__chapter-desc { font-family: var(--cap-font-serif); font-size: var(--cap-type-faq-answer); line-height: var(--cap-leading-body); color: var(--cap-color-muted); }
.cap-gyr .cap-gyr__inside-plus { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); color: var(--cap-color-text-secondary); margin: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding-top: var(--cap-space-row-pad); }

/* ─── What this is / isn't ────────────────────────────────── */
.cap-gyr .cap-gyr__contract { margin-top: var(--cap-space-lg); background: var(--cap-color-bg-deep); padding: var(--cap-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-lg); }
.cap-gyr .cap-gyr__contract-col { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); }
.cap-gyr .cap-gyr__contract-col--not { border-left: var(--cap-border-hairline) solid var(--cap-color-line-emphasis); padding-left: var(--cap-space-lg); }
.cap-gyr .cap-gyr__contract-head { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-gyr .cap-gyr__contract-col--not .cap-gyr__contract-head { color: var(--cap-color-text-secondary); }
.cap-gyr .cap-gyr__contract-lines { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-nav); letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-data); color: var(--cap-color-text-body); }
.cap-gyr .cap-gyr__contract-col--not .cap-gyr__contract-lines { color: var(--cap-color-muted); }
.cap-gyr .cap-gyr__contract-lines i { font-style: normal; margin-right: var(--cap-space-sm); }


/* ─── Questions ─────────────────────────────────────────── */
.cap-shell.cap-gyr .cap-faq__a p { margin: 0; }
.cap-shell.cap-gyr .cap-faq__a p + p { margin-top: var(--cap-space-sm); }
.cap-shell.cap-gyr .cap-faq-q { color: var(--cap-color-text); }   /* the sheets' questions are ink (the component inherits the theme's grey) */
.cap-shell.cap-gyr .cap-faq__a a { color: var(--cap-color-primary); }   /* never the theme kit's link colour */
.cap-gyr .cap-gyr__faq { margin-top: var(--cap-space-hero-open); }
.cap-shell.cap-gyr .cap-gyr__faq-head { display: block; border-top: var(--cap-border-emphasis) solid var(--cap-color-line-emphasis); padding-top: var(--cap-gutter); margin: 0 0 var(--cap-space-gap-7); color: var(--cap-color-heading-quiet); }


/* ─── below 1280: one column in the phone's order (T5 at 700–1279, 1l under 700) ───── */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-gyr .cap-gyr__h1 { letter-spacing: var(--cap-track-display-mid); }   /* T5 (round 29): -0.022em at 38 */
}
@media (max-width: 1279px) {
  .cap-shell.cap-gyr { display: flex; flex-direction: column; align-items: stretch; padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); }
  .cap-gyr .cap-gyr__rail { position: static; width: 100%; max-width: none; }   /* the full content width below 1280 (owner 2026-09-30) */
  .cap-gyr .cap-gyr__inside, .cap-gyr .cap-gyr__contract, .cap-gyr .cap-gyr__notsure, .cap-gyr .cap-gyr__faq { max-width: none; }
  .cap-shell.cap-gyr .cap-gyr__cta { display: flex; max-width: var(--cap-col-form); }
  .cap-gyr .cap-gyr__samples { margin-top: var(--cap-space-primary-air); }
}

/* ─── < 700 · the mobile sheet (1l) ───────────────────────── */
@media (max-width: 699px) {
  .cap-shell.cap-gyr { padding: var(--cap-space-lg) var(--cap-page-x) var(--cap-space-lg); }
  /* the copy: centred, the cover thumb, the lines left-aligned, the full-width CTA */
  .cap-gyr .cap-gyr__copy { align-items: center; text-align: center; gap: var(--cap-space-gap-7); }
  .cap-shell.cap-gyr .cap-gyr__eyebrow::after { content: "\00a0\00a0✦"; }
  .cap-gyr .cap-gyr__h1 { font-size: var(--cap-type-xl); line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell.cap-gyr .cap-gyr__lede { font-size: var(--cap-type-base); line-height: var(--cap-leading-body); color: var(--cap-color-text-secondary); }
  .cap-gyr .cap-gyr__thumb { display: block; width: 132px; height: 172px; flex: none; background: var(--cap-color-bg-deep); overflow: hidden; box-shadow: var(--cap-shadow-lift-deep); margin-top: var(--cap-space-gap-3); }
  .cap-gyr .cap-gyr__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cap-gyr .cap-gyr__lines { width: 100%; text-align: left; margin-top: var(--cap-space-xs); gap: var(--cap-space-sm); font-size: var(--cap-type-small); line-height: var(--cap-leading-lede); color: var(--cap-color-text); }
  .cap-gyr .cap-gyr__lines li { gap: var(--cap-space-sm); }
  .cap-shell.cap-gyr .cap-gyr__cta { display: flex; width: 100%; max-width: none; margin-top: var(--cap-space-gap-3); box-shadow: var(--cap-shadow-cta); }
  /* the ink band, full-bleed: "Read a real one first." · the carousel (slides 438 tall, the edges tap) */
  .cap-gyr .cap-gyr__samples { margin: var(--cap-space-primary-air) calc(var(--cap-page-x) * -1) 0; padding: var(--cap-space-card-pad) 0 var(--cap-space-card-pad); gap: var(--cap-gutter); }
  .cap-gyr .cap-gyr__samples-head { display: block; font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-card-h2); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); margin: 0; padding: 0 var(--cap-page-x); text-align: center; }
  .cap-shell.cap-gyr .cap-gyr__arrow { display: none; }
  .cap-gyr .cap-gyr__viewport { width: 100%; }
  .cap-gyr .cap-gyr__slide { padding: 0 var(--cap-page-x); }   /* 1l (27 Sep): the page at the gutter; the tap zones reach 26 into it (money.js) */
  .cap-shell.cap-gyr .cap-gyr__page, .cap-gyr .cap-gyr__locked { aspect-ratio: 480 / 622; height: auto; border-radius: 0; box-shadow: none; }   /* the page in its letter proportion at every phone width (round 31, owner 2026-10-05): the fixed 438 was right only for 1l's 338-wide page — at 320 (280 wide) the picture was cut ~46 each side */
  .cap-gyr .cap-gyr__locked { padding: var(--cap-space-primary-air) var(--cap-page-x); gap: var(--cap-space-gap-7); }
  .cap-gyr .cap-gyr__locked-title { font-size: var(--cap-type-card-h2); line-height: var(--cap-leading-tight); }
  .cap-shell.cap-gyr .cap-gyr__locked-cta { display: inline-flex; margin-top: var(--cap-space-xs); }
  .cap-gyr .cap-gyr__nav { gap: var(--cap-space-gap-6); margin-top: calc(var(--cap-space-sm) * -1); }
  .cap-shell.cap-gyr .cap-gyr__dot { width: 6px; height: 6px; }
  .cap-shell.cap-gyr .cap-gyr__dot.is-on { width: 18px; }
  .cap-gyr .cap-gyr__caption { font-size: var(--cap-type-card-value); line-height: var(--cap-leading-small); padding: 0 var(--cap-page-x); margin-top: calc(var(--cap-space-gap-7) * -1); }
  .cap-gyr .cap-gyr__swipe { display: block; margin-top: calc(var(--cap-space-gap-7) * -1); }
  .cap-gyr .cap-gyr__quote { width: auto; margin: var(--cap-space-gap-5) var(--cap-page-x) 0; padding-top: var(--cap-space-section-head-below); gap: var(--cap-space-gap-5); }
  .cap-gyr .cap-gyr__quote p { font-size: var(--cap-type-read); }
  /* What's inside: the 17 label, 13 pads, small numerals */
  .cap-gyr .cap-gyr__inside { margin-top: var(--cap-space-primary-air); padding-top: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); }   /* 1l keeps its rule */
  .cap-shell.cap-gyr .cap-gyr__inside-head { margin: 0; padding: var(--cap-space-head-y) 0; }
  .cap-gyr .cap-gyr__chapter { gap: var(--cap-space-md); padding: var(--cap-space-head-y) 0; align-items: baseline; }
  .cap-gyr .cap-gyr__chapter-no { width: auto; font-size: var(--cap-type-base); }
  .cap-gyr .cap-gyr__chapter-body { gap: var(--cap-space-gap-2); }
  .cap-gyr .cap-gyr__chapter-title { font-size: var(--cap-type-base); letter-spacing: var(--cap-track-name); }
  .cap-gyr .cap-gyr__chapter-desc { font-size: var(--cap-type-card-value); line-height: var(--cap-leading-lede); }
  .cap-gyr .cap-gyr__inside-plus { font-size: var(--cap-type-card-value); line-height: var(--cap-leading-small); padding-top: var(--cap-space-gap-6); }
  /* the contract stacks, a rule between */
  .cap-gyr .cap-gyr__contract { margin-top: var(--cap-gutter); grid-template-columns: 1fr; gap: var(--cap-space-md); padding: var(--cap-space-panel-pad); }
  .cap-gyr .cap-gyr__contract-col--not { border-left: 0; padding-left: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-deep); padding-top: var(--cap-space-row-pad); }
  /* 1l (27 Sep): heads 13 on their own line box, both in ink; lines 15 / 1.45; "What it isn't" in the caption grey; 18 above
     the second head */
  .cap-gyr .cap-gyr__contract-head { font-size: var(--cap-mp-type-gyr-contract-head); line-height: normal; }
  .cap-gyr .cap-gyr__contract-col--not .cap-gyr__contract-head { color: var(--cap-color-text); }
  .cap-gyr .cap-gyr__contract-lines { font-size: var(--cap-mp-type-gyr-contract-line); }
  .cap-gyr .cap-gyr__contract-col--not .cap-gyr__contract-lines { color: var(--cap-color-caption); }
  .cap-gyr .cap-gyr__contract-col--not { padding-top: var(--cap-mp-gyr-contract-split); }
  /* the form card, then Questions */
  .cap-gyr .cap-gyr__card { margin-top: var(--cap-space-primary-air); padding: var(--cap-space-panel-pad); max-width: none; }   /* 1l: the form head 30 under the contract panel */
  .cap-gyr .cap-gyr__form-note { display: block; }
  .cap-gyr .cap-gyr__faq { margin-top: var(--cap-space-primary-air); }
  .cap-gyr .cap-gyr__rail { max-width: none; }
  .cap-gyr .cap-gyr__faq { padding-bottom: var(--cap-space-xl); }   /* room for the sticky bar (the closing line used to carry it) */
  /* the sticky buy bar (money.js shows it once the hero CTA has scrolled off) */
  .cap-gyr .cap-gyr__bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; align-items: center; gap: var(--cap-space-gap-6); padding: var(--cap-space-sm) var(--cap-page-x) calc(var(--cap-space-sm) + env(safe-area-inset-bottom)); background: var(--cap-color-bg); border-top: var(--cap-border-hairline) solid var(--cap-color-line); box-shadow: var(--cap-shadow-buybar); }   /* round 32 (owner 2026-10-06): 8 above and below the 40 button, plus the phone's own safe area only — at 12 / 16 the bar sat tall and merged with Safari's bottom bar */
  .cap-gyr .cap-gyr__bar[hidden] { display: none; }
  .cap-gyr .cap-gyr__bar-copy { display: flex; flex-direction: column; gap: var(--cap-space-gap-1); flex: 1; min-width: 0; }
  .cap-gyr .cap-gyr__bar-title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
  .cap-shell.cap-gyr .cap-gyr__bar .cap-btn { flex: none; }
}

/* D4, re-measured against the updated sheet (2026-09-24; desktop 1280+): a chapter row is 100.7 on the sheet (was 105) —
   the title's own line box is 1.5 (it inherited 1.7). */
@media (min-width: 1280px) {
  .cap-shell .cap-gyr__chapter-title { line-height: var(--cap-leading-lede); }
  /* the right column's rhythm (27 Sep sheet): 24 between eyebrow · h1 · lede · the four lines, the lede on 1.5 */
  .cap-shell .cap-gyr__copy { gap: var(--cap-gutter); }
  .cap-shell .cap-gyr__lede { line-height: var(--cap-leading-lede); }
  /* the carousel (27 Sep): the counter and the caption on their own line boxes ("normal"), the caption centred on one line,
     the quote 24 + 8 under it, its credit on a "normal" line — the panel lands at the sheet's 1088 */
  .cap-gyr .cap-gyr__counter, .cap-gyr .cap-gyr__caption, .cap-gyr .cap-gyr__quote-by { line-height: normal; }
  .cap-gyr .cap-gyr__caption { text-align: center; white-space: nowrap; }
  /* "What's inside" (27 Sep): no rule above it; its heading 40 under the ink panel (the column's 32 + 8) */
  .cap-shell .cap-gyr__inside { margin-top: calc(var(--cap-space-lg) + var(--cap-space-sm)); border-top: 0; padding-top: 0; }
  /* the contract panel 56 under the Shape-of-It line (24 + 32), its heads on a "normal" line; "Not sure yet?" 64 under it */
  .cap-gyr .cap-gyr__contract { margin-top: calc(var(--cap-gutter) + var(--cap-space-lg)); }
  .cap-gyr .cap-gyr__contract-head { line-height: normal; }
  /* D4, 27 Sep: the price line (4 under the lines, 12 above its hairline); the form without a box around it — its head 56
     under the price line (the rail's 32 + 24), the card of cells 24 under the lede */
  .cap-shell.cap-gyr .cap-gyr__price-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cap-space-md); margin: calc(var(--cap-space-xs) - var(--cap-gutter)) 0 0; padding: var(--cap-gutter) 0 var(--cap-space-gap-6); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-gyr .cap-gyr__price-label { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; line-height: normal; color: var(--cap-color-caption); white-space: nowrap; }
  .cap-gyr .cap-gyr__price-amount { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: 1; letter-spacing: var(--cap-track-tight); color: var(--cap-color-text); white-space: nowrap; }
  .cap-shell.cap-gyr .cap-gyr__card { background: none; border: 0; border-radius: 0; padding: 0; margin-top: calc(var(--cap-space-lg) + var(--cap-gutter)); }
}

/* EVERY WIDTH TAKES THE SAME CARD (1l, CD 27 Sep; the tablet T5, 1 Oct 2026 — its separate pill form retired): the rules below
   serve desktop (D4), the tablet and the phone; every size in them is a {desktop, mobile} token pair, so the phone reads its own
   11 · .14em labels, 11 / 18 cells, 8 label → value, 13 / 1.5 hints. The phone's own differences follow this block. */
@media all {
  /* ─── THE ORDER FORM (D4, 26 Sep — CD's field-label rules §1, measured on the sheet at 2×) ─────────────────────────
     ONE white card (16 corners, 1 px line-strong), a cell per field, 1 px dividers: name (its hint inside) · date | time
     (1 : 1 — CD 27 Sep) · place (✕ when filled) · email. The label is IN the cell above the value: 600 · 13 · .1em · caps · quiet grey;
     18 cell padding; 12 label → value; the value 17 on a tight line — a cell is 81 tall. The whole cell is the <label>.
     Under the card: the time helper (14 / 1.5, set in 20), then the button. */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard { display: block; background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-field-empty); border-radius: var(--cap-radius-field-card); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard > *, .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__form > * { order: 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard > * + * { border-top: var(--cap-border-hairline) solid var(--cap-color-field-empty); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard > :first-child { border-radius: var(--cap-radius-field-card) var(--cap-radius-field-card) 0 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard > :last-child { border-radius: 0 0 var(--cap-radius-field-card) var(--cap-radius-field-card); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field { position: relative; margin: 0; padding: var(--cap-space-field-cell-y) var(--cap-space-field-cell-x); display: flex; flex-direction: column; gap: var(--cap-space-field-label-gap); cursor: text; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-birth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-birth > .cap-field + .cap-field { border-left: var(--cap-border-hairline) solid var(--cap-color-field-empty); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field:focus-within { outline: var(--cap-border-hairline) solid var(--cap-color-field-focus); outline-offset: calc(-1 * var(--cap-border-hairline)); z-index: 1; }   /* focused: 1 px ink, one field at a time */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field:has([aria-invalid="true"]) { outline: var(--cap-border-hairline) solid var(--cap-color-error); outline-offset: calc(-1 * var(--cap-border-hairline)); z-index: 1; }   /* error: the field and its label turn error red */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field:has(.cap-places:not([hidden])) { z-index: 40; }   /* round 22 D2: an OPEN city list over the ⓘ (z 1) — this page's focused-cell z 1 outranked the shared rule in components.css */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field:has([aria-invalid="true"]) > .cap-field__label { color: var(--cap-color-error); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard > .cap-field:first-child:focus-within { border-radius: var(--cap-radius-field-card) var(--cap-radius-field-card) 0 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field__label { margin: 0; padding: 0; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-field-label); letter-spacing: var(--cap-track-field-label); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-heading-quiet); white-space: nowrap; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard :is(.cap-birth__date, .cap-birth__time):has(.cap-parts) > .cap-field__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-input, .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-purchase__place-box > .cap-input { width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-input); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-tight); height: calc(var(--cap-type-input) * var(--cap-leading-tight)); margin: calc(var(--cap-type-input) * (1 - var(--cap-leading-tight)) / 2) 0; color: var(--cap-color-text); }   /* the value line counts 17 in the cell (the sheet), but the box keeps its 1.2 line so a descender (Rome, Italy) is never clipped */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field :is(.cap-input, .cap-birth__part):focus { outline: 0; box-shadow: none; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-input--native { height: var(--cap-type-input); }
  /* the typed date and time parts sit in their cell as plain text: the cell is the field, so the parts' own pill goes */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts, .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts.is-filled, .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts:focus-within { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts { height: var(--cap-type-input); align-items: center; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts .cap-birth__part { padding-top: 0; padding-bottom: 0; height: var(--cap-type-input); }   /* the month select included — its own box was 20 */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-parts :is(.cap-birth__part, .cap-birth__colon, .cap-birth__slash, .cap-birth__ap) { font-size: var(--cap-type-input); line-height: 1; }
  /* the name's hint sits inside its cell, 8 under the value (the sheet) */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-hint { margin: calc(var(--cap-space-sm) - var(--cap-space-field-label-gap)) 0 0; padding: 0; font-size: var(--cap-type-hint-long); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-lede); color: var(--cap-color-caption); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__place .cap-hint,
  .cap-shell.cap-gyr .cap-gyr__card .cap-field:has(#cap-p-email) > .cap-hint { display: none; }
  /* the place: the ✕ only when filled, its own 44 × 44 target centred on the icon at the value line's right end */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-purchase__place-box .cap-input { padding-right: var(--cap-space-lg); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__clear { display: flex; right: calc(-1 * (var(--cap-tap-min) - var(--cap-space-md)) / 2); color: var(--cap-color-caption); }   /* the 11 px ✕ ends on the value's right inset, in caption grey (the sheet) */
  /* under the card: the time helper, set in by the cells' inset; then the button */
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__time-hint { margin: calc(var(--cap-space-gap-5) - var(--cap-space-gap-6)) 0 0; padding: 0 var(--cap-space-cell-x); font-size: var(--cap-type-hint-long); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-lede); color: var(--cap-color-caption); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__pop { margin-inline: calc(-1 * var(--cap-space-cell-x)); }   /* the tip card's edges = the form's (the line is inset, the card is not) */
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__submit { box-shadow: none; margin-top: var(--cap-space-gap-3); }   /* the card → helper 10, the helper → button 18 (the sheet) */
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__form { gap: var(--cap-space-gap-6); }
  .cap-gyr .cap-gyr__card { gap: var(--cap-gutter); }
}

/* ─── the phone's order form (1l, measured on CD's 27 Sep markup at 388) ───────────────────────────────────────────
   No white box around it: the head row, then the card of cells on the page ground (20 under the head), date | time 1 : 1,
   the alert box 12 under the card when a field fails, the time helper 10 under it (set in by the cells' 18), "PDF · No
   account needed" 20 under the helper (money.js moves it into the form, before the button), the button 12 under that. */
@media (max-width: 699px) {
  .cap-shell.cap-gyr .cap-gyr__card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; gap: calc(var(--cap-space-gap-5) * 2); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__form { gap: 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase .cap-purchase__form > .cap-purchase__error.cap-alert { order: 0; margin-top: var(--cap-space-gap-6); }   /* under the card, as on desktop (purchase.css orders the rest) */
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__time-hint { margin: var(--cap-space-gap-5) 0 0; padding: 0 var(--cap-space-field-cell-x); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__pop { margin-inline: calc(-1 * var(--cap-space-field-cell-x)); }   /* the tip card's edges = the form's */
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__form > .cap-gyr__form-note { display: block; margin: calc(var(--cap-space-gap-5) * 2) 0 0; line-height: normal; letter-spacing: var(--cap-track-feature); color: var(--cap-color-caption); }
  /* the value line is 20 (17 on a 1.2 line) in every cell — the native date / time controls included (a cell is 64) — and the name's hint sits 4 under it */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-input, .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-purchase__place-box > .cap-input { margin: 0; }   /* desktop pulls the line in to 17; the phone keeps 20 */
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-input--native { height: calc(var(--cap-type-input) * var(--cap-leading-tight)); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-hint { margin-top: calc(var(--cap-space-gap-2) - var(--cap-space-field-label-gap)); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-purchase__submit { margin-top: var(--cap-space-gap-6); }
}

/* the ✕ in a filled place field (D4). No ✦ in the time cell at any width (owner 2026-09-27): the helper line under the form explains the minute. */
.cap-shell .cap-purchase__place-box { position: relative; }
.cap-shell .cap-purchase__clear { display: none; position: absolute; right: calc(var(--cap-space-gap-7) - (var(--cap-tap-min) - var(--cap-space-lg)) / 2); top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; width: var(--cap-tap-min); height: var(--cap-tap-min); padding: 0; border: 0; background: transparent; color: var(--cap-color-muted); cursor: pointer; border-radius: var(--cap-radius-pill); }   /* a 44 × 44 target on the same icon spot (owner 2026-09-26) */
 .cap-shell .cap-purchase__clear:focus-visible { background: transparent; color: var(--cap-color-text); }   /* round 22: keyboard focus only */
@media (hover: hover) { .cap-shell .cap-purchase__clear:hover { background: transparent; color: var(--cap-color-text); } }
.cap-shell .cap-purchase__place-box:not(.is-picked) .cap-purchase__clear { display: none; }
/* the place ✕ sits on the label line at every width (owner 2026-10-09; cap-places.js) — the value takes its whole line, and the
   ✕ shows only once a city is picked, as before */
.cap-shell .cap-purchase__place.has-label-x .cap-purchase__place-box .cap-input, .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-purchase__place.has-label-x .cap-purchase__place-box .cap-input { padding-right: 0; }
.cap-shell .cap-purchase__place.has-label-x:not(:has(.cap-purchase__place-box.is-picked)) > .cap-field__label > .cap-purchase__clear { display: none; }
.cap-shell.cap-gyr .cap-gyr__card .cap-purchase__clear[hidden] { display: none; }   /* round 22 A4: the date / time ✕ (a clone of this button, hidden while its cell is empty) — over the phone rule's display: flex above */   /* the ✕ only once a city is PICKED (purchase.js) — never empty, never while typing (25 Sep clear-control rule) */
.cap-shell .cap-purchase__place-box .cap-input { padding-right: calc(var(--cap-space-field-x) + var(--cap-space-lg)); text-overflow: ellipsis; }

/* ─── THE PHONE, round 2 (1l, CD 27 Sep, measured on the markup at 388) ───────────────────────────────────────────────
   The hero's h1 in the 24pt cut (the site-wide phone heading), the lede 16 / 1.75 roman weight, the four lines 15 / 1.5
   with 8 between; the sample band 26 in at the top, its heading 23 / 1.2; the counter, the hint and the credit on their
   own line boxes at .12em; the quote 18 / 1.5; "What's inside" with 13 under its head, the numbers in a 22 column, the
   titles and lines on "normal" line boxes, the lines in the caption grey; the FAQ's questions 16 / 1.3, the answers
   15 / 1.65. */
@media (max-width: 699px) {
  .cap-gyr .cap-gyr__h1 { font-family: var(--cap-font-display-sm); }
  .cap-shell.cap-gyr .cap-gyr__lede { font-weight: 400; line-height: var(--cap-mp-leading-gyr-lede); }
  .cap-gyr .cap-gyr__lines { gap: var(--cap-space-sm); font-size: var(--cap-mp-type-gyr-line); line-height: var(--cap-leading-lede); }
  .cap-gyr .cap-gyr__samples { padding-top: var(--cap-mp-gyr-band-top); padding-bottom: 0; }
  .cap-gyr .cap-gyr__quote { margin-top: calc(var(--cap-space-gap-2) * -1); padding-bottom: var(--cap-mp-gyr-band-top); }   /* 20 under the hint, 26 in at the band's foot */
  .cap-gyr .cap-gyr__samples-head { font-size: var(--cap-mp-type-card-h2); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-mp-track-card-h2); }
  .cap-gyr .cap-gyr__counter, .cap-gyr .cap-gyr__swipe, .cap-gyr .cap-gyr__quote-by { line-height: normal; letter-spacing: var(--cap-mp-track-gyr-small); }
  .cap-gyr .cap-gyr__quote p { font-size: var(--cap-mp-type-gyr-quote); line-height: var(--cap-leading-lede); }
  .cap-gyr .cap-gyr__quote-by { font-size: var(--cap-mp-type-gyr-credit); }
  .cap-gyr .cap-gyr__inside { border-top: 0; }
  .cap-shell.cap-gyr .cap-gyr__inside-head { padding: 0 0 var(--cap-mp-gyr-chapter-y); line-height: normal; }
  .cap-gyr .cap-gyr__chapter { padding: var(--cap-mp-gyr-chapter-y) 0 calc(var(--cap-mp-gyr-chapter-y) + var(--cap-space-gap-2)); }
  .cap-gyr .cap-gyr__chapter-body { gap: 0; }
  .cap-gyr .cap-gyr__chapter-desc { margin-top: var(--cap-mp-gyr-chapter-desc-top); }
  .cap-gyr .cap-gyr__chapter-no { width: var(--cap-mp-gyr-chapter-no-w); flex: none; line-height: normal; }
  .cap-gyr .cap-gyr__chapter-title { line-height: normal; }
  .cap-gyr .cap-gyr__chapter-desc { line-height: normal; color: var(--cap-color-caption); }
  .cap-shell.cap-gyr .cap-faq-q { font-size: var(--cap-mp-type-gyr-faq-q); line-height: var(--cap-mp-leading-gyr-faq-q); letter-spacing: var(--cap-mp-track-gyr-faq-q); }
  .cap-shell.cap-gyr .cap-gyr__faq-head { margin: 0; padding-bottom: var(--cap-space-gap-5); }   /* 1l: the list opens on the head's foot */
  .cap-shell.cap-gyr .cap-gyr__bar-title { font-size: var(--cap-mp-type-gyr-bar-title); line-height: normal; }
  .cap-shell.cap-gyr .cap-gyr__bar .cap-caption { line-height: normal; letter-spacing: var(--cap-mp-track-gyr-small); color: var(--cap-color-caption); }
  .cap-shell.cap-gyr .cap-faq__a, .cap-shell.cap-gyr .cap-faq__a p { font-size: var(--cap-mp-type-gyr-faq-a); line-height: var(--cap-mp-leading-sub); }
}

/* ═══ 700–1279 · THE TABLET SHEETS T5 (1024) / T5-820 (1 Oct 2026) ════════════════════════════════════════════════════════
   One column, the phone's order, desktop D4's components: 56 under the header rule, the top section CENTRED — the eyebrow
   starred both ends, the h1 38 balanced in 24ch, the lede 19 / 1.5 in 52ch, the report icon in ink (115 × 70) in place of
   the cover thumb, the ✦ lines centred with a star at BOTH ends (18 · .02em, 10 apart), the button hugging its label; no
   price line. 32 to the ink sample band, its heading "Read a real one first." (30) over D4's carousel. 64 to What's inside
   (D4's rows), the contract panel 32 under it, the form 64 under that (no box: the head, then the card of cells), "Not sure
   yet?" 64 under the form as D4 draws it (icon beside the copy), Questions 56 under it. The phone's sticky bar shows too. */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell.cap-gyr { padding: var(--cap-space-band-close) var(--cap-page-x-mid) var(--cap-space-page-end); }
  .cap-gyr .cap-gyr__copy { align-items: center; text-align: center; gap: var(--cap-gutter); }
  .cap-shell.cap-gyr .cap-gyr__eyebrow::after { content: "\00a0\00a0✦"; }
  .cap-gyr .cap-gyr__h1 { max-width: 24ch; text-wrap: balance; }
  .cap-shell.cap-gyr .cap-gyr__lede { max-width: 52ch; font-size: var(--cap-type-lede-band); line-height: var(--cap-leading-lede); text-wrap: balance; }
  .cap-gyr .cap-gyr__icon { display: block; width: var(--cap-gyr-icon-w); height: var(--cap-gyr-icon-h); margin-top: var(--cap-space-xs); }
  .cap-gyr .cap-gyr__lines { align-self: stretch; align-items: center; margin-top: var(--cap-space-gap-1); gap: var(--cap-space-chip-gap); font-size: var(--cap-type-card-title); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-lede-hero); color: var(--cap-color-text-body); }
  .cap-gyr .cap-gyr__lines li { display: block; white-space: nowrap; }
  .cap-gyr .cap-gyr__lines .cap-gyr__star { margin-right: var(--cap-space-chip-gap); }
  .cap-gyr .cap-gyr__lines li::after { content: "✦"; color: var(--cap-color-primary); margin-left: var(--cap-space-chip-gap); }
  .cap-shell.cap-gyr .cap-gyr__cta { display: inline-flex; align-self: center; width: auto; max-width: none; margin-top: var(--cap-space-sm); box-shadow: var(--cap-shadow-cta); }
  .cap-gyr .cap-gyr__samples { margin-top: var(--cap-space-hero-open); padding: var(--cap-space-lg) 0 var(--cap-space-panel-pad); gap: var(--cap-gutter); }
  .cap-gyr .cap-gyr__samples-head { display: block; margin: 0; font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-form-head); line-height: var(--cap-leading-form-head); letter-spacing: var(--cap-track-form-head); color: var(--cap-color-on-ink); text-align: center; }
  .cap-gyr .cap-gyr__counter, .cap-gyr .cap-gyr__caption, .cap-gyr .cap-gyr__quote-by { line-height: normal; }
  .cap-gyr .cap-gyr__caption { white-space: nowrap; }
  .cap-gyr .cap-gyr__inside { margin-top: var(--cap-space-hero-open); }
  .cap-shell.cap-gyr .cap-gyr__inside-head { margin: 0 0 var(--cap-space-block-4); line-height: normal; }
  .cap-gyr .cap-gyr__chapter-title { line-height: normal; }
  .cap-gyr .cap-gyr__chapter-desc { font-size: var(--cap-type-lede); margin-bottom: var(--cap-space-gap-3); }   /* T5: the row 102 — the sheet's rows carry an empty note line 6 under the description */
  .cap-gyr .cap-gyr__contract { margin-top: calc(var(--cap-gutter) + var(--cap-space-lg)); }
  .cap-gyr .cap-gyr__contract-head { line-height: normal; }
  .cap-gyr .cap-gyr__rail { margin-top: var(--cap-space-hero-open); }
  .cap-shell.cap-gyr .cap-gyr__card { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 0; }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-field > .cap-input--native { margin: 0; }   /* the touch browsers' date / time controls keep their full 17 line: the cell 81 like the others (T5) */
  .cap-gyr .cap-gyr__notsure { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 var(--cap-notsure-gap); padding: var(--cap-space-lg); margin-top: var(--cap-space-hero-open); }
  .cap-shell.cap-gyr .cap-gyr__notsure-lede { font-size: var(--cap-type-lede-box); line-height: var(--cap-leading-lede); }
  .cap-shell.cap-gyr .cap-gyr__notsure-link { margin-top: var(--cap-space-gap-3); }
  .cap-shell.cap-gyr .cap-gyr__faq { margin-top: var(--cap-space-band-close); }
  /* the sticky buy bar (T5): the phone's, at the tablet's sizes */
  .cap-gyr .cap-gyr__bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; align-items: center; gap: var(--cap-gutter); padding: var(--cap-space-md) var(--cap-page-x-mid) var(--cap-space-block-4); background: var(--cap-color-bg); border-top: var(--cap-border-hairline) solid var(--cap-color-line); box-shadow: var(--cap-shadow-buybar); }   /* SOLID page cream (owner 2026-10-01): the 96 % cream let the page’s text show through under the label */
  .cap-gyr .cap-gyr__bar[hidden] { display: none; }
  .cap-gyr .cap-gyr__bar-copy { display: flex; flex-direction: column; gap: var(--cap-space-xs); flex: 1; min-width: 0; }
  .cap-gyr .cap-gyr__bar-title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); line-height: normal; }
  .cap-shell.cap-gyr .cap-gyr__bar .cap-caption { line-height: normal; color: var(--cap-color-caption); }
  .cap-shell.cap-gyr .cap-gyr__bar .cap-btn { flex: none; padding: var(--cap-btn-pad-large); font-size: var(--cap-type-btn-large); letter-spacing: var(--cap-track-btn-large); line-height: var(--cap-leading-btn-large); }
}
.cap-gyr .cap-gyr__icon { display: none; }
@media (min-width: 700px) and (max-width: 1279px) { .cap-gyr .cap-gyr__icon { display: block; } }
/* the sample pages below 1280 (owner 2026-10-02): NO DOTS — the "1 / 11" counter stays; the phone turns pages with the
   edges and a swipe ("Tap the edges or swipe"), the tablet with its arrows and a swipe (money.js reads both at every width);
   desktop keeps its tappable dots */
@media (max-width: 1279px) {
  .cap-gyr .cap-gyr__nav > .cap-gyr__dots { display: none; }
}

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone. The
   phone's sticky bar is fixed, so it covers the footer's foot, not the gap above it. */
.cap-shell.cap-gyr { padding-bottom: var(--cap-space-footer-gap); }
@media (max-width: 699px) {
  .cap-gyr .cap-gyr__faq { padding-bottom: 0; }
}

/* A 320 PHONE (owner ruling 2026-10-05, round 31): the money page's form card stacks its date and time below 360, as every other
   birth card does (components.css) — side by side the date ran 15 past its half, the time 18. */
@media (max-width: 359px) {
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-birth { grid-template-columns: minmax(0, 1fr); }
  .cap-shell.cap-gyr .cap-gyr__card .cap-fcard .cap-birth > .cap-field + .cap-field { border-left: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-field-empty); }
}

/* A 320 PHONE (owner ruling 2026-10-05, round 31): below 360 the sticky bar's title "The full reading" got 95 px beside the button and
   set on two lines (the bar grew 16) — the bar is the button alone, full width. */
@media (max-width: 359px) {
  .cap-shell.cap-gyr .cap-gyr__bar .cap-gyr__bar-copy { display: none; }
  .cap-shell.cap-gyr .cap-gyr__bar .cap-btn { flex: 1 1 auto; }
}