/* Twelve South LP shared styles
   Tokens extracted from the live theme CSS (base.css / custom.css / :root block),
   documented in Reference/ts-design-tokens.md. Do not substitute approximations.
   Fonts are the brand's own KMR-Waldenburg woff2 files served from the client's
   Shopify CDN (access-control-allow-origin: *, verified 2026-07-24), so there is
   no font file to re-host and no license transfer question.
   Brand rules honored here: media corners are square (--media-radius 0), only
   interactive controls are pills (100px). That tension is the real brand look. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'KMR-Waldenburg-Normal';
  src: url('https://www.twelvesouth.com/cdn/shop/files/KMR-Waldenburg-Normal_c02848b0-d786-46ea-bb17-dcaf81d99446.woff2?v=1740807499') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'KMR-Waldenburg-Buch';
  src: url('https://www.twelvesouth.com/cdn/shop/files/KMR-Waldenburg-Buch.woff2?v=1731315129') format('woff2');
  font-weight: 375;
  font-display: swap;
}
@font-face {
  font-family: 'KMR-Waldenburg-600';
  src: url('https://www.twelvesouth.com/cdn/shop/files/KMR-Waldenburg-Halbfett_60d72eff-7726-4743-91d5-449eb43aa1a2.woff2?v=1741712058') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --display: 'KMR-Waldenburg-Normal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'KMR-Waldenburg-Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --emph: 'KMR-Waldenburg-600', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ink: #121713;
  --paper: #ffffff;
  --cream: #faf1e9;
  --brand: #ff360a;          /* logo-mark orange */
  --brand-ui: #ff4127;       /* --brand-color in theme */
  --brand-dark: #c01600;     /* hover/active */
  --forest: #445958;
  --border: #e2e2e2;
  --img-bg: #f2f2f2;

  --muted: #6d6e70;          /* 4.9:1 on white */
  --muted-cream: #5c5d5f;    /* 6.0:1 on cream, small text there uses this */

  --media-radius: 0px;
  --pill: 100px;
  --wrap: 1120px;
  --prose: 700px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 375;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.2px;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; border-radius: var(--media-radius); background: var(--img-bg); }
a { color: var(--brand-ui); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
strong, b { font-family: var(--emph); font-weight: 600; }
:focus-visible { outline: 3px solid var(--brand-ui); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; letter-spacing: -0.6px; margin: 0 0 .5em; }
h1 { font-size: clamp(30px, 5.4vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: clamp(18px, 2.1vw, 22px); }
p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--prose); margin-left: auto; margin-right: auto; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--cream { background: var(--cream); }
.section--cream .small, .section--cream .muted { color: var(--muted-cream); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--tight { padding: clamp(32px, 4vw, 52px) 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.6; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small uppercase text cannot carry #FF360A: measured 3.63:1 on white and
   3.25:1 on cream, under the 4.5:1 floor (contract rule 13). --brand-dark is
   the theme's own darker red and passes at 6.2:1 / 5.6:1. */
.eyebrow {
  display: inline-block; font-family: var(--emph); font-weight: 600;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: 14px;
}
.section--ink .eyebrow { color: #ff7a5e; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 30px; border-radius: var(--pill);
  background: #000; color: #fff; border: 1px solid #000;
  font-family: var(--body); font-weight: 375; font-size: 16px; letter-spacing: -0.3px;
  cursor: pointer; text-align: center; transition: background .18s, color .18s;
}
.btn:hover { background: #fff; color: #000; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* White 16px label on #FF360A measured 3.63:1. The darker theme red passes
   at 6.2:1 and keeps the accent alive on the dark final-CTA band. */
.btn--brand { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--brand:hover { background: #fff; color: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn--inline { min-height: 46px; padding: 8px 22px; font-size: 15px; }

/* ---------- Promo bar / header ---------- */
/* Flex-wrap, not a single inline run. Adjacent white-space:nowrap spans with no
   whitespace between the tags give the browser no break opportunity and were a
   measured 41px horizontal overflow at a 500px viewport. Each item stays nowrap
   so phrases never break mid-phrase; the bar wraps between items instead. */
.promo-bar {
  background: var(--ink); color: #fff; font-size: 13px; letter-spacing: .2px;
  padding: 9px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  row-gap: 2px;
}
.promo-bar span { white-space: nowrap; }
.promo-bar .dot { opacity: .45; margin: 0 8px; }
.promo-bar .promo-m { display: none; }
@media (max-width: 540px) {
  .promo-bar .dot, .promo-bar .promo-d { display: none; }
  .promo-bar .promo-m { display: inline; font-size: 12px; }
}

.site-header {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
/* Tap targets: 44px minimum (contract rule 13). The visual size of these links
   is unchanged; only the hit area grows via padding. */
.site-header .logo { display: flex; align-items: center; min-height: 44px; }
.site-header .logo img, .site-header .logo svg { height: 24px; width: auto; background: none; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a {
  color: var(--ink); font-size: 15px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.site-nav a:hover { color: var(--brand-ui); text-decoration: none; }
.cart-btn {
  background: none; border: 1px solid var(--ink); border-radius: var(--pill);
  padding: 8px 18px; min-height: 44px; font-family: var(--body); font-size: 15px;
  color: var(--ink); cursor: pointer;
}
.cart-btn:hover { background: var(--ink); color: #fff; }
@media (max-width: 860px) { .site-nav a { display: none; } }

/* ---------- Article hero ---------- */
.article-hero { padding: clamp(36px, 5vw, 64px) 0 0; }
/* 15ch was too tight a measure for a 52px display face: it wrapped the H1 to
   four lines and pushed the hero CTA past an 844px-tall desktop fold. 21ch
   gives three lines and a more natural headline measure. */
.article-hero h1 { max-width: 21ch; }
.byline {
  font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin: 0 0 18px;
}
.byline .dot { opacity: .5; }
@media (max-width: 480px) { .byline span:nth-last-child(-n+2) { display: none; } }
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.62; }
/* The hero shot is 1289x1200, near square. Forcing it into a 16/10 box left big
   empty cream margins either side. Constrain the plate instead and let the image
   keep its own ratio: reads as a deliberate centered product plate. */
.hero-media {
  margin: 28px auto 0; background: var(--cream);
  max-width: 660px; width: 100%;
}
.hero-media img { width: 100%; height: auto; background: var(--cream); }

/* Two kinds of in-article image, each framed on its own terms.
   --photo  = lifestyle, safe to crop, fills a 4/3 frame.
   --product = studio silo on white, must never crop, capped so a square shot
               does not become a 700px-tall block in the prose column. */
.reason-media--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* White, not cream: these are studio silos shot on white, so a cream frame
   showed mismatched bars either side of the capped image. */
.reason-media--product { background: #fff; }
.reason-media--product img {
  width: 100%; max-height: 460px; object-fit: contain; background: #fff;
}

/* stars */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 15px; height: 15px; fill: var(--brand); }
.rating-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }

/* trust pills = this page's key-facts line.
   Hidden under 560px so the primary CTA lands fully inside the first viewport
   (contract rule 14). Measured: at a true 375x844 viewport the pills push the
   CTA to top=851, 7px past the fold. Hiding them brings it to ~697. */
.trust-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .trust-pills { display: none; } }
.trust-pills li {
  border: 1px solid var(--border); border-radius: var(--pill);
  padding: 7px 16px; font-size: 13px; color: var(--ink);
}

/* ---------- Press strip ---------- */
/* 2026-08-04: the six quote cards came out at the client's direction (the note
   in travel-hack/index.html has the reasoning). The grid, card, logo-slot and
   citation rules went with them, since nothing on the page uses them now. One
   unattributed line is all that is permitted. If press citation is cleared
   again, the old rules are recoverable from git history alongside the V1
   markup backup. */
.press-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--cream); }
.press-line {
  margin: 0; text-align: center;
  font-family: var(--emph); font-weight: 600; font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted-cream);
}

/* ---------- Article body ---------- */
.article-body { padding: clamp(40px, 6vw, 72px) 0; }
.article-body h2 { margin-top: 0; }
.skip-ahead {
  margin: 28px 0; padding: 20px 22px; background: var(--cream);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.skip-ahead p { margin: 0; font-size: 15px; }

/* padding-block, NOT the two-value shorthand: this element also carries .wrap,
   and 'padding: X 0' was silently zeroing .wrap's 20px side padding, running
   every reason's text edge-to-edge on phones. */
.reason { padding-block: clamp(34px, 5vw, 56px); border-top: 1px solid var(--border); }
.reason-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.reason-num {
  font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 62px);
  line-height: 1; color: var(--brand); flex: none;
}
.reason-head h2 { margin: 0; }
.reason-media { margin: 22px 0; background: var(--cream); }
.pull-quote {
  margin: 24px 0; padding-left: 20px; border-left: 3px solid var(--brand);
  font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.3; letter-spacing: -0.5px;
}
.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0; }
.steps li {
  counter-increment: step; position: relative; padding: 0 0 14px 44px; font-size: 16px;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--emph); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* what's in the box */
.box-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
.box-list { list-style: none; padding: 0; margin: 0; }
.box-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
.box-list li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .box-grid { grid-template-columns: 1fr; } }

/* ---------- Buy block ---------- */
.buy-block { background: var(--cream); }
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 860px) { .buy-grid { grid-template-columns: 1fr; } }
/* Must be pure white, not cream and not the default grey: the colorway PNGs are
   transparent and composite onto whatever sits behind them, while Black Ice is
   a JPEG with its own white background. White is the only fill where all eight
   look identical. */
.gallery-main { background: #fff; }
.gallery-main img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.gallery-thumbs img { background: #fff; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
  padding: 0; border: 1px solid var(--border); background: #fff; cursor: pointer;
  width: 66px; height: 66px; border-radius: 0;
}
.gallery-thumbs button[aria-current="true"] { border-color: var(--ink); border-width: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.buy-panel h2 { margin-bottom: 4px; }
.buy-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.buy-price .now { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.6px; }
.buy-price .frame { font-size: 13px; color: var(--muted-cream); }
.selector { margin: 22px 0 8px; }
.selector-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.selector-label .lbl { font-family: var(--emph); font-weight: 600; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; }
.selector-label .hint { font-size: 13px; color: var(--muted-cream); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid #cfc4ba; background: #fff; color: var(--ink);
  border-radius: var(--pill); padding: 9px 16px; min-height: 44px;
  font-family: var(--body); font-size: 14px; cursor: pointer;
}
.pill[aria-checked="true"] { border-color: var(--ink); border-width: 2px; background: var(--ink); color: #fff; }
.pill[aria-disabled="true"] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.tier-cards { display: grid; gap: 12px; margin: 20px 0; }
.tier-card {
  text-align: left; background: #fff; border: 1px solid #cfc4ba; border-radius: 0;
  padding: 16px 18px; cursor: pointer; font-family: var(--body); color: var(--ink);
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
}
.tier-card[aria-checked="true"] { border-color: var(--ink); border-width: 2px; }
.tier-card .tc-title { font-family: var(--emph); font-weight: 600; font-size: 16px; display: block; }
.tier-card .tc-sub { font-size: 13px; color: var(--muted-cream); display: block; margin-top: 3px; }
.tier-card .tc-price { font-family: var(--display); font-weight: 700; font-size: 18px; white-space: nowrap; }

.included { list-style: none; padding: 0; margin: 18px 0; font-size: 15px; }
.included li { padding: 7px 0 7px 26px; position: relative; }
.included li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 7px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.atc-micro { font-size: 13px; color: var(--muted-cream); margin: 10px 0 0; text-align: center; }
.cross-sell { font-size: 14px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- Stats ---------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; text-align: center; }
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; }
.stat .lbl { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 6px; }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { border: 1px solid var(--border); padding: 22px; background: #fff; }
.review-card p { font-size: 15px; }
.review-card .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 14px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--emph); font-weight: 600; font-size: 12px; flex: none;
}

/* ---------- Recap / FAQ ---------- */
.recap { background: var(--cream); padding: 26px 28px; }
.recap ul { margin: 0; padding-left: 20px; }
.recap li { margin-bottom: 8px; font-size: 16px; }
/* The 2026-07-30 content pass compressed the recap from five bullets to one
   paragraph, so the box has to hold a <p> as cleanly as it held a <ul>. */
.recap p { margin: 0; font-size: 16px; line-height: 1.7; }

.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 0; position: relative; list-style: none;
  font-family: var(--emph); font-weight: 600; font-size: 17px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 0 18px; font-size: 16px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Final CTA / footer ---------- */
.final-cta { background: var(--ink); color: #fff; text-align: center; }
.final-cta .lede { color: rgba(255,255,255,.82); }
.final-cta .rating-line { color: rgba(255,255,255,.78); justify-content: center; }

.site-footer { background: #fff; border-top: 1px solid var(--border); padding: 40px 0; font-size: 14px; color: var(--muted); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.site-footer a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.site-footer a:hover { color: var(--brand-dark); }

/* Hero CTA row (contract rule 14: primary CTA inside the first viewport) */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.cta-row .btn { flex: 0 1 auto; }
@media (max-width: 420px) { .cta-row .btn { width: 100%; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--border);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform .25s;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .st-copy { flex: 1; min-width: 0; }
.sticky-cta .st-title { font-size: 13px; line-height: 1.3; }
.sticky-cta .st-price { font-family: var(--emph); font-weight: 600; font-size: 15px; }
.sticky-cta .btn { min-height: 46px; padding: 8px 20px; font-size: 15px; }
@media (min-width: 861px) { .sticky-cta { display: none; } }

/* ---------- Cart drawer ---------- */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(18,23,19,.5); z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
/* visibility must flip to visible IMMEDIATELY on open, otherwise the drawer is
   not focusable when open() runs and focus silently stays on <body>, breaking
   the focus trap (contract rule 12). Verified by probe. So: no duration on
   visibility when opening, and a delay equal to the slide when closing, which
   keeps the slide-out animation while still removing it from the a11y tree. */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: #fff; z-index: 61; display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .26s, visibility 0s linear .26s;
}
body.cart-open .cart-overlay { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
body.cart-open .cart-drawer {
  transform: translateX(0); visibility: visible;
  transition: transform .26s, visibility 0s;
}
body.cart-open { overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.cart-head h2 { margin: 0; font-size: 20px; }
.cart-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); min-width: 44px; min-height: 44px; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item img { width: 70px; height: 70px; object-fit: contain; background: var(--cream); flex: none; }
.ci-title { font-family: var(--emph); font-weight: 600; font-size: 15px; }
.ci-sub { font-size: 13px; color: var(--muted); }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--pill); }
.qty button { background: none; border: 0; width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--ink); }
.qty span { min-width: 22px; text-align: center; font-size: 14px; }
.ci-remove { background: none; border: 0; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.cart-empty { color: var(--muted); font-size: 15px; padding: 28px 0; }
.cart-foot { border-top: 1px solid var(--border); padding: 18px 20px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cart-total-row .t { font-family: var(--emph); font-weight: 600; }
.cart-note { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.cart-trust { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }

/* ---------- Trust marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; background: #fff; }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: slide 34s linear infinite; }
.marquee-track span { font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee-track { animation: none; }
}

/* ---------- Draft banner (review build only, remove before launch) ---------- */
.draft-bar {
  background: var(--brand-dark); color: #fff; text-align: center;
  padding: 10px 18px; font-size: 13px; line-height: 1.45;
}
.draft-bar strong { font-family: var(--emph); font-weight: 600; letter-spacing: .3px; }
.draft-bar .draft-sub { opacity: 1; }
@media (max-width: 620px) { .draft-bar { font-size: 12px; } }
@media (max-width: 540px) { .draft-bar .draft-mid { display: none; } }

/* ---------- Colorway showcase ---------- */
/* 7 of the 8 colorway shots are transparent PNGs and the 8th (Black Ice) is a
   JPEG on white, so every tile is white: the PNGs composite cleanly and the
   JPEG's own background disappears into the tile. Verified per image. */
/* Explicit column counts, not auto-fit: 8 swatches in an auto-fit grid landed
   6 + 2 at desktop, which reads as a mistake. 4x2 / 3 / 2 stays balanced. */
.color-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 30px;
}
@media (max-width: 900px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .color-grid { grid-template-columns: repeat(2, 1fr); } }

/* The buy block and the colorway showcase are both cream and adjacent, so their
   stacked section padding read as one large empty void. Let the showcase own
   the breathing room. */
.buy-block { padding-bottom: clamp(26px, 3vw, 40px); }
.color-swatch {
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  padding: 14px 10px 12px; cursor: pointer; font-family: var(--body);
  color: var(--ink); text-align: center; display: flex; flex-direction: column;
  gap: 8px; align-items: center; transition: border-color .15s, transform .15s;
  min-height: 44px;
}
.color-swatch:hover { border-color: var(--ink); transform: translateY(-2px); }
.color-swatch[aria-checked="true"] { border-color: var(--ink); border-width: 2px; padding: 13px 9px 11px; }
.color-swatch img { width: 100%; max-width: 116px; height: 132px; object-fit: contain; background: none; }
@media (max-width: 620px) { .color-swatch img { height: 108px; } }
.color-swatch .cs-name { font-size: 13px; letter-spacing: -0.2px; }
.color-swatch .cs-tag {
  font-size: 10px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--brand-dark); font-family: var(--emph); font-weight: 600;
}
.color-note { font-size: 15px; max-width: 62ch; }

/* ---------- Mini comparison table (reason 4) ---------- */
/* The ARMRA-style consolidation block, done in Twelve South's register: an
   honest, observational comparison, no fear column, no red X marks.
   Three columns as of the 2026-07-30 content pass: the wired headset, seat-back
   Bluetooth, and yours with AirFly. Both alternatives read muted; only the
   product column carries full ink and the cream field. */
.mini-compare-wrap { margin: 26px 0 0; overflow-x: auto; }
.mini-compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.mini-compare caption {
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-family: var(--emph); font-weight: 600; font-size: 12px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted);
}
.mini-compare th, .mini-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.mini-compare thead th {
  font-family: var(--emph); font-weight: 600; font-size: 12px;
  letter-spacing: .8px; text-transform: uppercase; border-bottom: 2px solid var(--ink);
}
.mini-compare tbody th { font-family: var(--emph); font-weight: 600; white-space: nowrap; }
.mini-compare td:last-child { color: var(--ink); }
.mini-compare tbody td:not(:last-child) { color: var(--muted); }
@media (max-width: 480px) { .mini-compare th, .mini-compare td { padding: 10px 8px; font-size: 13px; } .mini-compare tbody th { white-space: normal; } }

/* ---------- Deluxe band ---------- */
/* Two prongs were a full numbered reason in V1 and got demoted to a compact
   band in the 2026-07-30 pass. Headline beside the paragraph, not above a
   section: it has to read as an aside, not as a sixth reason. */
.deluxe-band { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: 12px 40px; align-items: start; }
.deluxe-band h2 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); }
.deluxe-band p { margin: 0; max-width: 62ch; }
@media (max-width: 700px) { .deluxe-band { grid-template-columns: 1fr; } }

/* Product column emphasis on the mini comparison (the reference page highlights
   its product column; ours gets a quiet cream field, not a hype treatment) */
.mini-compare td:last-child, .mini-compare thead th:last-child { background: var(--cream); }