/* ==========================================================================
   Public marketing site (artist-facing). New for the relaunch.

   Brand tokens come from madeready-custom.css, which is a byte-identical copy
   of the theme CSS and must NOT be edited. Anything that needs to change about
   the brand is overridden here instead.
   Load order: madeready-custom.css -> site.css -> marketing.css
   ========================================================================== */

/* --- CONTRAST FIX (WCAG 1.4.3) --------------------------------------------
   madeready-custom.css sets .btn-primary to white-on-cyan. Measured, that is
   2.59:1: it fails AA for text (needs 4.5:1) and even fails the looser 3:1 bar
   for UI components. The brand cyan is NOT the problem. The same cyan with the
   brand's own dark navy on top measures 6.85:1, passing AA and AAA.

   So this keeps #00ACEC exactly as it is and darkens the label instead. No
   brand colour changes. The primary CTA is the most-clicked element on the
   site, so it is the one place this absolutely cannot be left failing.
   ------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:visited,
.btn-primary:hover {
  color: var(--brand-dark);
  font-weight: 600;
}

/* --- Accessible ink for SMALL cyan text -----------------------------------
   --brand-primary-hover (#0098d4) measures 3.26:1 on white. That is fine for
   large text and UI, but it FAILS AA (4.5:1) for the 13-16px eyebrows, links
   and FAQ markers this page is full of. --mr-ink-accent is the same hue pushed
   darker to 4.56:1. Use it for small text; keep --brand-primary for fills.
   ------------------------------------------------------------------------- */
:root { --mr-ink-accent: #007eaf; }

/* --- Founding / provenance accent (the purple) ----------------------------
   #4639d1 is the SECONDARY accent. It marks the genuine, limited, founding
   thing — the Founding Artist badge, the roadmap tags, the certificate seal —
   while cyan stays "the live product, add it". It sits BELOW cyan and ink in
   the hierarchy and NEVER fills the primary CTA (that would make it the loudest
   colour on the page, which is the opposite of the brief).

   Measured, not eyeballed:
     #4639d1 on #FFFFFF white  = 7.59:1  OK  AA normal text
     #4639d1 on #F5F8FA grey   = 7.12:1  OK  AA normal text
     #FFFFFF white on #4639d1  = 7.59:1  OK  AA normal text  <- it carries WHITE
       labels, the INVERSE of the cyan rule (white-on-cyan is the banned 2.59:1).
     #4639d1 on #0F1923 ink    = 2.34:1  NO  never purple TEXT on dark sections,
       and a solid #4639d1 pill on the dark bar needs a light keyline to lift
       off it (2.34:1 as adjacent fills is too close).
     #a99ff5 on #0F1923 ink    = 7.57:1  OK  AA text on dark — the on-dark tint.
   ------------------------------------------------------------------------- */
:root {
  --mr-founder: #4639d1;
  --mr-founder-on-dark: #a99ff5;
}

/* --- Site-wide selection: the founding accent as a signature --------------
   Appears everywhere a visitor drags to select. White on #4639d1 is 7.59:1.
   Brand-new selector — nothing else styles ::selection, so source order is
   irrelevant here. */
::selection { background: var(--mr-founder); color: #fff; }
::-moz-selection { background: var(--mr-founder); color: #fff; }

/* --- Announcement bar ----------------------------------------------------- */
.mr-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--brand-dark);
  color: #fff;
  font-family: var(--brand-body-font);
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}
.mr-announce__badge {
  /* The founding signal, in purple. WHITE label, not dark ink: white on
     #4639d1 is 7.59:1, dark ink on it is only 2.34:1 — this badge inverts the
     button rule, and that inversion is exactly why purple earns the spot.
     The 1px light-purple keyline lifts the deep pill off the near-black bar,
     where #4639d1 vs #0F1923 is only 2.34:1 as adjacent fills. */
  background: var(--mr-founder);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(169, 159, 245, 0.55);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.mr-announce__text { color: rgba(255, 255, 255, 0.92); }
.mr-announce__cta { color: var(--brand-primary); font-weight: 600; }
.mr-announce:hover .mr-announce__cta { text-decoration: underline; }
.mr-announce:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

/* --- Nav ------------------------------------------------------------------ */
.mr-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.mr-nav[data-state="scrolled"] {
  border-bottom-color: var(--brand-border);
  box-shadow: 0 2px 16px rgba(15, 25, 35, 0.06);
}
.mr-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.mr-nav__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.mr-nav__home:focus-visible { outline: 2px solid var(--brand-primary-hover); outline-offset: 4px; }
/* The mark is TWO images: the cyan square, with the white "M" layered over it.
   (mrlogo-square.png is the square ALONE; without the overlay the nav just
   shows a blank cyan tile.) */
.mr-nav__logo {
  position: relative;
  width: 32px;
  height: 32px;
  background: url('../assets/mrlogo-square.png') center / contain no-repeat;
  /* Entrance flourish (Decision 049): the mark swells once on load, and as it
     settles the M spins once (::after below). Reuses the mr-logo-swell /
     mr-logo-spin keyframes from site.css. A ONE-TIME animation, so it does not
     compete with the looping hero. prefers-reduced-motion disables all of it via
     the global `* { animation: none !important }` in madeready-custom.css. */
  animation: mr-logo-swell 1100ms ease-in-out 400ms 1 both;
}
.mr-nav__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/mrlogo-m.png') center / contain no-repeat;
}
/* The M spin is driven by a class (site.js), NOT a persistent base animation: a
   base `animation` on ::after would re-fire every time the hover class reverted.
   site.js adds .is-spinning ~1500ms after load (the entrance spin, timed to follow
   the swell) and again on hover/focus, force-restarting it with a reflow, then
   removes it on animationend so it can retrigger. */
.mr-nav__home.is-spinning .mr-nav__logo::after {
  animation: mr-logo-spin 900ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}
.mr-nav__wordmark {
  font-family: var(--brand-heading-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}
/* Wrapper around the links + CTA. On desktop it is display:contents, so its
   children (.mr-nav__links, .mr-nav__cta) lay out as direct flex items of
   .mr-nav__inner exactly as they did before it existed. On mobile it turns into
   the dropdown panel — see the ≤900px block. */
.mr-nav__menu { display: contents; }
.mr-nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.mr-nav__links a {
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-text);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.mr-nav__links a:hover { color: var(--mr-ink-accent); }
.mr-nav__links a:focus-visible { outline: 2px solid var(--brand-primary-hover); outline-offset: 3px; }
.mr-nav__cta { flex-shrink: 0; padding: 10px 18px; font-size: 14px; }
.mr-nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.mr-nav__bars,
.mr-nav__bars::before,
.mr-nav__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-dark);
  border-radius: 2px;
  content: "";
}
.mr-nav__bars { position: relative; }
.mr-nav__bars::before { position: absolute; top: -7px; }
.mr-nav__bars::after { position: absolute; top: 7px; }

/* --- Shared section rhythm ------------------------------------------------ */
.mr-hero__inner,
.mr-watch__container,
.mr-choose__container,
.mr-how__container,
.mr-coa__container,
.mr-quality__container,
.mr-proof__container,
.mr-next__container,
.mr-story__container,
.mr-faq__container,
.mr-close__container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.mr-watch, .mr-choose, .mr-how, .mr-coa,
.mr-quality, .mr-proof, .mr-next, .mr-story, .mr-faq { padding: 96px 0; }

/* Alternating backgrounds do the section separation. No divider lines.
   NOTE --brand-bg is the GREY (#F5F8FA) and --brand-bg-alt is WHITE, which is
   the reverse of what the names suggest. Every section is spelled out so the
   alternation cannot silently break. */
.mr-hero    { background: var(--brand-bg); }      /* grey  */
.mr-watch   { background: var(--brand-bg-alt); }  /* white */
.mr-choose  { background: var(--brand-bg); }      /* grey  */
.mr-how     { background: var(--brand-bg-alt); }  /* white */
.mr-coa     { background: var(--brand-bg); }      /* grey  */
.mr-quality { background: var(--brand-bg-alt); }  /* white */
.mr-proof   { background: var(--brand-bg); }      /* grey  */
/* story and next SWAPPED places in index.html (the story now precedes the
   roadmap), so their backgrounds swapped with them to keep the alternation
   intact. Order on the page is: proof grey -> story white -> next grey ->
   faq white. Leaving these as they were would have stacked grey on grey. */
.mr-story   { background: var(--brand-bg-alt); }  /* white */
.mr-next    { background: var(--brand-bg); }      /* grey  */
.mr-faq     { background: var(--brand-bg-alt); }  /* white */

.mr-hero__eyebrow, .mr-watch__eyebrow, .mr-choose__eyebrow, .mr-how__eyebrow,
.mr-coa__eyebrow, .mr-quality__eyebrow, .mr-proof__eyebrow, .mr-next__eyebrow,
.mr-story__eyebrow, .mr-faq__eyebrow {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ink-accent);
  margin: 0 0 14px;
}
.mr-watch__heading, .mr-choose__heading, .mr-how__heading, .mr-coa__heading,
.mr-quality__heading, .mr-proof__heading, .mr-next__heading, .mr-story__heading,
.mr-faq__heading, .mr-close__heading {
  font-family: var(--brand-heading-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 18px;
}
.mr-watch__lede, .mr-choose__lede, .mr-quality__lede, .mr-close__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 62ch;
  margin: 0 0 44px;
}

/* --- Centred section headers ----------------------------------------------
   Every section below the hero leads with a centred eyebrow / heading / lede.

   Deliberately NOT applied to three sections, which keep their left edge:
     .mr-hero   two-column split, copy reads against the video
     .mr-coa    two-column split (text | certificate panel)
     .mr-proof  two-column split (screenshot | text)
   Centring one column of a side-by-side split leaves the text floating in the
   middle of its own half with the image hard against it. It reads as a mistake.

   Prose does NOT centre. Card copy, spec descriptions, FAQ answers and the
   founder story all stay left-aligned: centred multi-line body text has a
   ragged left edge, so the eye loses the start of every line. The headers
   centre, the reading does not.

   ⚠️ THE PARAGRAPH ABOVE IS DESKTOP-ONLY. It is SUPERSEDED AT <=720px by
   Decision 041 (the user's explicit call): on small screens ALL content
   centres — headings, ledes, card copy, feature lists, prices, tags, CTAs, and
   FAQ questions AND answers.

   The two are not in conflict; they are about different layouts. The ragged-left
   argument holds for a WIDE multi-column measure, which is what this file's base
   rules build. It does not hold for a phone, where a card is one narrow column
   and a centred heading sitting above left-aligned body copy reads as broken
   alignment, not as considered typography. Centring is made to look intentional
   there by CAPPING THE MEASURE (~34-38ch, auto side margins) and by dropping the
   hanging list markers — long lines and left-hung bullets are what actually
   create the ragged edge this comment is worried about.

   The override lives in the "Decision 041" block at the END of this file, which
   is where it has to be: a @media block placed earlier in the file than the base
   rules it overrides LOSES at equal specificity. Do not "fix" the mobile
   centring back to left-align because this comment told you to. */
.mr-watch__container,
.mr-choose__container,
.mr-how__container,
.mr-quality__container,
.mr-next__container,
.mr-story__container,
.mr-faq__container {
  text-align: center;
}
/* Hand the reading alignment back to everything holding real prose. These have
   to out-specify the centring inherited from the container above. */
.mr-choose__panel,
.mr-how__step,
.mr-quality__item,
.mr-next__item,
.mr-story__container p,
.mr-faq__list {
  text-align: left;
}
/* NB the panel intro is the one exception inside a panel — it is a lede, not
   prose, so it centres with the header block. That is done on .mr-choose__intro
   itself further down, NOT here: its own rule sets `margin`, and being later in
   the file it would override an auto-margin declared at this point. */

/* max-width alone does not centre a block. Without auto side margins these sit
   against the left edge of their own container with all the slack piled up on
   the right, which is the exact complaint this change exists to fix. */
.mr-watch__lede,
.mr-choose__lede,
.mr-quality__lede {
  margin-left: auto;
  margin-right: auto;
}

/* --- Card hover lift -------------------------------------------------------
   Lifted verbatim from the gated pages (madeready-custom.css ~2402): the same
   -6px rise, the same 0 12px 28px rgba(15,25,35,0.10) shadow, the same 200ms
   ease-out. Same feel, because it is literally the same numbers.

   The (hover: hover) and (pointer: fine) guard is the important part and is NOT
   decoration: without it, a touch device fires :hover on tap and the card sticks
   in the lifted state until you tap elsewhere. Touch pointers get nothing here,
   which is correct — there is no hover on a finger.

   Reduced motion is already handled: madeready-custom.css kills every transition
   globally under prefers-reduced-motion, so the lift becomes an instant no-op
   rather than needing its own guard.

   NOT applied to .mr-how__step: its numeral runs the infinite mr-icon-bob
   transform, and a hover transform on an ancestor fights an infinite transform
   animation on the child. The gated page hit this exact problem and excluded its
   bobbing cards for the same reason. */
@media (hover: hover) and (pointer: fine) {
  .mr-next__item,
  .mr-quality__item {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  .mr-next__item:hover,
  .mr-quality__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.10);
  }
}

/* --- Sentence units (.mr-s) ------------------------------------------------
   Keeps a sentence whole. `text-wrap: balance` evens LINE LENGTHS, but it is
   completely happy to break mid-sentence — it produced "Your work. /
   Professionally / printed. Customized / by the collector.", stranding "printed."
   away from "Professionally". Balance cannot express "keep these words together";
   nothing in CSS text-wrapping can.

   inline-block can. Each sentence becomes one atomic box: it sits inline with the
   next sentence WHEN IT FITS, and moves to its own line as a whole unit when it
   does not. That is exactly the rule — sentences ride together until they can't,
   then they break cleanly, never mid-thought. A single sentence longer than the
   line still wraps internally, which is correct.

   Whitespace between the spans in the markup supplies the inter-sentence space,
   so do not collapse the spans onto one line without a space between them. */
.mr-s { display: inline-block; }

/* --- Widows and orphans ----------------------------------------------------
   No stranded last words in a headline, and no sentence left dangling alone on
   its own line.

   `balance` evens the line lengths across the whole block, which is what you
   want for short, high-visibility text — headlines, ledes, captions, card
   titles. It is the thing that stops "Every choice a collector wants to / make".
   Browsers cap it at ~6 lines; everything in this list is well under that.

   Body prose gets `pretty`, not `balance`. Pretty fixes only the last-line
   orphan and leaves the rest of the rag alone. Balance would re-flow an entire
   paragraph and can pull it into an oddly narrow column, which is worse than the
   orphan it fixes.

   Both fall back to normal wrapping where unsupported, so no guard is needed. */
.mr-hero__heading,
.mr-hero__lede,
.mr-hero__reassure,
.mr-hero__art figcaption,
.mr-watch__heading, .mr-choose__heading, .mr-how__heading, .mr-coa__heading,
.mr-quality__heading, .mr-proof__heading, .mr-next__heading, .mr-story__heading,
.mr-faq__heading, .mr-close__heading,
.mr-watch__lede, .mr-choose__lede, .mr-quality__lede, .mr-close__lede,
.mr-choose__intro,
.mr-spec h3,
.mr-how__step h3,
.mr-quality__item h3,
.mr-next__item h3,
.mr-quality__more,
.mr-faq__item summary,
.mr-close__alt {
  text-wrap: balance;
}
.mr-spec p,
.mr-how__step p,
.mr-quality__item p,
.mr-next__item p,
.mr-coa__text p,
.mr-proof__text p,
.mr-story__container p,
.mr-faq__item p,
.mr-choose__note {
  text-wrap: pretty;
}

/* --- Hero ----------------------------------------------------------------- */
.mr-hero { padding: 88px 0 96px; }
/* The tracks are sized to the CONTENT and the pair is then centred as a unit.
   The video is capped at 440px (see .mr-hero__stage), so an fr-sized art column of
   519px left the card floating ~40px short of the container's right edge while the
   copy sat flush against the left one — the whole hero read as nudged left. Sizing
   the art track to the card's real 440px and centring the pair balances the outer
   margins instead of hiding the slack inside a column.

   620px on the copy track, and the extra 35px over the 585px that 1.06fr used to
   resolve to is deliberate headroom. MEASURED: the longest headline sentence,
   "Customized by the collector.", renders 585.0px at the 44px cap — it was fitting
   its old column with LESS THAN A PIXEL to spare. Any future change to the font,
   the tracking or the copy would have wrapped it mid-sentence with no warning.
   620 gives it 35px of slack. Do not narrow this track below ~590 without
   re-measuring that sentence — the mid-thought wrap comes straight back.

   The headline is three whole sentences; at an even 1fr/1fr split the longest one
   cannot fit on a line at any respectable display size, and it broke internally
   into "Customized by / the collector." */
.mr-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 620px) 440px;
  gap: 48px;
  align-items: center;
  justify-content: center;
}
/* Was a flat 60px, sized for the OLD 35-character headline. The current one is 60
   characters across three sentences, and 60px in a half-width column forced every
   sentence to wrap mid-thought — five ragged lines instead of three clean ones.
   The cap comes down to 46px, which is the largest size at which the longest
   sentence still fits on a single line in this column. clamp() lets it scale down
   smoothly rather than snapping at the breakpoint. Do NOT raise this cap without
   re-measuring the longest sentence — the wrap returns immediately. */
/* Cap dropped 46 -> 44 because the copy column narrowed (1.15fr -> 1.06fr, gap
   64 -> 48) to tighten the gutter. "Customized by the collector." measures 612px
   at 46px and the column is now 611px — it would have wrapped mid-headline again.
   At 44px it measures ~585px, leaving real slack. The cap and the column width
   are coupled: change one, re-measure the other. */
.mr-hero__heading {
  font-family: var(--brand-heading-font);
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 22px;
}
.mr-hero__lede {
  font-family: var(--brand-body-font);
  font-size: 19px;
  line-height: 1.65;
  color: var(--brand-text);
  margin: 0 0 32px;
  max-width: 54ch;
}
.mr-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.mr-hero__reassure {
  font-family: var(--brand-body-font);
  font-size: 14px;
  color: var(--brand-text-muted);
  margin: 18px 0 0;
}
.mr-hero__art { margin: 0; display: flex; flex-direction: column; align-items: center; }
/* The loop is the cropped customizer modal (800x908, portrait). Cap it at its
   native width so it never upscales and goes soft: the thing being sold here IS
   print quality, and a blurry preview undoes the whole argument. */
/* The wrapper owns the rounding, the clip and the shadow. The <video> owns
   nothing but pixels.

   Two bugs lived here, both reported as "a tiny dark outline on the top and left
   edges that vanishes when I screenshot it":

   1. There was a literal `border: 1px solid #E0E7ED` on the video. A grey line.
   2. `border-radius` set directly on a <video> is not reliably clipped against
      the GPU's video overlay plane. The overlay bleeds a dark fringe at the top
      and left. Screen-capture tools composite through a different path, so the
      fringe disappears the moment you try to photograph it, which is exactly why
      it looked like a ghost.

   The fix is the standard one: clip on a wrapper, and force that wrapper to
   rasterize as a single surface so the rounded clip is applied TO the video
   rather than composited around it. Do not put border-radius or a border back
   on .mr-hero__video. */
.mr-hero__stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
/* The "ground" shadow. It lives on a layer BEHIND the card, inset from its
   sides and pinned to its bottom, so it is geometrically incapable of showing
   above or beside the card: any part of it that overlaps the card is painted
   over by the card's own opaque white.

   Do NOT move this back onto .mr-hero__frame as a box-shadow. A box-shadow
   blurs outward in EVERY direction, and at this size the halo hugging the card
   does not read as depth, it reads as a thin dark border drawn around the
   video. Measured: it darkened the pixels touching the card from
   rgb(245,248,250) to rgb(227,231,233). That was the "dark outline" bug. */
.mr-hero__stage::after {
  content: "";
  position: absolute;
  /* z-index 0, NOT -1. A negative z-index would drop this behind the section's
     own opaque background and the shadow would vanish entirely. 0 keeps it above
     the section background but below the card (which is z-index 1). */
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: -14px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 25, 35, 0.34);
  filter: blur(26px);
}
.mr-hero__frame {
  position: relative;
  z-index: 1;              /* paints over the ground shadow */
  width: 100%;
  border-radius: 12px;
  overflow: hidden;        /* clips the video's corners; the video itself carries no radius */
  background: #fff;
  box-shadow: none;        /* deliberate. see .mr-hero__stage::after */
  isolation: isolate;
  line-height: 0;

  /* Pulls the <video> out of the GPU's hardware overlay path.

     A video that Chrome hands to an overlay plane is clipped by the compositor
     at device-pixel granularity, not by the page raster. This card routinely
     lands on a fractional pixel (the hero is a `1fr 1fr` grid, so the column
     width is whatever the viewport leaves over; measured x: 728.5), and on a
     scaled display that fractional CSS pixel becomes a fractional DEVICE pixel.
     The rounded clip and the video plane then disagree by a sliver, and the gap
     reads as a thin dark seam along the top and left — the origin corner.

     That also explains the property that made this bug so slippery: it does not
     survive a screenshot. Capture reads the page raster, which is clean; the
     seam only exists in the compositor, so it can be seen but never photographed.

     A filter forces this subtree into its own render pass. The video is then
     rasterized WITH the rounded clip instead of being composited against it, so
     fractional coverage antialiases (as it does for every other element) rather
     than tearing. saturate(1) would be dropped as a no-op — the fractional value
     is what keeps the pass alive. It is imperceptible: 0.1% of saturation. */
  filter: saturate(0.999);
}
.mr-hero__video {
  position: relative;
  z-index: 1;              /* sits under the white ring below */
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: #fff;
}
/* Belt and braces, and unapologetically so: this seam has been declared fixed
   three times and come back three times.

   An opaque white ring painted OVER the video's outermost 2px. The video already
   carries a 6px white border burned into it by ffmpeg (verified: its darkest edge
   pixel is 253), so this ring covers nothing but white and costs nothing visually.
   If any artifact still reaches the video's edge — an overlay seam, subpixel
   antialiasing, chroma bleed from the 800px -> 440px downscale — it lands
   underneath this and is never seen.

   This is the half that does not depend on the diagnosis above being right. */
.mr-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px #fff;
}
/* Sentence case (uppercase reverted by request). Kept: the 32px of air above it,
   the 15px size, and the italic.
   The letter-spacing came down 0.08em -> 0.01em with the uppercase. Wide tracking
   exists to open up the tight fit of capitals; left at 0.08em on sentence-case
   italic it reads as spaced-out and broken rather than editorial. It is not a
   free-floating "premium" knob — it belongs to the uppercase it was set for.
   --brand-text-muted is #4A5568 ≈ 7.5:1 on white, comfortably past AA. */
.mr-hero__art figcaption {
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--brand-text-muted);
  margin-top: 32px;
  text-align: center;
  text-wrap: balance;
}

/* --- Video ---------------------------------------------------------------- */
.mr-watch__player { max-width: 900px; margin: 0 auto; }

/* The stage holds the poster and the <video> in the same box, so swapping one for
   the other does not change the section's height and nothing jumps under the
   click. It is position:relative because .mrvp-quality (video-player.css) is
   position:absolute and would otherwise anchor itself to the page, not the player.
   The 16/9 ratio matches the Cloudflare Stream source. */
.mr-watch__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.18);
  background: var(--brand-dark);
}
/* Poster and video both fill the stage completely and sit on top of each other. */
.mr-watch__stage .mr-watch__poster,
.mr-watch__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;      /* the stage does the rounding now — see the hero comment
                            about border-radius on a <video> bleeding a dark fringe */
  box-shadow: none;      /* likewise: the shadow belongs to the stage */
}
.mr-watch__video {
  display: block;
  object-fit: cover;
  background: var(--brand-dark);
  border: 0;
}
.mr-watch__video[hidden] { display: none; }
.mr-watch__stage .mr-watch__poster[hidden] { display: none; }
.mr-watch__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.18);
}
.mr-watch__poster img { display: block; width: 100%; height: auto; }
.mr-watch__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--brand-primary);
  transition: transform 200ms ease-out;
}
.mr-watch__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--brand-dark);
}
.mr-watch__poster:hover .mr-watch__play { transform: translate(-50%, -50%) scale(1.08); }
.mr-watch__poster:focus-visible { outline: 3px solid var(--brand-primary-hover); outline-offset: 4px; }

/* --- Option tabs ---------------------------------------------------------- */
.mr-choose__tablist {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid var(--brand-border);
  margin-bottom: 32px;
}
/* Uppercased in CSS, NOT in the markup: the accessible name a screen reader
   announces comes from the button's text content, and "ROOM PREVIEW" in the DOM
   gets spelled out letter-by-letter by some screen readers. Leave the HTML in
   sentence case and let text-transform do the styling. 13px + tracking, matching
   the eyebrow treatment the rest of the page uses for uppercase UI text. */
.mr-choose__tab {
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-text);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 18px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.mr-choose__tab:hover { color: var(--brand-dark); }
.mr-choose__tab[aria-selected="true"] {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-primary);
}
.mr-choose__tab:focus-visible { outline: 2px solid var(--brand-primary-hover); outline-offset: -2px; }
/* Text panels (paper / frames / mats) are a single column of real, crawlable
   copy. Only the room-preview panel is a two-up with an image. */
/* Centred, and `auto` side margins rather than 0 — this sits inside
   .mr-choose__panel, which is text-align:left (it holds prose), so the intro has
   to re-centre itself and pull its own max-width box back into the middle. */
.mr-choose__intro {
  font-family: var(--brand-body-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 68ch;
  margin: 0 auto 28px;
  text-align: center;
}
.mr-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}
/* Each surface is a white card on this grey section, matching the customizer's
   materials treatment (Decision 050). Names stay real, crawlable text. */
.mr-spec li {
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 20px 22px;
}
@media (hover: hover) and (pointer: fine) {
  .mr-spec li { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
  .mr-spec li:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 25, 35, 0.08); }
}
/* The Paper panel has no intro line (it only repeated the section lede), so the
   grid leads the panel and would otherwise sit hard against the tab rule with
   just the tablist's 32px. The other panels get their intro's 28px of air on top
   of that; this gives the lead grid a comparable breath. */
.mr-choose__panel > .mr-spec:first-child { margin-top: 16px; }
.mr-spec h3 {
  font-family: var(--brand-heading-font);
  font-size: 19px;
  color: var(--brand-dark);
  margin: 0 0 8px;
}
.mr-spec h3::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--brand-primary);
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.mr-spec p {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;
}
/* Frame / mat names: a calm dotted index inside one white card, not a pill cloud
   (matches the customizer page, Decision 050). Its media queries follow directly,
   per this file's source-order rule. */
.mr-chips {
  list-style: none;
  margin: 0;
  padding: 22px 24px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
  text-align: left;
}
.mr-chips li {
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-dark);
}
.mr-chips li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-primary);
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
@media (max-width: 720px) {
  .mr-chips { grid-template-columns: repeat(2, 1fr); padding: 18px; }
}
@media (max-width: 480px) {
  .mr-chips { grid-template-columns: 1fr; }
}

.mr-choose__panel--split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
/* MUST come after any display: rule on the panels. The [hidden] attribute only
   sets display:none via the UA sheet, so a `display: grid` class silently beats
   it and every "hidden" panel renders anyway. This is what keeps the tabs from
   dumping all four panels onto the page at once. */
.mr-choose__panel[hidden] { display: none; }
.mr-choose__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  box-shadow: 0 12px 36px rgba(15, 25, 35, 0.09);
}
.mr-choose__note {
  font-family: var(--brand-body-font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--brand-text);
  margin: 0;
  position: sticky;
  top: 110px;
}

/* --- How it works --------------------------------------------------------- */
/* The numerals were sitting 6px ABOVE the headline's bottom edge — the h2's line
   box left no real clearance, so the bobbing circles crowded the headline (and
   they bob UP 8px, which closed what little gap there was). 40px of margin gives
   them room to float without ever approaching the headline. */
.mr-how__steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
/* The bob is lifted verbatim from the gated pages' numerals: mr-icon-bob,
   6.4s ease-in-out infinite, translateY(-8px) at the midpoint, with the 2nd and
   3rd staggered to 7s/0.9s and 6s/1.8s so the three drift organically instead of
   pulsing in lockstep. Same keyframe name, same numbers — this reuses the
   existing @keyframes in madeready-custom.css rather than redefining it.
   madeready-custom.css kills all animation under prefers-reduced-motion
   globally (`* { animation: none !important }`), so this needs no separate
   reduced-motion guard. */
.mr-how__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-family: var(--brand-body-font);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
  animation: mr-icon-bob 6.4s ease-in-out infinite;
  will-change: transform;
}
.mr-how__step:nth-child(2) .mr-how__num {
  animation-duration: 7s;
  animation-delay: 0.9s;
}
.mr-how__step:nth-child(3) .mr-how__num {
  animation-duration: 6s;
  animation-delay: 1.8s;
}
.mr-how__step h3 {
  font-family: var(--brand-heading-font);
  font-size: 22px;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-how__step p,
.mr-quality__item p,
.mr-next__item p,
.mr-coa__text p,
.mr-proof__text p,
.mr-story__container p {
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--brand-text);
  margin: 0 0 14px;
}

/* --- Certificate of Authenticity ------------------------------------------ */
/* The tracks are sized to the CONTENT and the pair is centred as a unit.

   What was wrong before: the tracks were fractions (0.9fr / 1.1fr), so the
   certificate's column resolved to 634px — but the certificate itself is capped at
   440px. The image was pinned to the LEFT of that oversized column to keep it near
   the copy, which dumped the leftover ~190px against the container's right edge.
   The section read as flush-left with a hole punched in its right margin.

   Sizing the art track to the certificate's real 440px and centring both tracks
   keeps the copy and its evidence tight together AND leaves equal air on both
   sides. The slack becomes an outer margin instead of an invisible pocket inside a
   column.

   The cost, accepted deliberately: this section's copy no longer starts on the same
   left rail as the rest of the page's headings. The copy/evidence pairing wins here
   because the certificate IS the claim the copy is making — they have to read as one
   unit. If more sections adopt this, revisit whether the rail is worth keeping. */
.mr-coa__container {
  display: grid;
  grid-template-columns: minmax(0, 520px) 440px;
  gap: 48px;
  align-items: center;
  justify-content: center;
}
/* The real certificate now lives here (the abstract placeholder is gone).
   The document is PORTRAIT (1224x1584, ~8.5x11), not the 4:3 the placeholder
   assumed — so no aspect-ratio is forced; the image sets its own height from its
   intrinsic ratio and cannot be squashed.

   Capped at 440px rather than filling the 544px column: a full-bleed portrait
   runs ~700px tall and towers over the copy beside it, which unbalances a section
   whose text is only ~300px tall. At 440 it reads as a document sitting next to
   the paragraph, which is the point. */
/* Still NO justify-self here, and it is still load-bearing.
   justify-self makes the figure SHRINK-TO-FIT. Combined with a lazy-loaded image
   (intrinsic size unknown until it arrives) the figure collapsed to 2px wide and
   then snapped to 440px on load — a visible layout shift.
   It is unnecessary now anyway: the grid TRACK is 440px, so the figure fills its
   cell at exactly the right width and the box is already the correct size before
   the image arrives. */
.mr-coa__art {
  margin: 0;
}
.mr-coa__art img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--brand-border);
  /* A certificate is a physical document; the shadow is what makes it read as
     paper lying on the page rather than a flat screenshot pasted in.
     The 1px purple hairline just outside the paper edge is the founding seal —
     it literally renders "the accent colour" the copy talks about, without
     touching the real document. Subtle at 0.45 so it reads as intent, not a
     glitch; visible on both the grey and white section backgrounds. */
  box-shadow:
    0 0 0 1px rgba(70, 57, 209, 0.45),
    0 18px 48px rgba(15, 25, 35, 0.14);
}

/* The image is a button so the certificate can be opened at full size. The button
   is the sized element now (it takes the 440px cap the image used to); the image
   fills it and keeps the paper border + shadow. */
.mr-coa__expand {
  display: block;
  width: 100%;
  max-width: 440px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  border-radius: 6px;
  font: inherit;
  color: inherit;
}
.mr-coa__expand:focus-visible {
  outline: 2px solid var(--brand-primary-hover, #0098d4);
  outline-offset: 3px;
}
/* "Enlarge" affordance. Same dark-glass language as the video Quality control, so
   the site's overlay controls read as one family. Dark ink on translucent dark is
   the correct treatment here (never white on cyan). */
.mr-coa__expand-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--brand-body-font, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(15, 25, 35, 0.72);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0.92;
  pointer-events: none;   /* the whole button is the target */
  transition: opacity 150ms ease-out, background 150ms ease-out;
}
.mr-coa__expand:hover .mr-coa__expand-hint,
.mr-coa__expand:focus-visible .mr-coa__expand-hint {
  opacity: 1;
  background: rgba(15, 25, 35, 0.9);
}
.mr-coa__expand-hint svg { display: block; width: 14px; height: 14px; }

/* --- Certificate lightbox -------------------------------------------------
   Full-screen overlay with a self-contained zoom engine (see site.js): the
   certificate opens fit-to-screen, then pinch / double-tap / the zoom buttons
   scale it in place so a collector can read the fine print. The engine owns the
   gesture so the fixed close button and hint never move with the image. */
.mr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overscroll-behavior: contain;
  background: rgba(15, 25, 35, 0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mr-lightbox[hidden] { display: none; }

/* The stage captures the pinch/pan gestures and clips the zoomed image to the
   viewport. touch-action:none hands every touch to the JS engine (so the browser
   never fights it with native page zoom or scroll). */
.mr-lightbox__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.mr-lightbox__stage.is-zoomed { cursor: grab; }
.mr-lightbox__stage.is-panning { cursor: grabbing; }
.mr-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transform: translate(0, 0) scale(1);
  transition: transform 180ms ease-out;   /* button/double-tap steps ease; live pinch turns this off */
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.mr-lightbox__stage.is-interacting .mr-lightbox__img { transition: none; }

.mr-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(15, 25, 35, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mr-lightbox__close:hover { background: rgba(15, 25, 35, 0.92); }
.mr-lightbox__close:focus-visible {
  outline: 2px solid var(--brand-primary, #00ACEC);
  outline-offset: 2px;
}

/* Zoom controls. Same dark-glass language as the close button and the "Enlarge"
   pill so every overlay control reads as one family. Dark ink on translucent dark;
   never white on cyan. Keyboard-operable so zoom is not gesture-only. */
.mr-lightbox__zoom {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  gap: 8px;
}
.mr-lightbox__zoom-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(15, 25, 35, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mr-lightbox__zoom-btn:hover { background: rgba(15, 25, 35, 0.92); }
.mr-lightbox__zoom-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #00ACEC);
  outline-offset: 2px;
}
.mr-lightbox__zoom-btn[disabled] { opacity: 0.4; cursor: default; }

/* The affordance that makes the gesture discoverable. site.js swaps the copy for
   pointer devices ("Double-click or scroll to zoom") and fades it out on first zoom. */
.mr-lightbox__hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  max-width: calc(100vw - 140px);   /* never collide with the bottom-right zoom controls */
  font-family: var(--brand-body-font, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
  background: rgba(15, 25, 35, 0.72);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}
.mr-lightbox__hint.is-dismissed { opacity: 0; }

/* Media query kept immediately after the lightbox base rules (source-order trap).
   Tighter insets on a phone; the hint sits above the zoom controls so the two
   never overlap on a narrow screen. */
@media (max-width: 720px) {
  .mr-lightbox__stage { padding: 12px; }
  .mr-lightbox__close { top: 10px; right: 10px; }
  .mr-lightbox__zoom { right: 10px; bottom: 10px; }
  .mr-lightbox__hint { bottom: 66px; max-width: calc(100vw - 24px); }
}

/* --- Print quality -------------------------------------------------------- */
.mr-quality__grid {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.mr-quality__item {
  padding: 28px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-bg);
}
.mr-quality__item h3 {
  font-family: var(--brand-heading-font);
  font-size: 20px;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-quality__item p { margin: 0; }
.mr-quality__more {
  font-family: var(--brand-body-font);
  font-size: 16px;
  color: var(--brand-text);
  margin: 0;
}
.mr-quality__more a { color: var(--mr-ink-accent); font-weight: 600; }
/* The lede link was inheriting the browser default — blue, then PURPLE once
   visited, underlined. Off-brand and, worse, the visited purple made a live page
   look broken. Same treatment as every other inline link on the page.
   --mr-ink-accent (#007eaf) is the AA-safe ink; --brand-primary is a fill colour
   and fails contrast at this text size. */
.mr-watch__lede a { color: var(--mr-ink-accent); font-weight: 600; }

/* The live-store link rides inline with the lede on desktop, but on a phone it
   should not sit immediately after the body text - jammed against "Want the real
   thing?" it reads as part of the sentence and is an easy tap target to miss. It
   is its own .mr-s sentence unit now; drop it to its own line at mobile widths.
   Media query sits immediately after the base rule on purpose (source-order trap). */
.mr-watch__live { display: inline-block; }
@media (max-width: 720px) {
  .mr-watch__live { display: block; }
}

/* --- Case study ----------------------------------------------------------- */
.mr-proof__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mr-proof__shot { margin: 0; }
.mr-proof__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.12);
}
.mr-proof__text .btn-outline { margin-top: 10px; }

/* --- Coming next ---------------------------------------------------------- */
.mr-next__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.mr-next__item {
  padding: 32px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-bg-alt);
}
.mr-next__item h3 {
  font-family: var(--brand-heading-font);
  font-size: 22px;
  color: var(--brand-dark);
  margin: 0 0 12px;
}
.mr-next__tag {
  display: inline-block;
  font-family: var(--brand-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Purple = "what's coming", the founding-adjacent signal. White on #4639d1 is
     7.59:1; the tag sits on a LIGHT section (#4639d1 on white/grey is 7.12-7.59)
     so the pill separates on its own — no keyline needed here. */
  color: #fff;
  background: var(--mr-founder);
  border-radius: 3px;
  padding: 4px 9px;
}

/* --- Story ---------------------------------------------------------------- */
.mr-story__container { max-width: 760px; }
.mr-story__container p { font-size: 17px; }

/* --- FAQ ------------------------------------------------------------------ */
.mr-faq__list { max-width: 820px; margin: 0 auto; }
.mr-faq__item { border-bottom: 1px solid var(--brand-border); }
.mr-faq__item summary {
  font-family: var(--brand-body-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-dark);
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.mr-faq__item summary::-webkit-details-marker { display: none; }
.mr-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--mr-ink-accent);
}
.mr-faq__item[open] summary::after { content: "\2013"; }
.mr-faq__item summary:focus-visible { outline: 2px solid var(--brand-primary-hover); outline-offset: 2px; }
.mr-faq__item p {
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--brand-text);
  margin: 0 0 22px;
  max-width: 68ch;
}
.mr-faq__item a { color: var(--mr-ink-accent); font-weight: 600; }

/* --- Closing CTA ---------------------------------------------------------- */
.mr-close {
  padding: 104px 0;
  background: var(--brand-dark);
  text-align: center;
}
.mr-close__heading { color: #fff; }
.mr-close__lede { color: rgba(255, 255, 255, 0.82); margin: 0 auto 32px; }
.mr-close__alt {
  font-family: var(--brand-body-font);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  margin: 22px 0 0;
}
.mr-close__alt a { color: var(--brand-primary); font-weight: 600; }
/* The founding phrase, in purple, closing the loop with the badge at the very
   top. On the dark section this MUST use the lightened tint: #a99ff5 on #0F1923
   is 7.57:1, whereas the full #4639d1 would be 2.34:1 and unreadable. */
.mr-founder-mark { color: var(--mr-founder-on-dark); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* The two-column hero STOPS WORKING at about 990px, and it has to stack before it
   gets there. Worked out rather than eyeballed:

     the art track is a fixed 440px, so   copy column = width - 96 - 440
     the longest sentence renders          585px at the 44px cap
     the clamp bottoms out at              32px

   At 905px that leaves a 369px copy column for a sentence that needs ~416px, so
   "Customized by the collector." wraps mid-thought. NO font size fixes it — the
   copy column shrinks faster than the type does, and below the clamp's floor the
   type stops shrinking altogether. Solving `585 * font/44 <= width - 536` puts the
   crossover at ~991px.

   So the hero stacks at 1040px, comfortably clear of that. Stacked, the copy runs
   the full width and the sentence fits with hundreds of pixels to spare.
   This block sits BEFORE the 900px one on purpose: below 900 both match and the
   later rules win, which is what we want.
   (COA and the case study stay two-up down to 900 — their images are flexible, so
   they do not have this failure mode.) */
@media (max-width: 1040px) {
  .mr-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .mr-hero__art { order: -1; }
}

@media (max-width: 900px) {
  /* Tighter top padding on mobile: the sticky header sits right above, so 56px
     read as an empty gap. Bottom stays 64px. Desktop (88/96) is unchanged. */
  .mr-hero { padding: 32px 0 64px; }
  .mr-hero__inner,
  .mr-coa__container,
  .mr-proof__container { grid-template-columns: 1fr; gap: 44px; }
  .mr-hero__heading { font-size: 42px; }

  /* Interleave the video BETWEEN the headline and the lede on mobile.
     .mr-hero__art is a sibling of .mr-hero__copy, not of the heading/lede that
     live inside it, so plain `order` cannot slot it between them. Dropping the
     copy wrapper to display:contents lifts its children into the hero grid, so
     eyebrow / heading / video / lede / ctas / reassure become one ordered
     sequence. gap goes to 0 so each element's own margin drives the spacing
     (the 44px grid gap is far too much between lines of copy). Inheritance is
     preserved under display:contents, so the centred alignment (text-align on
     .mr-hero__copy at 720px, and the lede's capped measure) is unchanged. */
  .mr-hero__inner    { gap: 0; }
  .mr-hero__copy     { display: contents; }
  .mr-hero__eyebrow  { order: 1; }
  .mr-hero__heading  { order: 2; }
  .mr-hero__art      { order: 3; margin: 6px 0 28px; }
  .mr-hero__lede     { order: 4; }
  .mr-hero__ctas     { order: 5; }
  .mr-hero__reassure { order: 6; }

  /* Centre the certificate once the section stacks.
     On desktop it is deliberately flush LEFT in its column, to sit next to the
     copy it is evidence for. Stacked, that same rule left it pinned to the left
     edge of a full-width row with up to 410px of dead space beside it — it only
     looked centred below ~490px, where the 440px cap stops binding and the image
     simply fills the row. Auto margins fix the whole stacked range. */
  .mr-coa__expand { margin-left: auto; margin-right: auto; }
  .mr-choose__panel--split { grid-template-columns: 1fr; gap: 28px; }
  .mr-choose__note { position: static; }
  .mr-spec { grid-template-columns: 1fr; }
  .mr-how__steps { grid-template-columns: 1fr; gap: 32px; }
  .mr-quality__grid,
  .mr-next__grid { grid-template-columns: 1fr; }
  .mr-watch, .mr-choose, .mr-how, .mr-coa,
  .mr-quality, .mr-proof, .mr-next, .mr-story, .mr-faq { padding: 64px 0; }
  .mr-watch__heading, .mr-choose__heading, .mr-how__heading, .mr-coa__heading,
  .mr-quality__heading, .mr-proof__heading, .mr-next__heading, .mr-story__heading,
  .mr-faq__heading, .mr-close__heading { font-size: 30px; }
}

@media (max-width: 720px) {
  /* Mobile nav is logo + hamburger only. The links AND the CTA now live inside the
     dropdown panel (.mr-nav__menu), CTA pinned to the top. This steps back from the
     older "keep the CTA visible in the bar on mobile" choice that once justified
     hiding the wordmark — see decisions.md, "Tuck the mobile CTA into the menu"
     (2026-07-14). Because the row is now just the mark and the toggle, the 720px
     overflow that forced the wordmark out is gone; the wordmark stays hidden only
     to match the approved layout, not out of necessity. */
  .mr-nav__inner { position: relative; gap: 10px; padding: 12px 16px; }
  .mr-nav__wordmark { display: none; }
  .mr-nav__toggle { display: block; margin-left: auto; }

  /* The wrapper drops out of display:contents and becomes the dropdown panel. It
     is absolutely positioned, so it never disturbs the header row (logo + toggle),
     open or closed. */
  .mr-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.1);
  }
  .mr-nav[data-nav-open] .mr-nav__menu { display: flex; }

  /* Links: a plain stacked list inside the panel (no longer their own dropdown). */
  .mr-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
  }
  .mr-nav__links a { padding: 16px 24px; border-top: 1px solid var(--brand-border); }

  /* CTA sits at the TOP of the panel (order:-1), a full-width tap target. The dark
     ink on cyan comes from .btn-primary — do NOT reverse it to white (2.59:1, fails
     AA). It is a sibling of .mr-nav__links, so .mr-nav__links a never touches it. */
  .mr-nav__cta {
    order: -1;
    display: block;
    width: auto;
    margin: 14px 14px 6px;
    padding: 13px 18px;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
  }
  .mr-announce { font-size: 13px; gap: 8px; padding: 9px 16px; }
  /* Fluid, not a flat 34px. Each headline sentence now gets its own line (see the
     .mr-s block rule below), but a flat 34px was still too big for the longest
     sentence to FIT on that line — "Professionally printed." wrapped inside itself
     at 390px and below, which is the mid-thought break we are trying to kill.
     7.6vw keeps the longest sentence inside the screen at every phone width down
     to a 320px iPhone SE, and still reaches the 34px cap on a large phone.
     MEASURED, do not nudge upward: at 8vw the longest sentence overshoots a
     320px screen by ~5px and wraps; at ~8.6vw it fails at 375px too. The binding
     sentence is "Professionally printed.", not the longest-looking one. */
  .mr-hero__heading { font-size: clamp(24px, 7.6vw, 34px); }
  .mr-hero__lede { font-size: 17px; }
  .mr-hero__ctas .btn-primary,
  .mr-hero__ctas .btn-outline { width: 100%; }

  /* One sentence per line in HEADLINES on mobile.
     .mr-s is inline-block everywhere else, so sentences ride together when they
     fit and only break apart when they don't. At phone widths they almost never
     fit two-up, and the in-between states are the ugly ones — a short sentence
     stranded on the end of a line above a long one. Forcing block here makes the
     rule unconditional where the screen is narrow.

     Scoped to the two multi-sentence HEADINGS on purpose. NOT applied to .mr-s in
     the ledes: the options lede alone is six sentences ("Seven fine art papers."
     / "Fifteen frames." / "Twelve mats." / ...) and blocking those would turn a
     two-line paragraph into a six-line list. Headlines want the drama; body copy
     does not.

     NOTE this makes each sentence its own LINE BOX, not necessarily one visual
     line — a sentence wider than the screen still wraps inside itself. See the
     hero heading size below. */
  .mr-hero__heading .mr-s,
  .mr-how__heading .mr-s { display: block; }

  /* Section headings go fluid too, and this is NOT cosmetic — it is a hierarchy
     fix forced by the hero above. The hero h1 has to shrink on a phone so its
     longest sentence fits on one line (28.5px at 375, 24px at 320). The section
     h2s were a flat 30px, which meant the H1 ENDED UP SMALLER THAN THE H2s below
     it on every phone under ~400px — the biggest headline on the page rendering
     as the smallest. 6.6vw keeps every h2 comfortably under the h1 at every width
     while staying on the same fluid curve. */
  .mr-watch__heading, .mr-choose__heading, .mr-how__heading, .mr-coa__heading,
  .mr-quality__heading, .mr-proof__heading, .mr-next__heading, .mr-story__heading,
  .mr-faq__heading, .mr-close__heading { font-size: clamp(21px, 6.6vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .mr-nav,
  .mr-watch__play,
  .mr-watch__poster,
  .mr-choose__tab { transition: none; }
}

/* --- 404 ------------------------------------------------------------------ */
.mr-404 {
  background: var(--brand-bg);
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 96px 24px;
}
.mr-404__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.mr-404__code {
  font-family: var(--brand-mono-font, monospace);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mr-ink-accent);
  margin: 0 0 16px;
}
.mr-404__heading {
  font-family: var(--brand-heading-font);
  font-size: 44px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 16px;
}
.mr-404__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  margin: 0 0 32px;
}
.mr-404__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 720px) {
  .mr-404__heading { font-size: 32px; }
}

/* ==========================================================================
   Pricing  (/pricing)
   --------------------------------------------------------------------------
   Fresh .mr-pricing__* classes. Deliberately NOT built on .mr-dash / .mr-flow /
   .mr-cart / .mr-ops / .mr-bfs: those live in madeready-custom.css, which is a
   byte-identical DO-NOT-EDIT copy of the theme CSS, and they are named for the
   dead B2B fulfiller pitch (Decision 039). Reaching into them would couple this
   page to a file nobody is allowed to change.

   REUSED verbatim, because they are already generic and already correct:
     .mr-faq    the FAQ list and its +/- markers
     .mr-close  the dark closing CTA
     .btn-primary / .btn-outline

   Background alternation on this page: pricing GREY -> faq WHITE -> close DARK.
   (.mr-faq and .mr-close already declare their own backgrounds further up.)

   This block is the LAST thing in the file, and its @media queries sit
   immediately after its own base rules — see the note on the Responsive block
   above. A media query placed EARLIER in the file than the base rules it means
   to override loses at equal specificity. This repo has shipped that bug four
   times; it is not shipping it a fifth.
   ========================================================================== */
.mr-pricing {
  padding: 96px 0;
  background: var(--brand-bg);   /* GREY #F5F8FA. The names are inverted:
                                    --brand-bg is the grey, --brand-bg-alt white. */
}
.mr-pricing__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;   /* the HEADER centres. The card prose does not — the
                           cards hand alignment back to left below. */
}

/* --- Header: the signature eyebrow -> heading -> lede rhythm --------------- */
.mr-pricing__eyebrow {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ink-accent);
  margin: 0 0 14px;
}
.mr-pricing__heading {
  font-family: var(--brand-heading-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 18px;
}
.mr-pricing__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 62ch;
  margin: 0 auto 56px;   /* auto sides: max-width alone does not centre a block */
}

/* --- The grid -------------------------------------------------------------- */
.mr-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* --- The card -------------------------------------------------------------- */
.mr-pricing__card {
  display: flex;
  flex-direction: column;
  background: var(--brand-bg-alt);            /* WHITE */
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: left;                            /* prose does not centre */
  position: relative;
  box-sizing: border-box;
}

/* Which of the two channels this plan arrives through. This is the line that
   stops the third column reading as just a third product. */
.mr-pricing__channel {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text-muted);   /* 7.53:1 on white, 7.06:1 on the grey card */
  margin: 0 0 10px;
}
.mr-pricing__name {
  font-family: var(--brand-heading-font);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 16px;
}

/* The price block is bottom-aligned to a fixed floor so the three figures land
   on the same line even though only Founding Artist carries a lead-in ("3
   months free, then"). Without this, its $24.50 would sit a line lower than the
   other two and the row would look accidental. */
.mr-pricing__price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 78px;
  margin: 0 0 14px;
}
.mr-pricing__lead {
  font-family: var(--brand-body-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-text-muted);
  margin: 0 0 6px;
}
.mr-pricing__figure { margin: 0; }
/* Real, crawlable text. Never an image of a price. */
.mr-pricing__amount {
  font-family: var(--brand-heading-font);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}
.mr-pricing__per {
  font-family: var(--brand-body-font);
  font-size: 15px;
  color: var(--brand-text-muted);
  margin-left: 6px;
}
.mr-pricing__summary {
  font-family: var(--brand-body-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-text);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--brand-border);
}

/* --- Features -------------------------------------------------------------- */
.mr-pricing__features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.mr-pricing__features li {
  position: relative;
  padding-left: 26px;
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin-bottom: 12px;
}
/* Measured, not eyeballed. The tick is --brand-secondary (#1B6B8A), NOT
   --mr-ink-accent (#007eaf): the ink accent is 4.56:1 on white but only 4.28:1
   on the grey Founding Artist card, which fails AA at this size. The teal is
   5.97:1 on white and 5.60:1 on the grey — it passes on BOTH, so the row keeps
   one tick colour instead of two. */
.mr-pricing__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-secondary);
}

/* --- Tags ------------------------------------------------------------------ */
/* Cyan fill, DARK INK label: 6.85:1. White on this cyan is 2.59:1 and fails both
   AA and the 3:1 UI bar. Do not invert it. */
.mr-pricing__tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-family: var(--brand-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 14px;
}
/* The application's tag is stated, not sold: no fill, so it cannot compete with
   Pro's. Dark ink on the grey card is 15.9:1. */
.mr-pricing__tag--quiet {
  background: transparent;
  color: var(--brand-dark);
  border: 1px solid rgba(15, 25, 35, 0.24);
  padding: 4px 11px;
}

/* --- The anchor (Pro) ------------------------------------------------------ */
/* The lift is MARGIN, not transform, and that is load-bearing.
   .reveal.reveal-visible sets `transform: translateY(0)` at specificity 0,2,0.
   A `.mr-pricing__card--anchor { transform: translateY(-12px) }` is 0,1,0, so it
   LOSES no matter how late it sits in this file, and the lift would silently
   never render once the card revealed. Margin keeps the offset out of the
   transform channel entirely: the reveal float still plays on all three cards,
   and reduced motion's `transform: none !important` cannot flatten it. */
.mr-pricing__card--anchor {
  margin-top: -12px;
  border: 2px solid var(--brand-primary);
  box-shadow: 0 16px 36px rgba(15, 25, 35, 0.10);
}

/* --- The application (Founding Artist) ------------------------------------- */
/* It carries the section's own grey rather than a white fill, so it reads as
   recessed rather than shelved: the two white cards are things you install, this
   is a thing you ask for. Its CTA is .btn-outline for the same reason — the two
   install CTAs stay the loudest elements on the page. */
.mr-pricing__card--apply {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
}
/* The "for life" qualifier. It is boxed and kept in the flow on purpose: the
   whole point of the sentence is that nobody can miss it. Not a tooltip, not a
   footnote, not dropped for space. */
.mr-pricing__note {
  font-family: var(--brand-body-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-text-muted);   /* 7.06:1 on the grey card */
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--brand-bg-alt);
  border-left: 3px solid var(--brand-secondary);
  border-radius: 0 8px 8px 0;
}

/* --- CTAs ------------------------------------------------------------------ */
/* Full-bleed inside the card. madeready-custom.css already blocks these at
   <=480px; this just makes the card behave the same way at every width. */
.mr-pricing__cta {
  display: block;
  width: 100%;
  margin-top: auto;   /* pinned to the card's floor if a card ever stretches */
  box-sizing: border-box;
}

/* --- Beta launch: only Founding Artist is open -----------------------------
   Free and Pro are not installable during the beta-founder launch, so they read
   as recessed "coming soon" cards with a non-interactive CTA, and Founding Artist
   takes the anchor treatment as the one active plan. Text stays at AA-compliant
   colours (no opacity dimming that would push the muted sub-text below 4.5:1);
   the recessed grey, the muted price and the disabled pill carry the signal. */
.mr-pricing__card--soon {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
}
.mr-pricing__card--soon .mr-pricing__amount,
.mr-pricing__card--soon .mr-pricing__name { color: var(--brand-text-muted); }
.mr-pricing__cta--soon {
  display: block;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(15, 25, 35, 0.05);
  color: var(--brand-text-muted);      /* 7.06:1 on the grey card; a disabled control regardless */
  font-family: var(--brand-body-font);
  font-weight: 600;
  font-size: 15px;
  cursor: not-allowed;
}
/* Founding Artist is now the white anchor, so keep its "for life" note a distinct
   box against the white (it was designed to sit on the old grey --apply card). */
.mr-pricing__card--anchor .mr-pricing__note { background: var(--brand-bg); }

/* --- Hover lift ------------------------------------------------------------
   Mirrors marketing.css:291-301 exactly: -6px, the same 0 12px 28px
   rgba(15,25,35,0.10) shadow, the same 200ms ease-out.

   The (hover: hover) and (pointer: fine) guard is not decoration: without it a
   touch device fires :hover on tap and the card sticks in the lifted state until
   you tap elsewhere.

   The ANCHOR is excluded. It already sits 12px proud of the row, and a hover
   transform on top of that reads as a double-lift — it would also be the one
   card whose resting and hovered states differ by two separate mechanisms.

   Reduced motion needs no guard here: madeready-custom.css kills every
   transition globally under prefers-reduced-motion, so this becomes a no-op. */
@media (hover: hover) and (pointer: fine) {
  .mr-pricing__card:not(.mr-pricing__card--anchor) {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  .mr-pricing__card:not(.mr-pricing__card--anchor):hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.10);
  }
}

/* --- Responsive ------------------------------------------------------------
   IMMEDIATELY after this section's own base rules, NOT in the shared Responsive
   block further up the file. That block sits EARLIER than these base rules and
   would lose to them at equal specificity. */
@media (max-width: 900px) {
  .mr-pricing { padding: 64px 0; }
  .mr-pricing__heading { font-size: 30px; }
  .mr-pricing__lede { margin-bottom: 40px; }
  .mr-pricing__grid { grid-template-columns: 1fr; }
  /* The raised anchor only reads as "raised" against neighbours in a ROW. In a
     single column it is just a card with a stray 12px gap above it. */
  .mr-pricing__card--anchor { margin-top: 0; }
  /* Nothing needs a fixed price floor once the cards are stacked — they no
     longer share a baseline to line up against. */
  .mr-pricing__price { min-height: 0; }
}

/* --- Pricing at <=720px: the full centring treatment (Decision 041) ---------
   The card is one narrow column here, so a centred header over left-aligned
   prose reads as broken alignment. Everything in the card centres.

   Three things make that look INTENTIONAL rather than merely centred, and all
   three are load-bearing:

   1. THE MEASURE IS CAPPED (34-36ch, auto side margins). Centred text only works
      with short lines: a long centred line is exactly what produces the ragged
      left edge the desktop rule (see the comment at the top of this file) is
      right to be afraid of. Letting card copy run the full card width would
      reintroduce the very problem centring is being asked to solve.
   2. THE HANGING BULLET IS GONE. The absolutely-positioned tick becomes an
      INLINE tick, so it centres WITH its text instead of staying pinned to the
      card's left edge. A centred list with markers still hanging off the left is
      the single thing that always reads as a bug.
   3. NOTHING KEEPS A STRAY text-align: left. The tag's align-self, the note's
      left border and the tick's absolute position are each overridden below,
      because one un-centred sibling makes the whole card look like a mistake. */
@media (max-width: 720px) {
  .mr-pricing { padding: 56px 0; }
  .mr-pricing__heading { font-size: 28px; }
  .mr-pricing__lede {
    font-size: 17px;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
  }

  /* The card. text-align only — NOT align-items: center, which would shrink-wrap
     the flex children and collapse both the full-width CTA and the summary's
     divider rule. */
  .mr-pricing__card { text-align: center; padding: 28px 20px; }

  /* The tag is the one child with its own cross-axis alignment. Left as
     flex-start it would sit hard against the card's left edge while everything
     under it centred, which is the exact "half-centred card" failure. */
  .mr-pricing__tag { align-self: center; }

  /* Prices, names and channel labels centre by inheritance. The summary keeps
     its full width so its border-bottom still spans the card as a divider; only
     its text centres. */

  /* THE MEASURE IS THE WHOLE BALLGAME FOR CENTRED TEXT (Decision 041).
     Centred copy does not fail because it is centred, it fails when the lines run
     LONG: every wrap lands at a different x and the left edge goes ragged. 34ch was
     still wide enough here that a three-line feature wrapped into a visibly jagged
     block, and the inline tick made line one wider than the rest, so the list read
     as a half-broken bullet list rather than a composed centred one.

     27ch is the number that holds the items to short, evenly-weighted lines. Do not
     widen it back without looking at the Founding Artist card at 375px, which has
     the longest features and is where this breaks first. */
  .mr-pricing__features {
    max-width: 27ch;
    margin-left: auto;
    margin-right: auto;
  }
  /* Air between the items, and a hairline to separate them. Once the markers stop
     hanging off the left, spacing is the only thing left saying "this is a list",
     so it has to do that work on its own. */
  .mr-pricing__features li {
    padding-left: 0;
    padding-bottom: 14px;
    margin-bottom: 14px;
    line-height: 1.55;
    border-bottom: 1px solid var(--brand-border);
  }
  .mr-pricing__features li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  /* Absolute -> inline. This is the bullet-hang fix: an absolutely positioned tick
     sits outside the centred text flow and pins itself to the card's left edge. */
  .mr-pricing__features li::before {
    position: static;
    display: inline;
    margin-right: 7px;
  }

  /* The "for life" qualifier. Still in the flow, still impossible to miss. The
     left border becomes a TOP border: a 3px rule down the left of a centred
     block is itself a stray left-alignment. */
  .mr-pricing__note {
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    border-left: 0;
    border-top: 3px solid var(--brand-secondary);
    border-radius: 8px;
  }
}

/* ==========================================================================
   Decision 041 — On small screens, ALL content centres
   --------------------------------------------------------------------------
   The user's explicit call (2026-07-14). Below 720px, everything centres:
   headings, ledes, card copy, feature lists, prices, tags, CTAs, and FAQ
   questions AND answers. Nothing keeps a stray left edge.

   This REVERSES, on mobile only, the "prose does NOT centre" rule commented at
   the top of this file. That rule is still correct on DESKTOP, where the layout
   is a wide multi-column grid — and it is untouched there. See the annotation on
   that comment for why the two are not actually in conflict.

   It is SITE-WIDE, not just the funnel pages: .mr-faq, .mr-close and the
   homepage's own sections are shared classes, and Decision 041 says the homepage
   inherits this too.

   WHY THIS BLOCK IS THE LAST THING IN THE FILE: it has to override base rules
   like `.mr-faq__list { text-align: left }` (line ~255) at EQUAL specificity, so
   it can only win by sitting later in the source. Moving it up, or folding it
   into the shared Responsive block at ~line 958, silently breaks every rule in
   it. This repo has shipped that exact bug four times. Do not move it.

   The measure is capped everywhere below (~34-38ch, auto side margins). That is
   not cosmetic: it is the thing that makes centring read as composed instead of
   ragged.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- Hero --------------------------------------------------------------- */
  .mr-hero__copy { text-align: center; }
  .mr-hero__lede {
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }
  .mr-hero__reassure {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .mr-hero__ctas { justify-content: center; }

  /* --- The option tabs ---------------------------------------------------- */
  .mr-choose__panel { text-align: center; }
  /* .mr-spec li is a full-width card now (Decision 050), so it no longer takes the
     36ch text-column clamp — only the room-preview note does. */
  .mr-choose__note {
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- How it works ------------------------------------------------------- */
  .mr-how__step { text-align: center; }
  /* The numeral is a fixed-width flex circle, so text-align cannot move it. */
  .mr-how__num { margin-left: auto; margin-right: auto; }
  .mr-how__step p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- The two-column splits ---------------------------------------------- *
     These stack into one column at 900px, so the original reason to keep them
     left-aligned (centring one half of a side-by-side split leaves the text
     floating against its image) no longer applies by the time we are here. */
  .mr-coa__text,
  .mr-proof__text { text-align: center; }
  .mr-coa__text p,
  .mr-proof__text p,
  .mr-quality__item p,
  .mr-next__item p,
  .mr-story__container p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .mr-quality__item,
  .mr-next__item,
  .mr-story__container p { text-align: center; }

  /* --- FAQ ---------------------------------------------------------------- *
     Beats `.mr-faq__list { text-align: left }` only because it sits later in the
     file. Same specificity (0,1,0).

     The summary's +/- marker is absolutely positioned at the right edge. Once
     the question centres, symmetric padding is what keeps the two apart: the text
     box now ends 36px from the right, the marker sits ~10-24px in, so there is
     real clearance and the marker still reads as the deliberate affordance it is
     rather than as something the text ran into. */
  .mr-faq__list { text-align: center; }
  .mr-faq__item summary { padding: 20px 36px; }
  .mr-faq__item summary::after { right: 10px; }
  .mr-faq__item p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Closing CTA -------------------------------------------------------- *
     Already centred; it is the MEASURE that was missing. 62ch on a 375px screen
     is simply "full width", which is what made it read as ragged rather than
     composed. Dark section, so secondary text stays translucent white — never
     the muted grey (#4A5568 on #0F1923 is 2.36:1 and fails). */
  .mr-close { padding: 72px 0; }
  .mr-close__lede,
  .mr-close__alt {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   /apply — the Founding Artist application                    (Decision 041)
   --------------------------------------------------------------------------
   A fresh .mr-apply__* block. It reuses NONE of the lumaprints classes
   (.mr-dash, .mr-flow, .mr-cart, .mr-img, .mr-ops, .mr-bfs) — those were
   authored for the dead fulfiller pitch and carry its layout assumptions with
   them.

   Backgrounds on this page: offer GREY -> form WHITE -> close DARK.
   (.mr-close declares its own background further up.)

   WHY THIS SITS AFTER THE DECISION 041 BLOCK ABOVE, WHICH SAYS IT MUST BE LAST:
   that block has to be last only so it can beat SHARED base rules
   (.mr-faq__list, .mr-close__lede) at equal specificity. Every selector below is
   a brand-new class that appears nowhere else in this file, so nothing here
   overlaps it and nothing here can shadow it. What still holds, and is the rule
   that actually matters, is that this section's own @media blocks sit IMMEDIATELY
   after its own base rules. A media query placed EARLIER in the file than the
   base rules it means to override loses at equal specificity. This repo has
   shipped that bug four times; it is not shipping it a fifth.

   THE PROBLEM THIS PAGE HAS TO SOLVE
   It is the highest-trust page on the site: an artist is handing over the domain
   of the store they make their living from. So the terms are typeset as CONTENT,
   not as fine print, and the form sits in a composed column of its own rather
   than bolted onto the bottom of a marketing page.
   ========================================================================== */

/* --- Section 1: the offer (GREY) ------------------------------------------ */
.mr-apply {
  padding: 96px 0;
  background: var(--brand-bg);   /* GREY #F5F8FA. The names are inverted:
                                    --brand-bg is the grey, --brand-bg-alt white. */
}
.mr-apply__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* The signature eyebrow -> heading -> lede rhythm. */
.mr-apply__eyebrow {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ink-accent);   /* #007eaf, 4.56:1 — the small-cyan-text colour */
  margin: 0 0 14px;
}
.mr-apply__heading {
  font-family: var(--brand-heading-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 18px;
}
.mr-apply__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 60ch;
  margin: 0 auto 56px;   /* auto sides: max-width alone does not centre a block */
}

/* --- The terms ------------------------------------------------------------
   A <dl>, because that is exactly what this is: four terms and their
   definitions. The <div> wrappers are valid inside a <dl> and are what
   .reveal-group promotes to reveal targets.

   White cards on the grey, 2x2 — the same visual language as the plan cards on
   /pricing, so an artist arriving from that page recognises what they are
   reading. The terms ARE the argument of this page, so they carry card weight.
   They are not a fine-print strip tucked under the form. */
.mr-apply__terms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  text-align: left;   /* prose does not centre on desktop. It DOES at <=720; see below. */
}
.mr-apply__term {
  background: var(--brand-bg-alt);            /* WHITE */
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 26px 24px;
  box-sizing: border-box;
}
.mr-apply__term-name {
  font-family: var(--brand-heading-font);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-apply__term-body {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;   /* <dd> carries a 40px UA indent. Kill it, or every term hangs right. */
}
.mr-apply__term-body a {
  color: var(--mr-ink-accent);   /* 4.56:1 on the white card */
  font-weight: 600;
}

/* The "for life" qualifier. This is the sentence that stops "for life" being read
   as "every future tier, free", so it is boxed, kept in the flow, and set at full
   body size. Not a tooltip, not a footnote, not dropped for space.
   Muted on white is 7.53:1. */
.mr-apply__note {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-muted);
  text-align: left;
  max-width: 68ch;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--brand-bg-alt);
  border-left: 3px solid var(--brand-secondary);
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
}

/* --- Section 2: the form (WHITE) ------------------------------------------ */
.mr-apply__form-section {
  padding: 96px 0;
  background: var(--brand-bg-alt);   /* WHITE #FFFFFF */
}
/* Deliberately NOT the 1200px content width. A form stretched across a desktop
   viewport reads as a database entry screen; 640px is a column you can read down,
   and it is what makes this a page rather than a widget. */
.mr-apply__form-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
}
.mr-apply__form-heading {
  font-family: var(--brand-heading-font);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 14px;
}
.mr-apply__form-lede {
  font-family: var(--brand-body-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--brand-text-muted);
  max-width: 44ch;
  margin: 0 auto 40px;
}

.mr-apply__form { text-align: left; }
.mr-apply__field { margin: 0 0 22px; }

/* Honeypot. Pulled off-screen rather than display:none, because a bot that
   respects display:none would skip it and never take the bait, whereas one that
   fills every parseable input still fills this. aria-hidden + tabindex=-1 in the
   markup keep it away from people and screen readers; this only has to remove it
   visually. It carries no width in the layout. */
.mr-apply__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A real <label for>. A placeholder is NOT a label: it disappears the moment the
   artist starts typing, so the field loses its name exactly when they might want
   to check it. */
.mr-apply__label {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-text);
  margin: 0 0 8px;
}
/* "Optional" is stated IN the label, not implied by the absence of an asterisk.
   Three of the five fields are required, so silence would leave the artist
   guessing on the two that are not. */
.mr-apply__optional {
  font-weight: 400;
  font-size: 13px;
  color: var(--brand-text-muted);   /* 7.53:1 on white */
  margin-left: 6px;
}

/* 16px is a HARD FLOOR here, and it is not a typography preference. iOS Safari
   zooms the whole viewport when a focused input's font-size is below 16px, and it
   does not zoom back out — the artist is left scrolling the form sideways. */
.mr-apply__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brand-text);
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color 200ms ease-out;
}
.mr-apply__input::placeholder {
  color: var(--brand-text-muted);   /* 7.53:1 on white, not a pale grey nobody can read */
  opacity: 1;                       /* Firefox dims placeholders by default */
}
/* The border shift is a SECOND channel, never the focus indicator. The indicator
   stays the global *:focus-visible outline from madeready-custom.css (2px cyan,
   2px offset) — a border colour change alone is invisible to anyone who cannot
   distinguish it, so the outline is not traded away for it. */
.mr-apply__input:focus { border-color: var(--brand-primary-hover); }
.mr-apply__textarea {
  min-height: 120px;
  resize: vertical;   /* vertical only. Horizontal resize is a route to overflow. */
}

.mr-apply__hint {
  font-family: var(--brand-body-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-text-muted);
  margin: 8px 0 0;
}

.mr-apply__submit {
  display: block;
  width: 100%;
  margin-top: 28px;
  box-sizing: border-box;
}
/* The submitting state. The label changes to "Sending...", which is a STATUS the
   artist has to be able to read — so this is not an "inactive component" of the
   kind WCAG exempts from the contrast requirement, and it has to hold up.

   A plain `opacity: 0.6` would have composited BOTH the cyan fill and the ink
   label toward white and landed the label at 2.62:1. Measured, and a fail. So the
   two colours are set explicitly instead: ink #0F1923 on cyan-at-50% #80D6F6 =
   10.87:1 (measured). The fill still reads as visibly inactive. */
.mr-apply__submit:disabled,
.mr-apply__submit:disabled:hover {
  background-color: #80D6F6;
  color: var(--brand-dark);
  box-shadow: none;
  cursor: default;
}

/* --- The result region ----------------------------------------------------
   role="status" in the markup, so BOTH outcomes are announced, the failure as
   loudly as the success. It is never toggled with [hidden]: a live region has to
   EXIST at page load for a screen reader to be watching it, so it stays in the
   DOM and simply collapses while empty. */
.mr-apply__result {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);   /* ink in BOTH states. Never muted on anything. */
  text-align: left;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
}
.mr-apply__result:empty { display: none; }
/* Ink on #EAF7FD = 16.24:1 (measured). */
.mr-apply__result[data-state="success"] {
  background: #EAF7FD;
  border-left: 3px solid var(--brand-secondary);
}
/* Ink on #FFF4F2 = 16.45:1 (measured). The red is the RULE, never the text: the
   message has to be read, not merely noticed. Colour is never the only carrier of
   the meaning here — the words say what happened. */
.mr-apply__result[data-state="error"] {
  background: #FFF4F2;
  border-left: 3px solid #C0392B;
}

/* The promise. It is here only because it is true today. */
.mr-apply__promise {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--brand-text-muted);
  text-align: center;
  max-width: 44ch;
  margin: 28px auto 0;
}

/* --- Responsive ------------------------------------------------------------
   IMMEDIATELY after this section's own base rules, NOT in the shared Responsive
   block further up the file. That block sits EARLIER than these base rules and
   would lose to them at equal specificity. */
@media (max-width: 900px) {
  .mr-apply,
  .mr-apply__form-section { padding: 64px 0; }
  .mr-apply__heading,
  .mr-apply__form-heading { font-size: 30px; }
  .mr-apply__lede { margin-bottom: 40px; }
  .mr-apply__terms { grid-template-columns: 1fr; }
}

/* --- /apply at <=720px: the full centring treatment (Decision 041) ----------
   Everything centres: headings, ledes, terms, labels, hints, the inputs' own
   TEXT, the result message, the promise. Nothing keeps a stray left edge, because
   one un-centred sibling makes the whole column look like a mistake — and on THIS
   page, "looks like a mistake" and "do not give them your store domain" are the
   same thought.

   What makes centring read as COMPOSED rather than merely centred is the MEASURE.
   Centred copy does not fail because it is centred; it fails when the lines run
   LONG, because every wrap lands at a different x and the left edge goes ragged.
   So every text block below is capped at ~30-34ch with auto side margins, exactly
   as .mr-pricing__features is. Do not widen these back without looking at the page
   at 375px, which is where it breaks first. */
@media (max-width: 720px) {
  .mr-apply,
  .mr-apply__form-section { padding: 56px 0; }

  .mr-apply__heading,
  .mr-apply__form-heading { font-size: 28px; }
  .mr-apply__lede {
    font-size: 17px;
    max-width: 34ch;
    margin-bottom: 36px;
  }
  .mr-apply__form-lede {
    font-size: 16px;
    max-width: 30ch;
    margin-bottom: 32px;
  }

  /* The terms. text-align on the grid; only the definition BODY needs the cap,
     since the term names are short enough to centre cleanly on their own. */
  .mr-apply__terms {
    text-align: center;
    gap: 16px;
    margin-bottom: 28px;
  }
  .mr-apply__term { padding: 24px 20px; }
  .mr-apply__term-body {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The qualifier. A 3px rule down the LEFT of a centred block is itself a stray
     left-alignment, so the border becomes a TOP border. Still in the flow, still
     impossible to miss. */
  .mr-apply__note {
    text-align: center;
    font-size: 14px;
    max-width: 34ch;
    padding: 16px 18px;
    border-left: 0;
    border-top: 3px solid var(--brand-secondary);
    border-radius: 8px;
  }

  /* The form. The label sits centred directly above its input and the input runs
     full width, so the pair reads as one centred unit. */
  .mr-apply__form { text-align: center; }
  .mr-apply__field { margin-bottom: 20px; }
  .mr-apply__label { text-align: center; }

  /* The input's TEXT centres too, and that is the whole point of this block. A
     full-width field whose text and placeholder start hard against the left edge
     is the single most conspicuous stray left-aligned element in an otherwise
     centred column — it is exactly what makes a page look half-converted.
     font-size stays 16px: below that, iOS Safari zooms the viewport on focus. */
  .mr-apply__input {
    text-align: center;
    font-size: 16px;
  }
  .mr-apply__hint {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Same reasoning as the note: the left rule becomes a top rule. */
  .mr-apply__result {
    text-align: center;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    border-left: 0;
    border-radius: 8px;
  }
  .mr-apply__result[data-state="success"] { border-top: 3px solid var(--brand-secondary); }
  .mr-apply__result[data-state="error"] { border-top: 3px solid #C0392B; }

  .mr-apply__promise { max-width: 30ch; }
}

/* ==========================================================================
   The Customizer  (/customizer)                              (Decision 041)
   --------------------------------------------------------------------------
   A fresh .mr-cust__* block. It reuses NONE of the lumaprints classes
   (.mr-dash, .mr-flow, .mr-cart, .mr-img, .mr-ops, .mr-bfs) — those live in
   madeready-custom.css, a byte-identical DO-NOT-EDIT copy of the theme CSS,
   and are named for the dead B2B fulfiller pitch (Decision 039).

   REUSED verbatim, because they are already generic and already correct:
     .mr-close      the dark closing CTA (declares its own background further up)
     .btn-primary

   Five own-content sections alternate:
     flow GREY -> materials WHITE -> variants GREY -> quality WHITE ->
     certificate GREY -> close DARK.
   The background is carried by a modifier (--grey / --white) so the section
   markup can stay flat. The card fill is set CONTEXTUALLY off that modifier
   (a card on a grey section is white, and vice versa), which is the same
   recess/raise language the rest of the site uses.

   WHY THIS SITS AFTER THE DECISION 041 CENTRING BLOCK, WHICH SAYS IT MUST BE
   LAST: that block is last only so it can beat SHARED base rules
   (.mr-faq__list, .mr-close__lede) at equal specificity. Every selector below
   is a brand-new class that appears nowhere else in this file, so nothing here
   overlaps it and nothing here can shadow it. What still holds — and is the
   rule that actually matters — is that this section's own @media blocks sit
   IMMEDIATELY after its own base rules. A media query placed EARLIER in the
   file than the base rules it overrides loses at equal specificity. This repo
   has shipped that bug four times; it is not shipping it a fifth.
   ========================================================================== */
.mr-cust {
  padding: 96px 0;
}
.mr-cust--grey  { background: var(--brand-bg); }      /* GREY  #F5F8FA. The names
                                                         are inverted: --brand-bg is
                                                         the grey, --brand-bg-alt white. */
.mr-cust--white { background: var(--brand-bg-alt); }  /* WHITE #FFFFFF */
.mr-cust__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;   /* the HEADER centres. Card prose hands alignment back to
                           left below; it re-centres at <=720 (Decision 041). */
}

/* --- Header: the signature eyebrow -> heading -> lede rhythm --------------- */
.mr-cust__eyebrow {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ink-accent);   /* #007eaf, 4.56:1 — the small-cyan-text colour */
  margin: 0 0 14px;
}
.mr-cust__heading {
  font-family: var(--brand-heading-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 18px;
}
.mr-cust__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 62ch;
  margin: 0 auto 56px;   /* auto sides: max-width alone does not centre a block */
}
/* A single centred body paragraph (the certificate section's second line). */
.mr-cust__body {
  font-family: var(--brand-body-font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--brand-text);
  max-width: 60ch;
  margin: 0 auto;
}

/* --- Section 1: the flow --------------------------------------------------- */
/* Six stages, 3x2 on desktop. An <ol> because the ORDER is the point: the
   collector really does move through them in sequence. No list markers (the
   numeral badge is the marker), so there is no hanging bullet to centre away
   at <=720. */
.mr-cust__flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;   /* prose does not centre on desktop. It DOES at <=720. */
}
/* Each step is a white card on this grey section, so the numbered circle sits
   grounded in a card instead of floating on the flat background. Matches the card
   treatment of the materials sections below. (Decision 048.) */
.mr-cust__stage {
  box-sizing: border-box;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 26px 26px 28px;
}
@media (hover: hover) and (pointer: fine) {
  .mr-cust__stage { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
  .mr-cust__stage:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.08);
  }
}
/* Cyan fill, DARK INK numeral: 6.85:1. White on this cyan is 2.59:1 and fails
   both AA and the 3:1 UI bar. Do not invert it. Static, not the homepage's
   bobbing numeral: six of them drifting at once would read as noise. */
.mr-cust__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-family: var(--brand-body-font);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
}
.mr-cust__stage h2 {
  font-family: var(--brand-heading-font);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-cust__stage p {
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--brand-text);
  margin: 0;
}

/* --- Section 2: the materials --------------------------------------------- */
.mr-cust__group { margin-top: 48px; }
.mr-cust__group-title {
  font-family: var(--brand-heading-font);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 8px;
}
.mr-cust__group-note {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-muted);   /* 7.53:1 on white */
  max-width: 44ch;
  margin: 0 auto 24px;
}
/* Paper names + descriptions. Real, crawlable text — never an image of text.
   Two columns on desktop, mirroring the homepage's .mr-spec so an artist who
   arrives from there recognises the layout. No card border: the papers are a
   read-down list, not a shelf of products. */
.mr-cust__papers {
  list-style: none;
  margin: 32px 0 0;                 /* was 16px: the group title was crowding the list */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
  text-align: left;
}
/* Each surface sits on a soft card. Still a read-down index of real, crawlable
   names, but with room and rhythm so it no longer reads as a flat list, and the
   group title above stops looking crowded onto the first row. (Decision 046
   revisits the earlier "no card, read-down list" call.) */
.mr-cust__papers li {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 20px 22px;
}
@media (hover: hover) and (pointer: fine) {
  .mr-cust__papers li { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
  .mr-cust__papers li:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.08);
  }
}
.mr-cust__papers h4 {
  font-family: var(--brand-heading-font);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0 0 8px;
}
/* A small cyan rounded-square before each name: a spark of brand colour and a
   rhythm down the list. Decorative, so it is not announced to a screen reader. */
.mr-cust__papers h4::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--brand-primary);
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.mr-cust__papers p {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;
}
/* Frame / mat names. Not pills any more: fifteen + twelve pills read as a busy,
   overwhelming cloud. Instead, a calm dotted index inside one soft card, matching
   the paper cards above (grey fill, cyan rounded-square accents). Its own media
   queries follow immediately, per this file's source-order rule. */
.mr-cust__chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 22px 24px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
  text-align: left;
}
.mr-cust__chips li {
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-dark);
}
.mr-cust__chips li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-primary);
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
@media (max-width: 720px) {
  .mr-cust__chips { grid-template-columns: repeat(2, 1fr); padding: 18px; }
}
@media (max-width: 480px) {
  .mr-cust__chips { grid-template-columns: 1fr; }
}

/* --- Sections 3 & 4: the card grid ---------------------------------------- */
/* One shared card grid for "no variant explosion" (2 cards) and "print quality"
   (4 cards). The card fill is contextual: white card on a grey section, grey
   card on a white section. */
.mr-cust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
  text-align: left;   /* prose does not centre on desktop. It DOES at <=720. */
}
.mr-cust__card {
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 32px 28px;
  box-sizing: border-box;
}
.mr-cust--grey  .mr-cust__card { background: var(--brand-bg-alt); }  /* white on grey */
.mr-cust--white .mr-cust__card { background: var(--brand-bg); }      /* grey on white */
.mr-cust__card h3 {
  font-family: var(--brand-heading-font);
  font-size: 21px;
  line-height: 1.25;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-cust__card p {
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--brand-text);
  margin: 0;
}

/* --- Hover lift ------------------------------------------------------------
   Mirrors the pricing cards exactly: -6px, the same shadow, the same 200ms.
   The (hover: hover) and (pointer: fine) guard stops a touch device firing
   :hover on tap and sticking the card lifted. Reduced motion needs no guard:
   madeready-custom.css kills every transition globally under
   prefers-reduced-motion, so this becomes a no-op. */
@media (hover: hover) and (pointer: fine) {
  .mr-cust__card {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  .mr-cust__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.10);
  }
}

/* --- Responsive ------------------------------------------------------------
   IMMEDIATELY after this section's own base rules, NOT in the shared Responsive
   block further up the file. That block sits EARLIER than these base rules and
   would lose to them at equal specificity. */
@media (max-width: 900px) {
  .mr-cust { padding: 64px 0; }
  .mr-cust__heading { font-size: 30px; }
  .mr-cust__lede { margin-bottom: 40px; }
  .mr-cust__flow { grid-template-columns: 1fr; gap: 16px; }
  .mr-cust__papers { grid-template-columns: 1fr; }
  .mr-cust__grid { grid-template-columns: 1fr; }
}

/* --- The customizer at <=720px: the full centring treatment (Decision 041) --
   Everything centres: headings, ledes, stage copy, paper names and their
   descriptions, card copy, the certificate body. Nothing keeps a stray left
   edge, because one un-centred sibling makes the whole column look like a
   mistake.

   What makes centring read as COMPOSED rather than merely centred is the
   MEASURE. Centred copy does not fail because it is centred; it fails when the
   lines run LONG, because every wrap lands at a different x and the left edge
   goes ragged. So every text block below is capped at ~30-36ch with auto side
   margins, exactly as .mr-pricing__features is. Do not widen these back without
   looking at the page at 375px, which is where it breaks first.

   There are no hanging list markers to fix here: the flow, papers and chips are
   all list-style:none and the numeral badge already centres via auto margins,
   so this block is purely text-align + a capped measure. */
@media (max-width: 720px) {
  .mr-cust { padding: 56px 0; }
  .mr-cust__heading { font-size: 28px; }
  .mr-cust__lede {
    font-size: 17px;
    max-width: 34ch;
    margin-bottom: 36px;
  }
  .mr-cust__body { max-width: 34ch; }

  /* The flow. The numeral is a fixed-width flex circle, so text-align cannot
     move it — auto side margins do. */
  .mr-cust__stage { text-align: center; }
  .mr-cust__num { margin-left: auto; margin-right: auto; }
  .mr-cust__stage p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The materials. The group title and note centre by inheritance; only the
     paper description needs the cap, since the names are short. */
  .mr-cust__group { margin-top: 40px; }
  .mr-cust__papers { text-align: center; gap: 26px; }
  .mr-cust__papers p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The card grids. text-align only — NOT align-items, which would shrink-wrap
     the card children. */
  .mr-cust__grid { gap: 16px; }
  .mr-cust__card { text-align: center; padding: 28px 20px; }
  .mr-cust__card p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   For Artists — the objection-handling page  (/for-artists)  (Decision 040/041)
   --------------------------------------------------------------------------
   A fresh .mr-artists__* block. It reuses NONE of the lumaprints classes
   (.mr-dash, .mr-flow, .mr-cart, .mr-img, .mr-ops, .mr-bfs) — those live in
   madeready-custom.css, a byte-identical DO-NOT-EDIT copy of the theme CSS,
   and are named for the dead B2B fulfiller pitch (Decision 039).

   REUSED verbatim, because they are already generic and already correct:
     .mr-close      the dark closing CTA (declares its own background further up)
     .btn-primary

   This page does not sell; the homepage does. It REASSURES: four honest
   objections, answered. The sections alternate:
     hero GREY -> workflow WHITE -> preview GREY -> quality WHITE ->
     company GREY -> close DARK.
   The background is carried by a modifier (--grey / --white) so the section
   markup stays flat, and the card fill is set CONTEXTUALLY off that modifier
   (white card on a grey section, grey card on a white section) — the same
   recess/raise language the rest of the site uses.

   WHY THIS SITS AFTER THE DECISION 041 CENTRING BLOCK, WHICH SAYS IT MUST BE
   LAST: that block is last only so it can beat SHARED base rules
   (.mr-faq__list, .mr-close__lede) at equal specificity. Every selector below
   is a brand-new class that appears nowhere else in this file, so nothing here
   overlaps it and nothing here can shadow it. What still holds — and is the
   rule that actually matters — is that this section's own @media blocks sit
   IMMEDIATELY after its own base rules. A media query placed EARLIER in the
   file than the base rules it overrides loses at equal specificity. This repo
   has shipped that bug four times; it is not shipping it a fifth.
   ========================================================================== */
.mr-artists {
  padding: 96px 0;
}
.mr-artists--grey  { background: var(--brand-bg); }      /* GREY  #F5F8FA. The names
                                                            are inverted: --brand-bg is
                                                            the grey, --brand-bg-alt white. */
.mr-artists--white { background: var(--brand-bg-alt); }  /* WHITE #FFFFFF */
.mr-artists__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;   /* the HEADER centres. The prose hands alignment back to
                           left below; it re-centres at <=720 (Decision 041). */
}

/* --- Header: the signature eyebrow -> heading -> lede rhythm ---------------
   The hero h1 and every objection h2 share .mr-artists__heading: this is a
   reassurance page, not the homepage, so there is one 40px heading treatment
   rather than a distinct 60px hero. The eyebrows carry the objection in the
   artist's own words ("I already have a print workflow"), so the uppercase
   transform lands on their voice, not ours. */
.mr-artists__eyebrow {
  display: block;
  font-family: var(--brand-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ink-accent);   /* #007eaf, 4.56:1 — the small-cyan-text colour */
  margin: 0 0 14px;
}
.mr-artists__heading {
  font-family: var(--brand-heading-font);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 0 0 18px;
}
.mr-artists__lede {
  font-family: var(--brand-body-font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--brand-text);
  max-width: 60ch;
  margin: 0 auto;   /* auto sides: max-width alone does not centre a block. No
                       bottom margin — the body/cards below carry their own top. */
}

/* A continuing prose paragraph. The header centres; this is LEFT-aligned prose,
   held to a readable measure and centred AS A COLUMN. It re-centres at <=720. */
.mr-artists__body {
  font-family: var(--brand-body-font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--brand-text);
  max-width: 66ch;
  margin: 26px auto 0;
  text-align: left;
}

/* --- Objection 3: the three points (WHITE section) ------------------------
   Grey cards on the white section, so they read as recessed panels rather than
   a shelf of products. list-style:none + padding:0 — there is no hanging bullet
   to centre away at <=720. */
.mr-artists__points {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;   /* prose does not centre on desktop. It DOES at <=720. */
}
.mr-artists__point {
  background: var(--brand-bg);            /* grey card on the white section */
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 28px 24px;
  box-sizing: border-box;
}
.mr-artists__point h3 {
  font-family: var(--brand-heading-font);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-artists__point p {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;
}

/* --- Objection 4: the two facts (GREY section) ----------------------------
   White cards on the grey section — the same recess/raise language as the terms
   on /apply, so an artist arriving from that page recognises the layout. */
.mr-artists__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 48px 0 0;
  text-align: left;   /* prose does not centre on desktop. It DOES at <=720. */
}
.mr-artists__fact {
  background: var(--brand-bg-alt);        /* white card on the grey section */
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 28px 24px;
  box-sizing: border-box;
}
.mr-artists__fact h3 {
  font-family: var(--brand-heading-font);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 10px;
}
.mr-artists__fact p {
  font-family: var(--brand-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;
}
.mr-artists__fact-link {
  display: inline-block;
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--mr-ink-accent);   /* #007eaf, 4.56:1 on the white card */
  margin-top: 14px;
}
.mr-artists__fact-link:hover { text-decoration: underline; }

/* --- Objection 2: the proof card (GREY section) ---------------------------
   A single wider white card carrying the live-storefront proof. A live store
   beats any claim we could write, so it holds a real, descriptive link out. */
.mr-artists__proof {
  background: var(--brand-bg-alt);        /* white card on the grey section */
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 36px 32px;
  margin: 48px auto 0;
  max-width: 760px;
  text-align: left;
  box-sizing: border-box;
}
.mr-artists__proof-title {
  font-family: var(--brand-heading-font);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  margin: 0 0 12px;
}
.mr-artists__proof p {
  font-family: var(--brand-body-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--brand-text);
  margin: 0 0 18px;
}
.mr-artists__proof-link {
  display: inline-block;
  font-family: var(--brand-body-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--mr-ink-accent);   /* #007eaf, 4.56:1 on the white card */
}
.mr-artists__proof-link:hover { text-decoration: underline; }

/* --- Hover lift ------------------------------------------------------------
   Mirrors the pricing and customizer cards exactly: -6px, the same shadow, the
   same 200ms. The (hover: hover) and (pointer: fine) guard stops a touch device
   firing :hover on tap and sticking the card lifted. Reduced motion needs no
   guard: madeready-custom.css kills every transition globally under
   prefers-reduced-motion, so this becomes a no-op. */
@media (hover: hover) and (pointer: fine) {
  .mr-artists__point,
  .mr-artists__fact,
  .mr-artists__proof {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  .mr-artists__point:hover,
  .mr-artists__fact:hover,
  .mr-artists__proof:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 25, 35, 0.10);
  }
}

/* --- Responsive ------------------------------------------------------------
   IMMEDIATELY after this section's own base rules, NOT in the shared Responsive
   block further up the file. That block sits EARLIER than these base rules and
   would lose to them at equal specificity. */
@media (max-width: 900px) {
  .mr-artists { padding: 64px 0; }
  .mr-artists__heading { font-size: 30px; }
  .mr-artists__points { grid-template-columns: 1fr; }
  .mr-artists__facts { grid-template-columns: 1fr; }
}

/* --- /for-artists at <=720px: the full centring treatment (Decision 041) ----
   Everything centres: headings, ledes, body prose, the point cards, the fact
   cards, the proof card. Nothing keeps a stray left edge, because one
   un-centred sibling makes the whole column look like a mistake.

   What makes centring read as COMPOSED rather than merely centred is the
   MEASURE. Centred copy does not fail because it is centred; it fails when the
   lines run LONG, because every wrap lands at a different x and the left edge
   goes ragged. So every text block below is capped at ~30-34ch with auto side
   margins, exactly as .mr-pricing__features is. Do not widen these back without
   looking at the page at 375px, which is where it breaks first.

   There are no hanging list markers to fix here: .mr-artists__points is
   list-style:none with padding:0, so this block is purely text-align + a capped
   measure. */
@media (max-width: 720px) {
  .mr-artists { padding: 56px 0; }
  .mr-artists__heading { font-size: 28px; }
  .mr-artists__lede {
    font-size: 17px;
    max-width: 34ch;
  }
  .mr-artists__body {
    text-align: center;
    font-size: 16px;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The point cards. text-align only — NOT align-items, which would shrink-wrap
     the card children. The copy is capped so centred lines stay short. */
  .mr-artists__points { text-align: center; gap: 16px; margin-top: 36px; }
  .mr-artists__point { text-align: center; padding: 24px 20px; }
  .mr-artists__point p {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The fact cards. The link centres by inheritance (inline-block under a
     centred parent). */
  .mr-artists__facts { text-align: center; gap: 16px; margin-top: 36px; }
  .mr-artists__fact { text-align: center; padding: 24px 20px; }
  .mr-artists__fact p {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* The proof card. */
  .mr-artists__proof {
    text-align: center;
    padding: 28px 22px;
    margin-top: 36px;
  }
  .mr-artists__proof p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }
}