/* Mivio site pages restyled to the Mivio Design System.
   Tokens + components come from styles.css (paper/ink palette, Courier meta voice,
   square corners, hairlines, colour-swap hovers). This file is layout only. */

.ds-announce { min-height: 40px; padding: 11px var(--rail-gutter); display: flex; justify-content: center; align-items: center; gap: 8px 18px; flex-wrap: wrap; background: var(--ink); color: var(--paper); font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.ds-announce a { text-decoration: underline; text-underline-offset: 3px; }
.ds-announce a:hover { color: var(--paper); opacity: .8; }
.mv-header-logo img { width: 112px; height: auto; }
.mv-header .mv-button { min-height: 40px; }

/* ---------- Eyebrow/meta helpers ---------- */
.ds-mono { font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.ds-mono--dim { color: var(--soft-ink); }

/* ---------- Campaign hero ---------- */
.ds-hero { position: relative; display: flex; align-items: center; min-height: 560px; overflow: hidden; background: var(--ink); color: var(--paper); }
.mv-image-frame > img, .mv-image-frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-hero > img, .ds-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; filter: brightness(.66) saturate(.8); }
.ds-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.22) 62%, rgba(0,0,0,.38)); }
.ds-hero > div { position: relative; z-index: 2; max-width: 680px; padding: 76px var(--rail-gutter); display: grid; gap: 20px; justify-items: start; }
.ds-hero h1 { margin: 0; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.1; font-weight: 400; letter-spacing: -.04em; text-wrap: balance; }
.ds-hero h1 em { display: block; font-style: normal; text-wrap: balance; }
.ds-hero > div { max-width: 860px; }
.ds-hero p { max-width: 500px; margin: 0; font-size: 16px; line-height: 1.55; }
.ds-hero small { font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.ds-hero-rating { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(245,244,239,.45); font-size: 13px; color: inherit; }
.ds-hero-rating u { text-underline-offset: 3px; }
.ds-hero .mv-rating { color: inherit; }

/* Paper split hero */
.ds-hero--paper { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 0; }
.ds-hero--paper::after { display: none; }
.ds-hero--paper > div { max-width: none; }
.ds-hero--paper > figure { margin: 0; height: 100%; }
.ds-hero--paper > figure img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; }

/* ---------- Hairline strips ---------- */
.ds-proofrow { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
.ds-proofrow > div { padding: 20px var(--rail-gutter); display: grid; gap: 6px; border-right: 1px solid var(--line); }
.ds-proofrow > div:last-child { border-right: 0; }
.ds-proofrow b { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.ds-proofrow small, .ds-proofrow span { font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }

.ds-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-metrics > div { padding: 28px 18px; display: grid; gap: 8px; justify-items: center; text-align: center; border-right: 1px solid var(--line); }
.ds-metrics > div:last-child { border-right: 0; }
.ds-metrics--3 { grid-template-columns: repeat(3, 1fr); }
.ds-metrics strong { font-size: 30px; font-weight: 400; letter-spacing: -.035em; }
.ds-metrics b { font-size: 16px; font-weight: 500; }
.ds-metrics span, .ds-metrics p { margin: 0; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }
.ds-metrics svg { width: 22px; height: 22px; }

/* ---------- Blocks & headings ---------- */
.ds-block { padding: 76px var(--rail-gutter) 86px; }
.ds-block--cream { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-heading { max-width: 800px; display: grid; gap: 14px; margin: 0 0 46px; }
.ds-heading h1, .ds-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; font-weight: 400; letter-spacing: -.035em; }
.ds-heading p { margin: 0; max-width: 680px; font-size: 16px; line-height: 1.55; }
.ds-heading--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.ds-grid-2, .ds-grid-3, .ds-grid-4 { display: grid; gap: var(--gap-grid); }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid-3 > .mv-card, .ds-grid-4 > .mv-card { display: flex; flex-direction: column; }
.ds-grid-3 > .mv-card > .mv-image-frame, .ds-grid-4 > .mv-card > .mv-image-frame { flex: 0 0 auto; }
.ds-grid-3 > .mv-card > p, .ds-grid-4 > .mv-card > p { flex: 1 0 auto; }
.ds-grid-3 > .mv-card > a, .ds-grid-4 > .mv-card > a { margin-top: auto; align-self: flex-start; }

.ds-fact { display: grid; gap: 12px; align-content: start; justify-items: start; }
.ds-fact > span:first-child { font: 11px/1 var(--font-mono); letter-spacing: .05em; color: var(--soft-ink); }
.ds-fact h3 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 400; letter-spacing: -.03em; }
.ds-fact p { margin: 0; font-size: 14px; line-height: 1.55; }
.ds-fact b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.ds-fact svg { width: 24px; height: 24px; }

/* ---------- Splits ---------- */
.ds-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-split > div { padding: 72px var(--rail-gutter); display: grid; gap: 20px; align-content: center; justify-items: start; }
.ds-split h2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; font-weight: 400; letter-spacing: -.04em; }
.ds-split p { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.6; }
.ds-split > figure { margin: 0; position: relative; overflow: hidden; }
.ds-split > figure img, .ds-split > img, .ds-split > figure video, .ds-split > video { width: 100%; height: 100%; min-height: 480px; object-fit: cover; display: block; }
.ds-split > figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 16px; background: var(--protection-gradient); color: var(--paper); font: 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.ds-split--dark { background: var(--field-black); color: var(--paper); border: 0; }
.ds-split--plain { background: transparent; border: 0; }

/* Numbered facts nested inside a split's copy column: 2×2 on a hairline grid. */
.ds-facts-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; margin-top: var(--space-06); border-top: 1px solid var(--ink); }
.ds-facts-inline article { padding: var(--space-06) var(--space-07) var(--space-07) 0; display: grid; gap: var(--space-03); align-content: start; border-bottom: 1px solid var(--line); }
.ds-facts-inline article:nth-child(odd) { border-right: 1px solid var(--line); }
.ds-facts-inline article:nth-child(even) { padding-left: var(--space-07); padding-right: 0; }
.ds-facts-inline article:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.ds-facts-inline span { font: var(--type-meta-size)/1 var(--font-mono); letter-spacing: .05em; color: var(--soft-ink); }
.ds-facts-inline h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: var(--weight-regular); letter-spacing: -.02em; }
.ds-facts-inline p { max-width: none; margin: 0; font-size: 14px; line-height: 1.55; color: var(--soft-ink); }
@media (max-width: 640px) {
  .ds-facts-inline { grid-template-columns: 1fr; }
  .ds-facts-inline article, .ds-facts-inline article:nth-child(even) { padding: var(--space-05) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ds-facts-inline article:last-child { border-bottom: 0; }
}

/* ---------- Video split (half / half) ----------
   Two panels: footage uncovered on the left, the feature list on a cream panel
   on the right. The media stretches the full row height so there is no dead
   space, and the list is a 2×3 grid so the row stays landscape enough that the
   crop keeps the product readable. */
.ds-videosplit { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink); }
.ds-videosplit-media { position: relative; overflow: hidden; }
.ds-videosplit-media > video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.ds-videosplit-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px 18px; background: var(--protection-gradient); color: var(--paper); font: var(--type-meta-sm-size)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.ds-videosplit-body { background: var(--cream); padding: var(--space-16) 4vw; display: flex; flex-direction: column; justify-content: center; gap: var(--space-08); }
.ds-videosplit-head { display: grid; gap: var(--space-04); }
.ds-videosplit-head h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.14; font-weight: var(--weight-regular); letter-spacing: -.035em; text-wrap: balance; }
.ds-videosplit-head p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; }

/* Feature list: 2×3 hairline grid inside the panel, icon above the title so
   each sentence spans its full cell width. */
.ds-featurelist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.ds-featurelist li { display: grid; gap: 8px; align-content: start; padding: 16px 20px 18px 0; border-bottom: 1px solid var(--line); }
.ds-featurelist li:nth-child(odd) { border-right: 1px solid var(--line); }
.ds-featurelist li:nth-child(even) { padding-left: 20px; padding-right: 0; }
.ds-featurelist li:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.ds-featurelist li > span { font: var(--type-meta-sm-size)/1 var(--font-mono); letter-spacing: .05em; color: var(--soft-ink); }
.ds-featurelist li > svg { width: 20px; height: 20px; }
.ds-featurelist li > div { display: grid; gap: 4px; }
.ds-featurelist h3 { margin: 0; font-size: 16px; line-height: 1.24; font-weight: var(--weight-medium); letter-spacing: -.02em; }
.ds-featurelist p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--soft-ink); }

/* Wide viewports give the panel room for a real measure at full width. */
@media (min-width: 1500px) {
  .ds-videosplit-body { padding: var(--space-20) 5vw; }
  .ds-featurelist h3 { font-size: 18px; }
  .ds-featurelist p { font-size: 14px; }
}

/* ---------- Dark band / quote ---------- */
.ds-band { padding: 88px var(--rail-gutter); background: var(--ink); color: var(--paper); display: grid; gap: 18px; justify-items: center; text-align: center; }
.ds-band h2 { max-width: 900px; margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 400; letter-spacing: -.04em; text-wrap: balance; }
.ds-band h2 em { font-style: normal; display: block; }
.ds-band p { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.55; }
.ds-band small { font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--reverse-dim); }
.ds-band .ds-inline-meta { justify-content: center; text-align: center; }
/* Keep the monospace meta layer at its 11px token inside containers that set a p font-size. */
p.mv-eyebrow { font-size: var(--type-meta-size); line-height: 1.35; letter-spacing: var(--type-meta-tracking); }

.ds-quote { position: relative; min-height: 500px; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--paper); text-align: center; }
.ds-quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.75); }
.ds-quote::after { content: ""; position: absolute; inset: 0; background: var(--overlay-scrim); }
.ds-quote > div { position: relative; z-index: 2; max-width: 880px; padding: 64px 30px; display: grid; gap: 18px; justify-items: center; }
.ds-quote blockquote { margin: 0; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -.04em; }
.ds-quote p { max-width: 640px; margin: 0; font-size: 14px; line-height: 1.55; }

.ds-empathy { padding: 84px var(--rail-gutter); background: var(--ink); color: var(--paper); display: grid; gap: 40px; justify-items: center; }
.ds-empathy > .ds-empathy-grid { display: grid; grid-template-columns: 1fr .9fr 1fr; gap: 40px; align-items: center; }
.ds-empathy blockquote { margin: 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -.03em; }
.ds-empathy img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ds-empathy > p { max-width: 640px; margin: 0; text-align: center; font-size: 16px; line-height: 1.6; }

/* ---------- Steps & lists ---------- */
.ds-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ds-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ds-steps li > span, .ds-steps li > b { font: 11px/1.7 var(--font-mono); font-weight: 400; letter-spacing: .05em; color: var(--soft-ink); text-transform: uppercase; }
.ds-steps li > .ds-step-copy { font: 14px/1.55 var(--font-sans); letter-spacing: var(--tracking-body); text-transform: none; color: var(--text-primary); }
.ds-split--dark .ds-steps li > .ds-step-copy { color: var(--paper); }
.ds-steps h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.ds-steps p, .ds-steps span.ds-step-copy { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.55; display: block; }
.ds-split--dark .ds-steps { border-color: var(--reverse-line); }
.ds-split--dark .ds-steps li { border-color: var(--reverse-line); }
.ds-split--dark .ds-steps li > b, .ds-split--dark .ds-steps li > span { color: var(--reverse-dim); }

.ds-checklist { margin: 0; padding: 0; list-style: none; }
.ds-checklist li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.ds-hero .ds-checklist li { border-color: rgba(245,244,239,.3); }
/* Comparison lists: an ink rule opens the set, hairlines divide the rows, and
   fixed row heights keep the two columns' dividers on the same baselines. */
.ds-checklist--compare { width: 100%; border-top: 1px solid var(--ink); }
.ds-checklist--compare li { display: flex; align-items: center; min-height: 66px; padding: 12px 0; }
.ds-checklist--compare li:last-child { border-bottom: 0; }
.ds-inline-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.ds-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ds-swatches b, .ds-swatches span:first-child { font: 10px/1 var(--font-mono); font-weight: 400; letter-spacing: .05em; }
.ds-swatches i, .ds-swatches button { width: 18px; height: 18px; padding: 0; border: 1px solid var(--control-line); border-radius: 50%; cursor: pointer; }
.is-frosted-blue { background: #ccdbe4; } .is-iced-mocha { background: #d8cdc0; } .is-charcoal { background: #3a3a3a; } .is-dusty-pink { background: #d8b8b4; } .is-midnight-blue { background: #2a3550; } .is-sand { background: #d8cdca; } .is-blue { background: #ccdbe4; } .is-pink { background: #d8b8b4; }

/* ---------- Accordions ---------- */
.ds-accordion { border-top: 1px solid var(--line); }
.ds-accordion details { border-bottom: 1px solid var(--line); }
.ds-accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 62px; padding: 14px 0; cursor: pointer; font-size: 16px; letter-spacing: -.01em; }
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; }
.ds-accordion details[open] summary::after { content: "−"; }
.ds-accordion summary span, .ds-accordion summary i { display: none; }
.ds-accordion summary > span:first-child { display: inline; }
.ds-accordion p, .ds-accordion ul { max-width: 640px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.ds-accordion ul { padding-left: 18px; }
.ds-accordion blockquote { margin: 0 0 20px; }

/* ---------- Panels & notes ---------- */
.ds-panel { border: 1px solid var(--line); background: var(--cream); padding: 26px; display: grid; gap: 18px; align-content: start; }
.ds-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }
.ds-panel-head strong { color: var(--ink); font-weight: 400; }
.ds-panel iframe { display: block; border: 0; width: 100%; background: transparent; overflow: hidden; }
.ds-panel small { font-size: 12px; line-height: 1.55; color: var(--soft-ink); }
.ds-boundary { max-width: 900px; margin: 44px var(--rail-gutter); padding: 18px 20px; border: 1px solid var(--line); background: var(--cream); font-size: 13px; line-height: 1.6; display: grid; gap: 6px; }
.ds-boundary b, .ds-boundary strong { font-size: 13px; }
.ds-boundary .mv-label { color: var(--soft-ink); }
.ds-block .ds-boundary { margin-left: 0; margin-right: 0; }

/* ---------- Contact details ---------- */
.contact-details { display: grid; gap: 18px; font-style: normal; }
.contact-details > div > span { display: block; margin-bottom: 6px; font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }
.contact-details p { margin: 0; font-size: 15px; line-height: 1.6; }
.contact-details a { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.mv-footer .contact-details > div > span { color: var(--reverse-dim); }
.mv-footer .contact-details a:hover { color: inherit; }

/* ---------- Product pages ---------- */
#strap-select .mv-variant-trigger > span { display: inline-flex; align-items: center; gap: 12px; }
.ds-product-main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .95fr); gap: 48px; padding: 36px var(--rail-gutter) 90px; align-items: start; }
.product-gallery { position: sticky; top: 104px; display: grid; gap: 16px; }
.product-gallery__stage { aspect-ratio: 1 / 1; border: 1px solid var(--line); background: var(--cream); overflow: hidden; }
.product-gallery__stage img, .product-gallery__stage video { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; display: block; }
.product-gallery__stage img { transition: opacity var(--motion-standard) var(--motion-ease); }
.product-gallery__stage img.is-fading { opacity: 0; }
.product-gallery__thumbnails { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
/* Supplied renders are shot on white; the frame matches so the product reads as cut-out. */
.product-gallery--white .product-gallery__stage,
.product-gallery--white .product-gallery__thumbnails button { background: var(--white); }
.product-gallery--white .product-gallery__thumbnails { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
/* The wide renders carry large built-in margins. Each image declares its own zoom so the
   product occupies a consistent share of the frame across the whole gallery. */
.product-gallery--white .product-gallery__stage img,
.product-gallery--white .product-gallery__thumbnails img { padding: 0; transform: scale(var(--zoom, 1)); }
.product-gallery--white .product-gallery__stage img { transition: opacity var(--motion-standard) var(--motion-ease); }
.product-gallery--white .product-gallery__stage { padding: 6%; box-sizing: border-box; }
.product-gallery--white .product-gallery__thumbnails button { padding: 6%; overflow: hidden; }
.product-gallery__thumbnails button { aspect-ratio: 1 / 1; padding: 8%; border: 1px solid var(--line); background: var(--cream); cursor: pointer; transition: border-color var(--motion-fast) var(--motion-ease); }
.product-gallery__thumbnails button:hover { border-color: var(--control-line); }
.product-gallery__thumbnails button.is-selected { border-color: var(--ink); }
.product-gallery__thumbnails img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-purchase { display: grid; gap: 22px; align-content: start; justify-items: start; }
.ds-purchase h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 400; letter-spacing: -.04em; }
.ds-purchase .ds-lead { max-width: 480px; margin: 0; font-size: 16px; line-height: 1.58; }
.ds-purchase .mv-button--purchase { width: 100%; }
.ds-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-promises > * { display: grid; gap: 4px; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--soft-ink); }
.ds-promises b, .ds-promises strong { font: inherit; color: var(--ink); }
.ds-selector { display: grid; gap: 10px; }
.ds-medical-note { font-size: 12px; line-height: 1.55; color: var(--soft-ink); max-width: 440px; }

.ds-review-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ds-review-quotes blockquote { margin: 0; padding: 24px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; align-content: start; }
.ds-review-quotes blockquote > span { letter-spacing: 2px; font-size: 15px; }
.ds-review-quotes p { margin: 0; font-size: 16px; line-height: 1.55; }
.ds-review-quotes footer { font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }

/* ---------- Review carousel (site.js-rendered) ---------- */
.shop-review-carousel { border: 1px solid var(--line); background: var(--cream); padding: 26px; display: grid; gap: 22px; }
.shop-review-carousel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-review-carousel__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }
.shop-review-carousel__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.shop-review-carousel__slide { display: grid; gap: 24px; }
.shop-review-carousel__slide--3 { grid-template-columns: repeat(3, 1fr); }
.shop-review-carousel__slide--2 { grid-template-columns: repeat(2, 1fr); }
.shop-review-carousel__slide--1 { grid-template-columns: 1fr; }
.shop-review-carousel__card { position: relative; border: 1px solid var(--line); background: var(--paper); padding: 20px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; height: clamp(300px, 46vh, 440px); }
.shop-review-carousel__card::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 34px; background: linear-gradient(to top, var(--paper), transparent); pointer-events: none; }
.shop-review-carousel__identity { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.shop-review-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 11px/1 var(--font-mono); text-transform: uppercase; }
.shop-review-carousel__identity h3 { margin: 0; font-size: 14px; font-weight: 500; }
.shop-review-carousel__identity p { margin: 2px 0 0; font-size: 12px; color: var(--soft-ink); }
.shop-review-carousel__identity time { font: 9px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim-copy); }
.shop-review-stars { letter-spacing: 2px; font-size: 14px; }
.shop-review-stars .is-empty { color: var(--line); }
.shop-review-title { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.shop-review-carousel__card blockquote { margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; font-size: 14px; line-height: 1.6; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.shop-review-carousel__card blockquote::-webkit-scrollbar { width: 4px; }
.shop-review-carousel__card blockquote::-webkit-scrollbar-thumb { background: var(--line); }
.shop-review-carousel__toggle { display: none; }
.shop-review-carousel__toggle { justify-self: start; display: inline-flex; gap: 8px; padding: 0 0 4px; border: 0; border-bottom: 1px solid; background: none; font: 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.shop-review-carousel__controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.shop-review-carousel__controls button { min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: transparent; font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.shop-review-carousel__controls button:hover { background: var(--ink); color: var(--paper); }
.shop-review-carousel__dots { display: flex; gap: 6px; }
.shop-review-carousel__dots i { width: 8px; height: 8px; border: 1px solid var(--ink); }
.shop-review-carousel__dots i.is-active { background: var(--ink); }

/* ---------- Comfort profile (site.js-rendered) ---------- */
.shop2-profile { max-width: 880px; border: 1px solid var(--line); background: var(--cream); padding: 28px; display: grid; gap: 26px; }
.shop2-profile__progress { display: flex; gap: 8px; }
.shop2-profile__progress i { width: 44px; height: 5px; background: var(--muted); border: 1px solid var(--line); }
.shop2-profile__progress i.is-complete { background: var(--ink); border-color: var(--ink); }
.shop2-profile fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.shop2-profile legend { display: flex; gap: 12px; padding: 0; margin-bottom: 4px; font-size: 17px; letter-spacing: -.02em; }
.shop2-profile legend span { font: 10px/1.9 var(--font-mono); letter-spacing: .05em; color: var(--soft-ink); }
.shop2-profile fieldset > div { display: flex; flex-wrap: wrap; gap: 8px; }
.shop2-profile fieldset button { min-height: 40px; padding: 0 14px; border: 1px solid var(--control-line); background: transparent; font-size: 13px; cursor: pointer; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease), border-color var(--motion-standard) var(--motion-ease); }
.shop2-profile fieldset button:hover { background: var(--muted); }
.shop2-profile fieldset button.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shop2-profile__result { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 10px; justify-items: start; }
.shop2-profile__result p { margin: 0; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); }
.shop2-profile__result h3 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
.shop2-profile__result span { max-width: 560px; font-size: 14px; line-height: 1.55; }
.shop2-profile__result a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 10px/1 var(--font-mono); letter-spacing: .06em; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.shop2-profile__result a:hover { background: transparent; color: var(--ink); }
.shop2-profile__result small { font-size: 12px; color: var(--soft-ink); }

/* ---------- Sticky bar ---------- */
.ds-sticky { position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 12px var(--rail-gutter); background: var(--paper); border-top: 1px solid var(--ink); }
.ds-sticky b { font-size: 15px; font-weight: 500; }
.ds-sticky .ds-mono { color: var(--soft-ink); }

/* ---------- Footer extras ---------- */
.ds-footer-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.ds-footer-brand img { width: 110px; height: auto; }
.ds-footer-brand p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--reverse-dim); }

/* ---------- Accessory cards ---------- */
.ds-accessory { display: grid; gap: 14px; }
.ds-accessory h2, .ds-accessory h3 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.ds-accessory .ds-inline-meta { color: var(--soft-ink); }

/* ---------- Icon link in header ---------- */
.ds-iconlink { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; }
.ds-iconlink:hover { color: var(--soft-ink); }

/* ---------- Hot-flush stage diagram (shop.html) ----------
   A dot field in the Stripe idiom, translated to Mivio: monochrome plus the one
   gold accent, square frame, hairline axes. The canvas owns the field; HTML owns
   every label so annotation type stays 10px Courier. */
.hf { position: relative; margin: 0 0 var(--space-16); border: 1px solid var(--line); background: var(--paper); }
.hf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.hf-top b { font-weight: 400; color: var(--ink); }
.hf-top span { color: var(--soft-ink); }
.hf-top em { font-style: normal; color: var(--ink); }
.hf-figure { position: relative; }
.hf-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.hf-body > .hf-figure { border-right: 1px solid var(--line); }
.hf-shots { position: relative; overflow: hidden; background: var(--stone); }
.hf-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--motion-panel) var(--motion-ease); }
.hf.is-live[data-stage="1"] .hf-shot--s1,
.hf.is-live[data-stage="2"] .hf-shot--s2,
.hf.is-live[data-stage="3"] .hf-shot--s3 { opacity: 1; }
.hf-canvas { display: block; width: 100%; height: 420px; touch-action: pan-y; cursor: crosshair; }
.hf-notes { position: absolute; inset: 0; pointer-events: none; }
.hf-note { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; gap: 6px; justify-items: center; opacity: 0; font: 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); white-space: nowrap; transition: opacity var(--motion-standard) var(--motion-ease); }
.hf-note i { display: block; width: 1px; height: 20px; background: currentColor; opacity: .55; }
.hf-note--accent { color: var(--ink); }
.hf-note--all,
.hf.is-live[data-stage="1"] .hf-note--s1,
.hf.is-live[data-stage="2"] .hf-note--s2,
.hf.is-live[data-stage="3"] .hf-note--s3 { opacity: 1; }
.hf-days { position: absolute; left: 20px; right: 20px; bottom: 12px; height: 0; opacity: 0; transition: opacity var(--motion-standard) var(--motion-ease); }
.hf.is-live[data-stage="3"] .hf-days { opacity: 1; }
.hf-days span { position: absolute; left: var(--x); transform: translateX(-50%); font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft-ink); white-space: nowrap; }
.hf-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); }
.hf-rail button { position: relative; overflow: hidden; min-height: 60px; padding: 12px 16px; display: grid; gap: 6px; justify-items: start; align-content: center; text-align: left; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.hf-rail button:last-child { border-right: 0; }
.hf-rail button:hover { background: var(--muted); }
.hf-rail button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.hf-rail button span { font: 10px/1 var(--font-mono); letter-spacing: .05em; color: var(--soft-ink); }
.hf-rail button[aria-checked="true"] span { color: var(--reverse-dim); }
.hf-rail button b { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.hf-progress { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--paper); }

@media (max-width: 900px) {
  .hf-body { grid-template-columns: 1fr; }
  .hf-body > .hf-figure { border-right: 0; border-bottom: 1px solid var(--line); }
  .hf-shots { height: 320px; }
}
@media (max-width: 760px) {
  .hf-canvas { height: 300px; }
  .hf-rail { grid-auto-flow: row; }
  .hf-rail button { border-right: 0; border-bottom: 1px solid var(--line); }
  .hf-rail button:last-child { border-bottom: 0; }
  .hf-note--s1, .hf-note--all { display: none; }
}

/* ---------- Tweaks panel (product3.html) ---------- */
.ds-tweaks-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 90; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.ds-tweaks-toggle:hover { background: var(--ink); color: var(--paper); }
.ds-tweaks { position: fixed; right: 22px; bottom: 72px; z-index: 90; width: 270px; max-height: 0; overflow: hidden; border: 1px solid var(--ink); background: var(--cream); box-shadow: var(--shadow-menu); opacity: 0; transition: max-height var(--motion-panel) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.ds-tweaks.is-open { max-height: 640px; opacity: 1; }
.ds-tweaks-body { padding: 20px; display: grid; gap: 18px; }
.ds-tweaks-head { margin: 0; font: 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--soft-ink); }
.ds-tweaks-head b { display: block; margin-top: 4px; font: 15px/1.3 var(--font-sans); font-weight: 500; color: var(--ink); letter-spacing: -.01em; text-transform: none; }
.ds-tweaks-field { display: grid; gap: 8px; }
.ds-tweaks-field .mv-label { font-size: 9px; }
.ds-tweaks .mv-segmented { grid-auto-columns: 1fr; }
.ds-tweaks .mv-segmented button { font-size: 10px; letter-spacing: .04em; }

/* Voice: reshapes photographic treatment, accent use and status tone */
body[data-tone="clinical"] .ds-hero > img, body[data-tone="clinical"] .ds-hero > video,
body[data-tone="clinical"] .ds-split figure img, body[data-tone="clinical"] .mv-image-frame img { filter: grayscale(.45) contrast(1.08) brightness(.98); }
body[data-tone="clinical"] .ds-block--cream { background: var(--paper); }
body[data-tone="clinical"] .mv-status { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body[data-tone="clinical"] h1, body[data-tone="clinical"] h2 { letter-spacing: -.045em; }
body[data-tone="clinical"] .ds-hero-rating, body[data-tone="clinical"] .mv-rating { color: inherit; }
body[data-tone="warm"] .mv-status { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
body[data-tone="warm"] .ds-purchase .mv-status { background: transparent; border-color: var(--line); color: var(--soft-ink); }

/* Density: reshapes rhythm, grid columns and type scale together */
body[data-density="dense"] .ds-block { padding: 46px var(--rail-gutter) 54px; }
body[data-density="dense"] .ds-heading { margin-bottom: 26px; gap: 8px; }
body[data-density="dense"] .ds-grid-2, body[data-density="dense"] .ds-grid-3, body[data-density="dense"] .ds-grid-4 { gap: 16px; }
body[data-density="dense"] .ds-fact h3 { font-size: 17px; }
body[data-density="dense"] .ds-fact p { font-size: 13px; }
body[data-density="dense"] .ds-product-main { padding-top: 16px; padding-bottom: 48px; gap: 32px; }
body[data-density="dense"] .product-gallery__thumbnails { gap: 8px; }
body[data-density="dense"] .ds-purchase { gap: 12px; }
body[data-density="dense"] .ds-accordion summary { min-height: 46px; font-size: 14px; }
body[data-density="airy"] .ds-block { padding: 92px var(--rail-gutter) 100px; }
body[data-density="airy"] .ds-heading { margin-bottom: 56px; }
body[data-density="airy"] .ds-product-main { padding-top: 44px; gap: 60px; }

/* Proof: reshapes how confidently trust signals present */
body[data-proof="confident"] .ds-purchase { border-top: 3px solid var(--accent); padding-top: 24px; }
body[data-proof="confident"] .mv-rating { font-size: 16px; gap: 12px; }
body[data-proof="confident"] .mv-rating span { font-size: 19px; letter-spacing: 1px; }
body[data-proof="confident"] .ds-review-quotes blockquote { padding: 32px; border-color: var(--ink); }
body[data-proof="confident"] .ds-review-quotes p { font-size: 18px; line-height: 1.5; }
body[data-proof="understated"] .mv-rating { opacity: .82; }

/* Single-panel poster: product render with the display statement laid across it. */
.ds-poster-single { display: grid; gap: clamp(22px, 2.4vw, 34px); margin: clamp(22px, 2.4vw, 34px) 0; }
.ds-poster-plate { background: var(--panel); padding: clamp(24px, 2.6vw, 44px); display: grid; gap: clamp(20px, 2vw, 30px); }
.ds-poster-stage { position: relative; aspect-ratio: 16 / 9; background: #fbfbf9; display: grid; place-items: center; overflow: hidden; }
.ds-poster-stage img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1); transform: scale(1.9); }
.ds-poster-stage p { position: absolute; left: 6%; right: 6%; margin: 0; text-align: center; color: var(--ink); font-size: clamp(44px, 9vw, 150px); line-height: .92; letter-spacing: -.045em; font-weight: var(--weight-regular); }
.ds-poster-plate > img { width: 84px; height: auto; justify-self: start; }

/* ---------- Campaign poster (design system: editorial / PanelPair) ----------
   The campaign register, not the page register: true black ground, panel white,
   monochrome only ,  no gold, no paper. Photography runs greyscale. */
.ds-poster { --void: #000000; --panel: #f2f1ee; position: relative; background: var(--void); color: var(--panel); padding: clamp(28px, 3.4vw, 56px); }
.ds-poster-meta { position: absolute; left: clamp(28px, 3.4vw, 56px); right: clamp(28px, 3.4vw, 56px); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font: 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--panel); }
.ds-poster-meta--top { top: clamp(10px, 1.2vw, 18px); }
.ds-poster-meta--bottom { bottom: clamp(10px, 1.2vw, 18px); }
.ds-poster-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch; margin: clamp(22px, 2.4vw, 34px) 0; }
.ds-poster-figure { margin: 0; overflow: hidden; background: var(--panel); display: flex; }
.ds-poster-figure img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); }
.ds-poster-panel { background: var(--panel); color: var(--ink); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ds-poster-statement { margin: 0; font-size: clamp(34px, 4.4vw, 72px); line-height: 1; letter-spacing: -.04em; font-weight: var(--weight-regular); text-wrap: balance; }
.ds-poster-fine { max-width: 44ch; margin: 0; font-size: 12px; line-height: 1.5; text-align: justify; hyphens: auto; }
.ds-poster-panel footer { display: grid; gap: 18px; }
.ds-poster-panel footer img { width: 84px; height: auto; }
@media (max-width: 760px) {
  .ds-poster-pair { grid-template-columns: 1fr; }
  .ds-poster-figure img { min-height: 320px; }
}

/* ---------- Mobile menu ---------- */
.mv-menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; background: transparent; color: var(--ink); cursor: pointer; position: relative; z-index: 2; transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.mv-menu-toggle:hover { background: var(--ink); color: var(--paper); }
.mv-menu-toggle > span, .mv-menu-toggle > span::before, .mv-menu-toggle > span::after { position: absolute; left: 50%; width: 18px; height: 1px; background: currentColor; transform: translateX(-50%); transition: transform var(--motion-standard) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.mv-menu-toggle > span { top: 50%; margin-top: -.5px; }
.mv-menu-toggle > span::before, .mv-menu-toggle > span::after { content: ""; left: 0; transform: none; }
.mv-menu-toggle > span::before { top: -6px; }
.mv-menu-toggle > span::after { top: 6px; }
.mv-menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.mv-menu-toggle[aria-expanded="true"] > span { transform: translateX(-50%) rotate(45deg); }
.mv-menu-toggle[aria-expanded="true"] > span::before { opacity: 0; }
.mv-menu-toggle[aria-expanded="true"] > span::after { top: 0; transform: rotate(-90deg); }

/* The panel opens directly below the header, whose height is measured on open. */
.mv-menu { display: none; position: fixed; top: var(--mv-header-offset, 65px); left: 0; right: 0; bottom: 0; z-index: 28; background: var(--ink); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity var(--motion-standard) var(--motion-ease), visibility var(--motion-standard); }
.mv-menu.is-open { visibility: visible; opacity: 1; }
.mv-menu nav { display: grid; padding: var(--space-06) var(--rail-gutter) var(--space-12); }
.mv-menu nav > a { display: flex; align-items: center; min-height: 56px; padding: 0; border-bottom: 1px solid var(--reverse-line); font-size: 21px; letter-spacing: -.02em; color: var(--paper); }
.mv-menu nav > a:hover, .mv-menu nav > a:focus-visible { color: var(--reverse-dim); }
.mv-menu nav > a[aria-current="page"] { color: var(--reverse-dim); }
.mv-menu nav > a.mv-menu-cta { justify-content: center; margin-top: var(--space-08); border: 1px solid var(--paper); font: 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--type-cta-tracking); transition: background var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease); }
.mv-menu nav > a.mv-menu-cta:hover { background: var(--paper); color: var(--ink); }
body.mv-menu-open { overflow: hidden; }

/* ---------- Responsive ----------
   Below 900px the wrapped nav row stops being usable, so the header hands over
   to a full-height ink panel. Gutters step to the token values as the rail
   narrows; nothing shrinks below the 44px target. */
.ds-grid-form { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; }

@media (max-width: 1200px) {
  .hf-body { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 1023px) {
  :root { --rail-gutter: var(--rail-gutter-tablet); }
  .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ds-product-main { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: static; }
  .product-gallery__stage { aspect-ratio: 4 / 3; }
  .ds-grid-form { grid-template-columns: 1fr; gap: 32px; }
  .ds-block { padding: 56px var(--rail-gutter) 64px; }
  .ds-split > div, .ds-hero > div, .ds-hero--paper > div { padding: 56px var(--rail-gutter); }
  .ds-band { padding: 64px var(--rail-gutter); }
}

@media (max-width: 900px) {
  .mv-header { grid-template-columns: 1fr auto; height: var(--header-height-mobile); }
  .mv-header nav { display: none; }
  .mv-menu, .mv-menu-toggle { display: block; }
  .mv-header-actions { gap: 10px; }
  .mv-header .mv-button { padding: 0 14px; font-size: 10px; }
  .mv-header-actions .mv-button { display: none; }
  .mv-header-logo img { width: 96px; }
  .product-gallery { top: 0; }
}

@media (max-width: 760px) {
  :root { --rail-gutter: var(--rail-gutter-mobile); }
  .ds-grid-2, .ds-grid-3, .ds-grid-4, .ds-metrics, .ds-proofrow, .ds-review-quotes, .ds-promises { grid-template-columns: 1fr; }
  .ds-metrics > div, .ds-proofrow > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .ds-metrics > div:last-child, .ds-proofrow > div:last-child { border-bottom: 0; }
  .ds-split, .ds-hero--paper, .ds-empathy > .ds-empathy-grid { grid-template-columns: 1fr; }
  .ds-split > figure img, .ds-split > img, .ds-split > figure video { min-height: 320px; }
  .ds-hero { min-height: 0; }
  .ds-hero > div { padding: 72px var(--rail-gutter) 56px; max-width: none; }
  .ds-hero-rating { font-size: 12px; }
  .ds-quote { min-height: 0; }
  .ds-quote > div { padding: 64px var(--rail-gutter); }
  .ds-block { padding: 48px var(--rail-gutter) 56px; }
  .ds-heading { margin-bottom: 32px; }
  .mv-footer { padding: 44px var(--rail-gutter) 28px; }
  .mv-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .mv-footer-grid h3 { margin-bottom: 14px; }
  .mv-footer-note > div { flex-direction: column; gap: 10px; }
  .mv-breadcrumbs { padding: 0 var(--rail-gutter); }
  .product-gallery__stage { aspect-ratio: 1 / 1; }
  .product-gallery__thumbnails { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
  .ds-purchase h1 { font-size: 30px; }
  .ds-facts-inline article:nth-last-child(-n+2) { padding-bottom: var(--space-05); }
  .ds-sticky { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px var(--rail-gutter); }
  .ds-sticky .mv-button { width: 100%; }
  .ds-sticky .ds-inline-meta { display: none; }
  .ds-poster-meta { position: static; left: auto; right: auto; }
  .ds-poster-meta--top { margin-bottom: 20px; }
  .ds-poster-meta--bottom { margin-top: 20px; }
  .ds-panel { padding: 18px; }
  .shop-review-carousel { padding: 18px; }
  .shop-review-carousel__card { height: clamp(280px, 62vh, 420px); }
  .shop-review-carousel__controls { flex-wrap: wrap; gap: 12px; }
  .shop-review-carousel__controls button { flex: 1 1 auto; }
  .shop-review-carousel__dots { flex-wrap: wrap; justify-content: center; max-width: 320px; }
  .mv-marquee { min-height: 52px; }
  .mv-marquee--display { font-size: 22px; }
}

/* ==========================================================================
   Mobile refinement
   The generic collapse above makes every page *fit*; this section makes each
   one read well. Two principles: give vertical space back (a phone has no
   horizontal room, so rhythm has to carry the hierarchy), and drop density
   rather than shrink type. Sizes follow the design system's mobile scale,
   hero 36/40, H2 26/34, H3 20/28, body 14–18, meta 10–12.
   ========================================================================== */

@media (max-width: 760px) {
  /* --- Type: the documented mobile scale, with tighter leading on display --- */
  .ds-hero h1 { font-size: 36px; line-height: 1.06; letter-spacing: -.035em; }
  .ds-hero p { font-size: 16px; }
  .ds-band h2 { font-size: 28px; line-height: 1.1; }
  .ds-split h2 { font-size: 27px; line-height: 1.12; }
  .ds-heading h1, .ds-heading h2 { font-size: 26px; line-height: 1.18; }
  .ds-heading p, .ds-split p, .ds-band p { font-size: 15px; }
  .ds-fact h3 { font-size: 19px; }
  .ds-quote blockquote { font-size: 24px; line-height: 1.2; }
  .ds-empathy blockquote { font-size: 19px; }
  p, li, .ds-fact p { text-wrap: pretty; }

  /* --- Rhythm: more air between sections, less inside them --- */
  .ds-block { padding: 56px var(--rail-gutter) 64px; }
  .ds-heading { margin-bottom: 36px; gap: 12px; }
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { gap: 40px; }
  .ds-split > div { padding: 56px var(--rail-gutter) 60px; gap: 18px; }
  .ds-band { padding: 64px var(--rail-gutter); gap: 16px; }
  /* The band is centred, so its assurance row centres too rather than
     inheriting the left-aligned flow used inside heroes and splits. */
  .ds-band .ds-inline-meta { justify-content: center; text-align: center; gap: 8px 18px; }
  .ds-videosplit { grid-template-columns: 1fr; }
  .ds-videosplit-media { aspect-ratio: 16 / 10; }
  .ds-videosplit-body { padding: 48px var(--rail-gutter) 52px; gap: 28px; }
  .ds-videosplit-head { gap: 14px; }
  .ds-videosplit-head h2 { font-size: 26px; }
  .ds-featurelist { grid-template-columns: 1fr; }
  .ds-featurelist li,
  .ds-featurelist li:nth-child(odd),
  .ds-featurelist li:nth-child(even) { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ds-featurelist li:last-child { border-bottom: 0; padding-bottom: 0; }

  /* --- Metrics read better as a 2×2 block than a four-row stack --- */
  .ds-metrics { grid-template-columns: 1fr 1fr; }
  .ds-metrics--3 { grid-template-columns: 1fr; }
  .ds-metrics > div { padding: 22px 14px; border-right: 1px solid var(--line); }
  .ds-metrics > div:nth-child(even) { border-right: 0; }
  /* The 2×2 grid closes on its last row; the stacked 3-up closes on its last cell. */
  .ds-metrics:not(.ds-metrics--3) > div:nth-last-child(-n+2) { border-bottom: 0; }
  .ds-metrics--3 > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .ds-metrics--3 > div:last-child { border-bottom: 0; }
  .ds-metrics strong { font-size: 25px; }

  /* --- Hairline lists: full-width rows, left aligned, generous targets --- */
  .ds-steps li { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; }
  .ds-checklist li { padding: 12px 0; }
  .ds-checklist--compare li { min-height: 58px; }
  .ds-inline-meta { gap: 8px 16px; }
  .ds-promises { gap: 0; }
  .ds-promises > * { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ds-promises > *:last-child { border-bottom: 0; }

  /* --- Accordions: bigger targets, roomier answers --- */
  .ds-accordion summary { min-height: 56px; font-size: 16px; gap: 14px; }
  .ds-accordion p, .ds-accordion ul { font-size: 15px; margin-bottom: 22px; }

  /* --- Cards and imagery --- */
  .mv-card h3 { margin-top: 20px; font-size: 22px; }
  .mv-image-frame--hero { aspect-ratio: 16 / 10; }
  .mv-image-frame figcaption { padding: 36px 16px 14px; }
  .ds-accessory h2, .ds-accessory h3 { font-size: 18px; }

  /* --- Shop: the hot-flush diagram --- */
  .hf-top { padding: 12px var(--rail-gutter); gap: 6px 16px; }
  .hf-canvas { height: 260px; }
  .hf-shots { height: 260px; }
  .hf-rail button { min-height: 56px; padding: 12px var(--rail-gutter); }
  .hf-note--s2, .hf-note--s3 { font-size: 9px; }

  /* --- Shop: empathy band and comparison --- */
  .ds-empathy { padding: 56px var(--rail-gutter); gap: 28px; }
  .ds-empathy > .ds-empathy-grid { gap: 28px; }

  /* --- Product: purchase panel --- */
  .ds-product-main { padding: 24px var(--rail-gutter) 64px; gap: 36px; }
  .ds-purchase { gap: 18px; }
  .ds-purchase h1 { font-size: 29px; line-height: 1.08; }
  .ds-purchase .ds-lead { font-size: 15px; }
  .ds-selector { width: 100%; }
  .ds-swatches i, .ds-swatches button { width: 22px; height: 22px; }

  /* --- Product: campaign posters keep their frame but lose the wall scale --- */
  .ds-poster { padding: 24px var(--rail-gutter); }
  .ds-poster-pair, .ds-poster-single { margin: 18px 0; gap: 18px; }
  .ds-poster-figure img { min-height: 260px; }
  .ds-poster-panel { padding: 22px; gap: 24px; }
  .ds-poster-statement { font-size: 30px; }
  .ds-poster-fine { max-width: none; font-size: 12px; text-align: left; }
  .ds-poster-stage { aspect-ratio: 4 / 3; }
  .ds-poster-stage img { transform: scale(1.45); }
  .ds-poster-stage p { font-size: 40px; }
  .ds-poster-meta { font-size: 10px; letter-spacing: .06em; }

  /* --- Reviews --- */
  .shop-review-carousel { padding: 16px; gap: 18px; }
  .shop-review-carousel__toolbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .shop-review-carousel__card { padding: 18px; height: clamp(300px, 58vh, 400px); }
  .shop-review-carousel__card blockquote { font-size: 15px; }
  /* One review per slide means 30 dots ,  meaningless at this width, and the
     count in the toolbar already reports position. Controls share one row. */
  .shop-review-carousel__dots { display: none; }
  .shop-review-carousel__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-review-carousel__controls button { min-height: 48px; padding: 0 12px; }

  /* --- Forms --- */
  .ds-panel { padding: 16px; gap: 14px; }
  .ds-panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ds-panel iframe { min-height: 0; }

  /* --- Privacy and sitemap --- */
  .sm-set { padding: 44px var(--rail-gutter) 48px; }
  .sm-set-head { margin-bottom: 28px; gap: 12px; }
  .sm-set-head h2 { font-size: 24px; }
  .sm-row { grid-template-columns: 28px minmax(0, 1fr); gap: 10px 14px; padding: 20px 0; }
  .sm-name a { font-size: 17px; }
  .sm-sections { gap: 5px; }
  .sm-legend { padding: 14px var(--rail-gutter); gap: 6px; }

  /* --- Actions: full-width, stacked, never two cramped buttons in a row --- */
  .ds-hero .mv-button, .ds-band .mv-button, .ds-split .mv-button, .ds-accessory .mv-button { width: 100%; }
  .ds-hero > div > div[style*="flex"], .ds-split > div > div[style*="flex"] { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }

  /* --- Boundary notes and marquee --- */
  .ds-boundary { margin: 32px var(--rail-gutter); padding: 16px; }
  .mv-marquee { padding: 0 var(--rail-gutter); }
  .mv-marquee > div { gap: 44px; }
}

/* ==========================================================================
   Shop page ,  mobile composition
   The shop page is the densest in the site: a video hero with a rating pill,
   a five-item checklist and a swatch row, then an interactive canvas diagram,
   a two-column comparison, a six-up feature grid and a four-up strap row.
   Below 760px those are recomposed rather than merely stacked.
   ========================================================================== */
@media (max-width: 760px) {
  /* Hero: the pill and swatch row become full-width bands so nothing squeezes. */
  .ds-hero-rating { width: 100%; justify-content: flex-start; padding: 10px 12px; font-size: 12px; }
  .ds-hero .ds-checklist { width: 100%; }
  .ds-hero .ds-checklist li { padding: 11px 0; font-size: 14px; }
  .ds-hero .ds-inline-meta { width: 100%; gap: 6px 14px; font-size: 9px; }
  .ds-swatches { width: 100%; padding-top: 4px; }

  /* The dot-field canvas stays on mobile ,  it is the section's explanation.
     The stage photograph moves below it so both get full rail width. */
  .hf-body { grid-template-columns: 1fr; }
  .hf-body > .hf-figure { border-right: 0; border-bottom: 1px solid var(--line); }
  .hf-canvas { height: 300px; }
  .hf-shots { height: auto; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
  .hf-rail { grid-auto-flow: row; }
  .hf-rail button { border-right: 0; border-bottom: 1px solid var(--line); }
  .hf-rail button:last-child { border-bottom: 0; }
  .hf-rail button b { font-size: 15px; }
  .hf-progress { height: 2px; }
  /* Only the crest label survives at this width; the rest crowd the field. */
  .hf-note--all, .hf-note--s1, .hf-note--s3 { display: none; }
  .hf-note--s2 { font-size: 9px; }

  /* Comparison: images lead each column, lists get hairline rows. */
  .ds-grid-2 > .ds-fact .mv-image-frame { margin-bottom: 16px; }

  /* Feature icons read better two-up than as a six-row stack. */
  .ds-grid-3 { gap: 32px; }
  .ds-block .ds-grid-3 > .ds-fact svg { width: 26px; height: 26px; }

  /* Straps stay two-up: packshots are small and a four-row stack is a scroll. */
  .ds-grid-4 { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Empathy band: quote, photograph, quote ,  kept in that order. */
  .ds-empathy-grid > img { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .ds-hero h1 { font-size: 32px; }
  .ds-hero > div { padding: 64px var(--rail-gutter) 48px; gap: 16px; }
  .ds-heading h1, .ds-heading h2 { font-size: 24px; }
  .ds-band h2 { font-size: 26px; }
  .ds-split h2 { font-size: 25px; }
  .ds-poster-statement { font-size: 26px; }
  .ds-poster-stage p { font-size: 32px; }
  .ds-quote blockquote { font-size: 21px; }
  .ds-metrics { grid-template-columns: 1fr; }
  .ds-metrics > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .ds-metrics > div:last-child { border-bottom: 0; }
  .ds-purchase h1 { font-size: 27px; }
  .ds-grid-4 { grid-template-columns: 1fr; }
  .hf-canvas { height: 260px; }
  .hf-shots { aspect-ratio: 1 / 1; }
  .ds-accordion summary { font-size: 15px; }
  .mv-menu nav > a { font-size: 19px; min-height: 52px; }
  .ds-announce { padding: 10px var(--rail-gutter); font-size: 9px; }
}