/* ==========================================================================
   CubeMarket — Design System
   Tokens, components and animations extracted verbatim from the reference
   design (index.html). Every page in the app — storefront and admin — is
   built from the primitives in this file so the whole product reads as one
   piece of design work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette (from the reference @layer theme) */
  --cm-bg: #f5f5f2;
  --cm-surface: #ffffff;
  --cm-border: #e5e5e5;
  --cm-ink: #111111;
  --cm-muted: #6f6f6a;
  --cm-gold: #c8a86b;
  --cm-gold-soft: #dcc59a;
  --cm-charcoal: #14130f;

  /* Tints used for category / feature panels */
  --cm-sage: #f2f5ef;
  --cm-sky: #eff3f6;
  --cm-sand: #f8f2e8;

  /* Semantic */
  --cm-success: #059669;
  --cm-success-soft: #ecfdf5;
  --cm-success-ink: #047857;
  --cm-warning: #b45309;
  --cm-warning-soft: #fffbeb;
  --cm-danger: #dc2626;
  --cm-danger-soft: #fef2f2;
  --cm-info: #4f6d7a;
  --cm-info-soft: #eff3f6;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Radii — the reference uses a distinctive 20px card radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 16px 36px -28px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 28px 50px -24px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 20px 40px -28px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 60px 120px -40px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 10px 30px -10px rgba(200, 168, 107, 0.7);
  --shadow-gold-sm: 0 8px 20px -6px rgba(200, 168, 107, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 500ms;
  --t-slower: 700ms;

  /* Layout */
  --container: 80rem;      /* max-w-7xl */
  --container-narrow: 48rem;
  --gutter: 1.5rem;
  --gutter-lg: 2.5rem;
  --section-y: 5rem;
  --section-y-lg: 7rem;

  /* Logo height + the header's vertical padding. Drives scroll-padding and
     the sticky offset on the checkout summary, so it must track .brand--md. */
  --header-h: 80px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100vh;
  background: var(--cm-bg);
  color: var(--cm-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* Storefront tables (the membership history is the only one). `admin.css`
   carries its own copy for the admin area, but that stylesheet is not loaded
   out here — without these, a five-column table pushes the whole page sideways
   on a phone. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cm-muted);
  border-bottom: 1px solid var(--cm-border);
  white-space: nowrap;
}
.table td { padding: 0.875rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--cm-border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--cm-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--cm-gold); color: #fff; }

/* Scrollbar — subtle, matches the palette */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cm-bg); }
::-webkit-scrollbar-thumb { background: #d8d8d2; border-radius: 999px; border: 2px solid var(--cm-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--cm-gold); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  letter-spacing: -1px;
  line-height: 1.1;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--cm-gold);
}
.eyebrow--tight { letter-spacing: 0.2em; }

.h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.05; letter-spacing: -1.5px; }
.h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);       line-height: 1.1;  letter-spacing: -1px; }
.h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem);   line-height: 1.2;  letter-spacing: -0.5px; }
.h4 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.3px; }
.h5 { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.2px; }

.lead { font-size: 1.0625rem; line-height: 1.65; color: var(--cm-muted); }
.muted { color: var(--cm-muted); }
.small { font-size: 0.875rem; }
.tiny  { font-size: 0.75rem; }
.gold  { color: var(--cm-gold); }
.strong { font-weight: 500; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.rich-text p { margin-bottom: 1rem; color: var(--cm-muted); line-height: 1.75; }
.rich-text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 3.5rem; }
/* Two classes on purpose: the responsive `.section` rule further down would
   otherwise win on the cascade and reinstate the padding. */
.section.section--flush-top { padding-top: 0; }
.section--dark { position: relative; background: var(--cm-charcoal); color: #fff; overflow: hidden; }
.section--surface { background: var(--cm-surface); }

.section-head {
  max-width: 36rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.section-head .h2 { margin-top: 1rem; }
.section-head .lead { margin-top: 1rem; }

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
  margin-bottom: 2.5rem;
  text-align: left;
}
.section-head--split > div { max-width: 34rem; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.375rem; } .gap-2 { gap: 0.625rem; } .gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }   .gap-5 { gap: 2rem; }
.mt-1 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.25rem; }  .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.ml-auto { margin-left: auto; }
.grow { flex: 1; }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }

/* Decorative grid overlay used on dark panels (from .cm-grid-overlay) */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.875rem;
  --btn-px: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-base), opacity var(--t-base);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

/* Primary: ink -> gold, exactly as in the reference */
.btn--primary { background: var(--cm-ink); color: #fff; }
.btn--primary:not(:disabled):hover { background: var(--cm-gold); box-shadow: var(--shadow-gold); }

.btn--gold { background: var(--cm-gold); color: #fff; }
.btn--gold:not(:disabled):hover { background: #b8975a; box-shadow: var(--shadow-gold); }

.btn--outline {
  border: 1px solid rgba(17, 17, 17, 0.15);
  color: var(--cm-ink);
  background: transparent;
}
.btn--outline:not(:disabled):hover { border-color: var(--cm-gold); color: var(--cm-gold); }

/* The free sample sits next to the paid buttons, so it is deliberately a
   different colour: it is the one action on the page that costs nothing. */
.btn--sample {
  background: var(--cm-success);
  color: #fff;
  border: 1px solid var(--cm-success);
}
.btn--sample:not(:disabled):hover { background: var(--cm-success-ink); border-color: var(--cm-success-ink); }

.btn--ghost { color: var(--cm-muted); }
.btn--ghost:hover { color: var(--cm-ink); background: rgba(17, 17, 17, 0.05); }

.btn--soft {
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  color: var(--cm-muted);
}
.btn--soft:hover { border-color: var(--cm-gold); color: var(--cm-gold); }

.btn--onDark {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.btn--onDark:hover { border-color: var(--cm-gold); color: var(--cm-gold); }

.btn--danger { background: var(--cm-danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; }

.btn--sm { --btn-py: 0.625rem; --btn-px: 1.125rem; font-size: 0.8125rem; }
.btn--xs { --btn-py: 0.5rem;   --btn-px: 0.875rem; font-size: 0.75rem; }
.btn--lg { --btn-py: 1.0625rem; --btn-px: 2.25rem; font-size: 0.9375rem; }
.btn--block { display: flex; width: 100%; }

.btn .icon { width: 1rem; height: 1rem; flex: none; }

/* Text link with the reference's gold underline sweep */
.link-underline { position: relative; color: var(--cm-muted); transition: color var(--t-base); }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 1px; width: 0;
  background: var(--cm-gold);
  transition: width var(--t-base);
}
.link-underline:hover { color: var(--cm-ink); }
.link-underline:hover::after { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cm-ink);
  transition: gap var(--t-base), color var(--t-base);
}
.link-arrow:hover { gap: 0.75rem; color: var(--cm-gold); }

/* --------------------------------------------------------------------------
   6. Badges / pills
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cm-muted);
  background: var(--cm-surface);
}
.pill--gold  { border-color: rgba(200, 168, 107, 0.4); color: var(--cm-gold); background: rgba(200, 168, 107, 0.08); }
.pill--dark  { background: rgba(0, 0, 0, 0.5); border-color: transparent; color: #fff; backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing: 0.06em; }
.pill--sale  { background: var(--cm-ink); border-color: transparent; color: #fff; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
}
.badge--success { background: var(--cm-success-soft); color: var(--cm-success-ink); }
.badge--warning { background: var(--cm-warning-soft); color: var(--cm-warning); }
.badge--danger  { background: var(--cm-danger-soft);  color: var(--cm-danger); }
.badge--info    { background: var(--cm-info-soft);    color: var(--cm-info); }
.badge--muted   { background: rgba(17, 17, 17, 0.05); color: var(--cm-muted); }

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   7. Cards & panels
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.card--lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.card--flat { box-shadow: none; }
.card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__body--lg { padding: 2rem; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--cm-border);
}
.card__foot { padding: 1.25rem 1.5rem; border-top: 1px solid var(--cm-border); }

.panel {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.divider { height: 1px; background: var(--cm-border); border: 0; }
.divider--y { margin-block: 1.25rem; }

/* --------------------------------------------------------------------------
   8. Product card
   -------------------------------------------------------------------------- */
.product-card { height: 100%; }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cm-sand);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slower) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.08); }

.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

.product-card__tag  { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.product-card__save { position: absolute; top: 1rem; right: 1rem; z-index: 2; }

.product-card__quick {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cm-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { opacity: 1; transform: translateY(0); }

.product-card__category {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cm-gold);
}
/* Sans, not the display serif: product names here are often codes like
   "R3_RD_157", which a display face renders as decoration rather than
   information. */
.product-card__title {
  margin-top: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1.4;
  /* Two lines maximum, so cards in a row stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.product-card__title a:hover { color: var(--cm-gold); }

.product-card__formats { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-top: 1rem;
}
/* A price is a number to be read, not a flourish — tabular figures keep the
   digits aligned between cards. */
.price {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  color: var(--cm-ink);
}
.price--sm { font-size: 1.0625rem; }
.price--lg { font-size: 1.75rem; }
.price-compare {
  font-size: 0.875rem;
  color: var(--cm-muted);
  text-decoration: line-through;
}
.price-off {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--cm-success-ink);
  background: var(--cm-success-soft);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
}

.product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   8b. Free-sample cards
   Lighter than a product card on purpose: nothing is being sold here, so the
   card carries only the render, the name and the one green action.
   -------------------------------------------------------------------------- */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1.25rem;
}
.sample-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  background: var(--cm-surface);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.sample-card:hover { border-color: var(--cm-gold-soft); box-shadow: var(--shadow-card); }
.sample-card__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--cm-bg); }
.sample-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sample-card__body { display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem; }
.sample-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sample-card__title a:hover { color: var(--cm-gold); }

/* --------------------------------------------------------------------------
   9. Header / navigation
   -------------------------------------------------------------------------- */
/* The header is charcoal on every page. The supplied logo carries its own
   dark background, so a light header would frame it in a black box. */
/* The header carries no chrome of its own at the top of a page: it is pure
   glass, so the hero video (home) or the cream page ground (everywhere else)
   runs edge to edge behind it. The frosted bar only materialises once there is
   content scrolling underneath for it to separate itself from. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-slow),
    border-color var(--t-slow),
    box-shadow var(--t-slow),
    backdrop-filter var(--t-slow);
}
/* An open mobile menu gets the same treatment — its panel is opaque, so a
   transparent bar above it would read as a gap. */
.site-header.is-stuck,
.site-header.is-open {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(17, 17, 17, 0.07);
  box-shadow: 0 12px 30px -26px rgba(0, 0, 0, 0.5);
}
/* Without backdrop-filter, 0.72 alpha would let page content show through and
   collide with the nav. Those browsers get an opaque bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck,
  .site-header.is-open { background: var(--cm-surface); }
}

/* --- Overlay mode --------------------------------------------------------
   Set by `headerSolid: false` in the controller (the homepage). The bar is
   lifted out of the flow so the hero runs up behind it, and its controls
   invert to read against the charcoal until the frosted state takes over. */
.site-header--overlay { position: fixed; left: 0; right: 0; }

/* The hero owns the space the fixed bar would have occupied. --header-h is a
   token (80px) that main.js re-measures at the current breakpoint. */
.site-header--overlay ~ main > *:first-child {
  padding-top: calc(var(--header-h) + 2.5rem);
}

.site-header--overlay:not(.is-stuck):not(.is-open) .nav a,
.site-header--overlay:not(.is-stuck):not(.is-open) .icon-btn { color: rgba(255, 255, 255, 0.72); }
.site-header--overlay:not(.is-stuck):not(.is-open) .nav a:hover,
.site-header--overlay:not(.is-stuck):not(.is-open) .nav a.is-active { color: #fff; }
.site-header--overlay:not(.is-stuck):not(.is-open) .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.site-header--overlay:not(.is-stuck):not(.is-open) .burger span { background: #fff; }

.site-header--overlay:not(.is-stuck):not(.is-open) .header-search {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header--overlay:not(.is-stuck):not(.is-open) .header-search:focus-within {
  border-color: var(--cm-gold);
  background: rgba(255, 255, 255, 0.16);
}
.site-header--overlay:not(.is-stuck):not(.is-open) .header-search input { color: #fff; }
.site-header--overlay:not(.is-stuck):not(.is-open) .header-search input::placeholder,
.site-header--overlay:not(.is-stuck):not(.is-open) .header-search svg { color: rgba(255, 255, 255, 0.6); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.875rem;
}

/* Logo lockup — the artwork is 4.44:1, so height drives the size.
   Sizes step down on narrow screens (see the media query below) so the
   wordmark never crowds out the cart and menu controls.

   The supplied artwork has its dark navy background baked in. Against the light
   header that would read as a stray rectangle, so it is rounded and inset to
   read as a deliberate badge instead. */
.brand { display: block; flex: none; line-height: 0; }
.brand img {
  width: auto;
  display: block;
  border-radius: var(--radius-md);
}
.brand--sm img { height: 34px; }
.brand--md img { height: 52px; }
.brand--lg img { height: 68px; }
.brand img {
  /* The logo's own background is #0A0F1C against a #14130f surface; a soft
     mask blends the two so it does not read as a pasted rectangle. */
  border-radius: 6px;
  transition: opacity var(--t-base);
}
.brand:hover img { opacity: 0.85; }

.nav { display: none; align-items: center; gap: 2.25rem; }
.nav a { font-size: 0.875rem; color: var(--cm-muted); }
.nav a:hover { color: var(--cm-ink); }
.nav a.is-active { color: var(--cm-ink); }
.nav a.is-active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--cm-muted);
  transition: background-color var(--t-base), color var(--t-base);
}
.icon-btn:hover { background: rgba(17, 17, 17, 0.06); color: var(--cm-ink); }
.icon-btn svg { width: 18px; height: 18px; }

.icon-btn__count {
  position: absolute;
  top: -2px; right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 3px;
  border-radius: var(--radius-pill);
  background: var(--cm-gold);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
}

.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
}
.burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--cm-ink);
  transition: transform var(--t-base);
}
.site-header.is-open .burger span:first-child { transform: translateY(3px) rotate(45deg); }
.site-header.is-open .burger span:last-child  { transform: translateY(-3px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--cm-border);
  padding: 1rem var(--gutter) 1.25rem;
  background: var(--cm-surface);
}
.site-header.is-open .mobile-nav { display: block; }
.mobile-nav a {
  display: block;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--cm-muted);
  transition: background-color var(--t-base), color var(--t-base);
}
.mobile-nav a:hover, .mobile-nav a.is-active { background: var(--cm-bg); color: var(--cm-ink); }

/* Header search */
.header-search {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  background: var(--cm-bg);
  min-width: 14rem;
  transition: border-color var(--t-base), background-color var(--t-base);
}
.header-search:focus-within { border-color: var(--cm-gold); background: var(--cm-surface); }
.header-search input {
  border: 0; outline: 0; background: none; width: 100%;
  font-size: 0.875rem; color: var(--cm-ink);
}
.header-search input::placeholder { color: var(--cm-muted); }
.header-search svg { width: 16px; height: 16px; color: var(--cm-muted); flex: none; }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cm-bg);
  padding-block: 3.5rem 5rem;
}
.hero__head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.hero__head .h1 { margin-top: 1rem; }
.hero__head .lead { margin-top: 1.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   10a. Feature hero
   Jewellery is photographed on white, so the page opens on white too and the
   renders carry the colour. The only warmth is a faint gold wash behind the
   headline, which ties the hero to the wordmark without darkening the page.
   -------------------------------------------------------------------------- */
.hero--feature {
  background: linear-gradient(to bottom, var(--cm-surface) 0%, var(--cm-bg) 100%);
  color: var(--cm-ink);
  padding-block: 4rem 4.5rem;
}
.hero--feature .hero__head { max-width: 46rem; margin-bottom: 3.5rem; }
.hero--feature .lead { color: var(--cm-muted); }

/* Ambient marble loop behind the headline.
   The footage is deliberately near-greyscale and slowed to a drift — the warmth
   comes from `.hero__aura` painted over it, so the video adds movement without
   introducing a second colour temperature. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transform: scale(1.01); /* room for the vignette without showing an edge */
}
.hero__veil {
  position: absolute;
  inset: 0;
}

/* Motion is decorative here, so it goes away entirely when it is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media {
    background: url('/images/hero/hero-diamond-v2.jpg') center / cover no-repeat;
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   10b. Dark hero
   Diamond facets are highlights, and a highlight needs darkness to exist — on
   the cream ground the sparkle simply washed out. So the opening band runs
   charcoal, the same charcoal as the navbar and the turntable section, and
   hands back to the cream page through `.hero__fade`.
   -------------------------------------------------------------------------- */
.hero--dark {
  background: var(--cm-charcoal);
  color: #fff;
}
/* The rings sit dead centre of the frame, which `object-fit: cover` maps to the
   middle of the hero — below the headline. So the shade behind the type can be
   light: it only has to cover the upper band, leaving the stones legible. */
.hero--dark .hero__veil {
  background:
    radial-gradient(ellipse 62% 42% at 50% 26%,
      rgba(20, 19, 15, 0.72) 0%,
      rgba(20, 19, 15, 0.45) 48%,
      rgba(20, 19, 15, 0.12) 76%,
      transparent 92%),
    /* Vignette — holds attention on the stones in the middle */
    radial-gradient(ellipse 88% 78% at 50% 50%,
      transparent 42%,
      rgba(20, 19, 15, 0.72) 100%),
    linear-gradient(to bottom,
      rgba(20, 19, 15, 0.55) 0%,
      transparent 20%,
      rgba(20, 19, 15, 0.4) 68%,
      var(--cm-charcoal) 100%);
}
.hero--dark .hero__aura {
  background: radial-gradient(circle, rgba(200, 168, 107, 0.22) 0%, rgba(200, 168, 107, 0.07) 42%, transparent 68%);
}
.hero--dark .h1 { color: #fff; }
.hero--dark .lead { color: rgba(255, 255, 255, 0.66); }
.hero--dark .hero__facts { border-top-color: rgba(255, 255, 255, 0.14); }
.hero--dark .hero__fact b { color: #fff; }
.hero--dark .hero__fact span { color: rgba(255, 255, 255, 0.5); }
.hero--dark .btn--outline { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.hero--dark .btn--outline:not(:disabled):hover { border-color: var(--cm-gold); color: var(--cm-gold); }
/* The product cards stay white — floating panels against the charcoal. */
.hero--dark .feature-card--light { border-color: rgba(255, 255, 255, 0.1); }

/* Ambient light: a wide, very soft gold pool behind the headline. */
.hero__aura {
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(78rem, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 168, 107, 0.16) 0%, rgba(200, 168, 107, 0.05) 40%, transparent 68%);
  filter: blur(24px);
  pointer-events: none;
  animation: cm-glow 7s ease-in-out infinite;
}
/* Fades the charcoal into the cream section below, so the seam is a gradient
   rather than a hard line. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--cm-bg));
  pointer-events: none;
}
.hero--feature .container { position: relative; z-index: 1; }

/* Hairline rule + eyebrow, a small piece of couture detailing */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--cm-gold);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cm-gold));
}
.hero__eyebrow::after { background: linear-gradient(to left, transparent, var(--cm-gold)); }

/* Credibility strip under the CTAs */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cm-border);
}
.hero__fact { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 0.5rem; min-width: 7rem; }
.hero__fact b {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--cm-ink);
}
.hero__fact span {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cm-muted);
}

/* Feature cards on the light hero read as raised plates */
.hero--feature .feature-card--light {
  border-color: var(--cm-border);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.4);
}
.hero--feature .feature-card--light:hover {
  border-color: rgba(200, 168, 107, 0.55);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.5);
}

.hero__grid { display: grid; gap: 1.25rem; }

.feature-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  background: var(--cm-charcoal);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45); }
.feature-card--lg { min-height: 26rem; }
.feature-card--sm { min-height: 12.5rem; }

.feature-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.9);
  transition: transform var(--t-slower) var(--ease-out);
}
.feature-card:hover .feature-card__img { transform: scale(1.06); }
.feature-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.3));
}
.feature-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: 1.75rem;
  color: #fff;
}
.feature-card__label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.65);
}
.feature-card__title { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.5px; }
.feature-card--sm .feature-card__title { font-size: 1.25rem; }
.feature-card__meta { margin-top: 0.375rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* Floating 3D-ish showcase used on the dark section */
.showcase { position: relative; height: 26rem; max-width: 26rem; margin-inline: auto; }
.showcase__plate {
  position: absolute;
  inset: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.7);
  animation: cm-float-slow 8s ease-in-out infinite;
}
.showcase__plate img { width: 100%; height: 100%; object-fit: cover; }
/* A white-background product render becomes a lit plate floating on the dark
   panel, rather than a cropped photo. */
.showcase__plate--light { background: var(--cm-surface); }
.showcase__plate--light img { object-fit: contain; padding: 2rem; }
.showcase__chip {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  animation: cm-float 6s ease-in-out infinite;
}
.showcase__chip--a { top: 2rem; right: -1rem; width: 6rem; height: 6rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); }
.showcase__chip--b { bottom: 2.5rem; left: -1.5rem; width: 5rem; height: 5rem; border-radius: 50%; background: rgba(200, 168, 107, 0.12); animation-delay: 1.5s; }
.showcase__glow {
  position: absolute;
  top: -25%; left: 50%;
  width: 75%; height: 75%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 168, 107, 0.35), transparent 70%);
  filter: blur(64px);
  animation: cm-glow 4s ease-in-out infinite;
}

/* Small play/format badge on a feature card */
.feature-card__badge {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background-color var(--t-base), transform var(--t-base);
}
.feature-card:hover .feature-card__badge { background: var(--cm-gold); transform: scale(1.08); }
.feature-card__badge svg { width: 1.125rem; height: 1.125rem; }

/* --------------------------------------------------------------------------
   10b. Video wall — one turntable per finish
   -------------------------------------------------------------------------- */
.video-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.video-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background: var(--cm-surface);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.video-tile:hover { transform: translateY(-6px); box-shadow: 0 50px 90px -35px rgba(0, 0, 0, 0.9); }
.video-tile video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--cm-surface);
}
.video-tile figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--cm-border);
  background: var(--cm-surface);
}
.video-tile__label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.2px;
  color: var(--cm-ink);
}
.video-tile__meta {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cm-gold);
}

/* --------------------------------------------------------------------------
   10c. Render grid
   -------------------------------------------------------------------------- */
.render-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.875rem;
}
.render-tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-lg);
  background: var(--cm-surface);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-base);
}
.render-tile:hover {
  transform: translateY(-4px);
  border-color: var(--cm-gold);
  box-shadow: var(--shadow-card-hover);
}
.render-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  transition: transform var(--t-slower) var(--ease-out);
}
.render-tile:hover img { transform: scale(1.07); }

/* --------------------------------------------------------------------------
   10d. Specification block
   -------------------------------------------------------------------------- */
.spec-layout { display: grid; gap: 2.5rem; align-items: center; }

.spec-sheet {
  display: block;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  background: var(--cm-surface);
  box-shadow: var(--shadow-raised);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.spec-sheet:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45); }
.spec-sheet img { width: 100%; height: auto; }

.spec-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: var(--cm-border);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem 1.25rem;
  background: var(--cm-surface);
}
.spec-stat__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--cm-gold);
}
.spec-stat__label {
  font-size: 0.75rem;
  color: var(--cm-muted);
}

/* --------------------------------------------------------------------------
   11. Trust / benefit blocks
   -------------------------------------------------------------------------- */
.trust-grid { display: grid; gap: 1.25rem; }

.trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.trust-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.trust-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--cm-sand);
  color: var(--cm-gold);
}
.trust-card__icon svg { width: 1.25rem; height: 1.25rem; }
.trust-card h3 { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.125rem; }
.trust-card p  { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--cm-muted); }

/* Compact inline trust row (checkout / product page) */
.trust-row {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.trust-row li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--cm-muted);
}
.trust-row svg { width: 1rem; height: 1rem; flex: none; margin-top: 2px; color: var(--cm-gold); }
.trust-row strong { display: block; color: var(--cm-ink); font-weight: 500; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   12. Category tiles
   -------------------------------------------------------------------------- */
.category-tile {
  position: relative;
  display: block;
  height: 17rem;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.category-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-raised); }
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slower) var(--ease-out); }
.category-tile:hover img { transform: scale(1.08); }
.category-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.05) 70%); }
.category-tile__content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1.5rem; color: #fff; }
.category-tile__content h3 { font-family: var(--font-display); font-size: 1.375rem; }
.category-tile__content p { margin-top: 0.25rem; font-size: 0.8125rem; color: rgba(255,255,255,0.65); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field + .field { margin-top: 1.25rem; }

.label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cm-ink);
}
.label .req { color: var(--cm-danger); }
.hint { font-size: 0.75rem; color: var(--cm-muted); line-height: 1.5; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-md);
  background: var(--cm-surface);
  font-size: 0.9375rem;
  color: var(--cm-ink);
  transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}
.input::placeholder, .textarea::placeholder { color: #a8a8a2; }
.input:hover, .select:hover, .textarea:hover { border-color: #d0d0c9; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 3px rgba(200, 168, 107, 0.18);
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.65; }

/* Show/hide password. The wrapper is added by main.js, so the padding that
   keeps typed text clear of the eye lives here rather than on every field. */
.password-field { position: relative; display: block; }
.password-field .input { padding-right: 3rem; }
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--cm-muted);
  cursor: pointer;
  transition: color var(--t-base), background-color var(--t-base);
}
.password-field__toggle:hover { color: var(--cm-ink); background: rgba(17, 17, 17, 0.05); }
.password-field__toggle:focus-visible { outline: 2px solid var(--cm-gold); outline-offset: 1px; }
.password-field__toggle svg { width: 1.125rem; height: 1.125rem; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--cm-danger);
  background: var(--cm-danger-soft);
}
.field-error { font-size: 0.75rem; color: var(--cm-danger); }

.field-row { display: grid; gap: 1.25rem; }

/* File input */
.filedrop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  border: 1px dashed #d3d3cc;
  border-radius: var(--radius-md);
  background: var(--cm-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background-color var(--t-base);
}
.filedrop:hover, .filedrop.is-drag { border-color: var(--cm-gold); background: var(--cm-sand); }
.filedrop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filedrop__icon { width: 1.75rem; height: 1.75rem; color: var(--cm-gold); }
.filedrop__title { font-size: 0.875rem; font-weight: 500; }
.filedrop__hint  { font-size: 0.75rem; color: var(--cm-muted); }
.filedrop__name  { font-size: 0.8125rem; color: var(--cm-ink); font-weight: 500; word-break: break-all; }

.checkbox { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; cursor: pointer; }
.checkbox input { width: 1rem; height: 1rem; margin-top: 2px; accent-color: var(--cm-gold); flex: none; }

/* --------------------------------------------------------------------------
   14. Cart & order summary
   -------------------------------------------------------------------------- */
.checkout-layout { display: grid; gap: 1.5rem; align-items: start; }

.line-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--cm-border);
}
.line-item:last-child { border-bottom: 0; }
.line-item__media {
  width: 5.5rem; height: 4.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cm-sand);
  border: 1px solid var(--cm-border);
}
.line-item__media img { width: 100%; height: 100%; object-fit: cover; }
.line-item__title { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.2px; }
.line-item__title a:hover { color: var(--cm-gold); }
.line-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--cm-surface);
}
.qty button {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  color: var(--cm-muted);
  transition: background-color var(--t-base), color var(--t-base);
}
.qty button:hover:not(:disabled) { background: var(--cm-bg); color: var(--cm-ink); }
.qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty span { min-width: 2rem; text-align: center; font-size: 0.875rem; font-weight: 500; }

.remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--cm-muted);
  transition: color var(--t-base);
}
.remove-btn:hover { color: var(--cm-danger); }
.remove-btn svg { width: 0.875rem; height: 0.875rem; }

.summary { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.summary__rows { display: flex; flex-direction: column; gap: 0.875rem; }
.summary__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.summary__row .label-text { color: var(--cm-muted); }
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.125rem;
  margin-top: 1.125rem;
  border-top: 1px solid var(--cm-border);
}
.summary__total .label-text { font-size: 1rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   15. Empty & loading states
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
}
.empty-state__icon {
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: var(--cm-sand);
  color: var(--cm-gold);
}
.empty-state__icon svg { width: 1.5rem; height: 1.5rem; }
.empty-state h3 { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.375rem; }
.empty-state p  { margin-top: 0.625rem; max-width: 26rem; font-size: 0.9375rem; color: var(--cm-muted); }
.empty-state .btn { margin-top: 1.75rem; }

.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cm-spin 0.7s linear infinite;
  flex: none;
}
.spinner--ink { border-color: rgba(17, 17, 17, 0.15); border-top-color: var(--cm-ink); }
.btn.is-loading { pointer-events: none; opacity: 0.75; }

.skeleton {
  background: linear-gradient(90deg, #ececE6 25%, #f4f4ef 37%, #ececE6 63%);
  background-size: 400% 100%;
  animation: cm-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   16. Toasts & dialogs
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 120;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(92vw, 26rem);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--cm-ink);
  color: #fff;
  font-size: 0.875rem;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  animation: cm-fade-rise 0.5s var(--ease-out) both;
  pointer-events: auto;
}
.toast.is-leaving { animation: cm-fade-out 0.3s ease forwards; }
.toast svg { width: 1rem; height: 1rem; flex: none; }
.toast--success { background: var(--cm-success-ink); }
.toast--error   { background: var(--cm-danger); }
.toast--info    { background: var(--cm-ink); }

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  animation: cm-fade-in-plain 0.2s ease both;
}
.dialog {
  width: 100%;
  max-width: 26rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: cm-fade-rise 0.35s var(--ease-out) both;
}
.dialog__body { padding: 2rem; text-align: center; }
.dialog__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-inline: auto; border-radius: 50%; background: var(--cm-danger-soft); color: var(--cm-danger); }
.dialog__icon svg { width: 1.25rem; height: 1.25rem; }
.dialog h3 { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.375rem; }
.dialog p  { margin-top: 0.625rem; font-size: 0.9375rem; color: var(--cm-muted); }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0 2rem 2rem; }

/* Inline alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 1px; }
.alert--success { background: var(--cm-success-soft); color: var(--cm-success-ink); border-color: rgba(5, 150, 105, 0.2); }
.alert--error   { background: var(--cm-danger-soft);  color: #b91c1c;              border-color: rgba(220, 38, 38, 0.2); }
.alert--warning { background: var(--cm-warning-soft); color: var(--cm-warning);    border-color: rgba(180, 83, 9, 0.2); }
.alert--info    { background: var(--cm-info-soft);    color: var(--cm-info);       border-color: rgba(79, 109, 122, 0.2); }

/* --------------------------------------------------------------------------
   17. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--cm-border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 1.75rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.2px;
  transition: color var(--t-base);
}
.accordion__trigger:hover { color: var(--cm-gold); }
.accordion__chevron {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  border: 1px solid var(--cm-border);
  border-radius: 50%;
  transition: transform var(--t-base), border-color var(--t-base), color var(--t-base);
}
.accordion__chevron svg { width: 0.875rem; height: 0.875rem; }
.accordion__item.is-open .accordion__chevron { transform: rotate(180deg); border-color: var(--cm-gold); color: var(--cm-gold); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--ease-out);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding: 0 1.75rem 1.5rem; font-size: 0.9375rem; line-height: 1.7; color: var(--cm-muted); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--cm-border);
  background: var(--cm-charcoal);
  color: #fff;
  padding-block: 4rem;
}
.site-footer__grid { display: grid; gap: 3rem; }
.site-footer .brand { display: inline-block; }
.site-footer__about { margin-top: 1rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); }
.site-footer h3 { font-size: 0.875rem; font-weight: 500; color: #fff; }
.site-footer ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer ul a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); transition: color var(--t-base); }
.site-footer ul a:hover { color: var(--cm-gold); }

.social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.social a {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  transition: border-color var(--t-base), color var(--t-base);
}
.social a:hover { border-color: var(--cm-gold); color: var(--cm-gold); }
.social svg { width: 1rem; height: 1rem; }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Policy links. Kept quieter than the nav columns above — they need to be
   present on every page and easy to find, not competing for attention. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.site-footer__legal a { color: rgba(255, 255, 255, 0.55); }
.site-footer__legal a:hover { color: var(--cm-gold); }
.site-footer__legal span { color: rgba(255, 255, 255, 0.25); }

/* Build credit — sits below the legal line, on its own rule so it reads as a
   signature rather than another footer link. */
.site-footer__credit {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  width: 100%;
  max-width: 22rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.35);
}
.site-footer__credit a,
.site-footer__credit strong {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cm-gold);
}
.site-footer__credit a { transition: color var(--t-base); }
.site-footer__credit a:hover { color: var(--cm-gold-soft); }

/* --------------------------------------------------------------------------
   19. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head { padding-block: 3rem 2rem; }
.page-head .h1 { margin-top: 0.875rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -1px; }
.page-head .lead { margin-top: 0.875rem; max-width: 38rem; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--cm-muted); }
.breadcrumb a:hover { color: var(--cm-gold); }
.breadcrumb svg { width: 0.75rem; height: 0.75rem; opacity: 0.5; }

/* Filter bar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.toolbar__search { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 14rem; }
.toolbar__search .input { padding-block: 0.625rem; }
.toolbar .select { width: auto; min-width: 10rem; padding-block: 0.625rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  background: var(--cm-surface);
  font-size: 0.8125rem;
  color: var(--cm-muted);
  transition: border-color var(--t-base), color var(--t-base), background-color var(--t-base);
}
.chip:hover { border-color: var(--cm-gold); color: var(--cm-gold); }
.chip.is-active { background: var(--cm-ink); border-color: var(--cm-ink); color: #fff; }
/* A filter that is also a to-do list. */
.chip--alert { border-color: var(--cm-warning); color: var(--cm-warning); }
.chip--alert.is-active { background: var(--cm-warning); border-color: var(--cm-warning); color: #fff; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem; margin-top: 3rem; }
.pagination a, .pagination span {
  display: grid; place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  background: var(--cm-surface);
  font-size: 0.875rem;
  color: var(--cm-muted);
  transition: border-color var(--t-base), color var(--t-base), background-color var(--t-base);
}
.pagination a:hover { border-color: var(--cm-gold); color: var(--cm-gold); }
.pagination .is-current { background: var(--cm-ink); border-color: var(--cm-ink); color: #fff; }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   20. Product detail
   -------------------------------------------------------------------------- */
.pdp { display: grid; gap: 2.5rem; align-items: start; }

.pdp__gallery {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  background: var(--cm-charcoal);
  box-shadow: var(--shadow-raised);
  aspect-ratio: 4 / 3;
}
.pdp__gallery img { width: 100%; height: 100%; object-fit: cover; }
.pdp__gallery-badge { position: absolute; top: 1.25rem; left: 1.25rem; }

/* Product renders sit on white, so the gallery frame stays light rather than
   using the charcoal panel that suits dark 3D previews. */
.pdp__gallery--light { background: var(--cm-surface); }

.pdp__stage { position: absolute; inset: 0; }
.pdp__stage figure { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base); pointer-events: none; }
.pdp__stage figure.is-active { opacity: 1; pointer-events: auto; }
.pdp__stage img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }

/* Video is click-to-play with preload="none": these turntables are ~25 MB
   each and must never download just because the page opened. */
.pdp__stage figure.pdp__video { background: var(--cm-charcoal); }
.pdp__stage figure.pdp__video video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--cm-charcoal);
  padding: 0;
}

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.pdp__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-sm);
  background: var(--cm-surface);
  cursor: pointer;
  transition: border-color var(--t-base), transform var(--t-base);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pdp__thumb:hover { border-color: var(--cm-gold); transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--cm-ink); box-shadow: inset 0 0 0 1px var(--cm-ink); }
/* Video thumbnails show their poster with a play badge over it, so the strip
   reads as one set of views rather than images plus mystery black tiles. */
.pdp__thumb--video { background: var(--cm-surface); }
.pdp__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(17, 17, 17, 0.28);
  color: #fff;
  transition: background-color var(--t-base);
}
.pdp__thumb--video:hover .pdp__thumb-play { background: rgba(17, 17, 17, 0.12); }
.pdp__thumb-play svg { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.pdp__video-label {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pdp__thumb--spec::after {
  content: "CAD";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 0;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
}

/* Feature cards carrying a white-background render: drop the dark scrim and
   put the caption on a light plate instead, or the shot turns grey. */
.feature-card--light { background: var(--cm-surface); }
.feature-card--light .feature-card__img { filter: none; object-fit: contain; padding: 2rem; }
.feature-card--light .feature-card__scrim {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 12%, rgba(255, 255, 255, 0) 55%);
}
.feature-card--light .feature-card__content { color: var(--cm-ink); }
.feature-card--light .feature-card__label { color: var(--cm-gold); }
.feature-card--light .feature-card__meta { color: var(--cm-muted); }

/* Sans rather than the display serif. Design names are usually codes
   ("R3_RD_157"), and a serif turns an underscore-heavy string into ornament.
   `anywhere` is what stops a long unbroken code overflowing on a phone. */
.pdp__title {
  margin-top: 0.875rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
}

.pdp__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding-block: 1.5rem;
  margin-block: 1.75rem;
  border-block: 1px solid var(--cm-border);
}
.pdp__meta-item .k { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cm-muted); }
.pdp__meta-item .v { margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }

.pdp__buy { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   21. Success page
   -------------------------------------------------------------------------- */
.success-hero { text-align: center; padding-block: 3rem 2rem; }
.success-hero__icon {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--cm-success-soft);
  color: var(--cm-success);
  animation: cm-pop 0.6s var(--ease-out) both;
}
.success-hero__icon svg { width: 1.75rem; height: 1.75rem; }
.success-hero .h1 { margin-top: 1.5rem; font-size: clamp(2rem, 4vw, 2.75rem); }

.download-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--cm-border);
}
.download-item:last-child { border-bottom: 0; }
.download-item__media {
  width: 3.5rem; height: 3.5rem;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--cm-border);
  background: var(--cm-sand);
}
.download-item__media img { width: 100%; height: 100%; object-fit: cover; }

.kv-list { display: flex; flex-direction: column; gap: 0.875rem; }
.kv-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.kv-list .k { color: var(--cm-muted); }
.kv-list .v { font-weight: 500; text-align: right; word-break: break-all; }

/* --------------------------------------------------------------------------
   22. Reveal-on-scroll (from .cm-reveal)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; }
.reveal.is-visible { animation: cm-fade-in 0.9s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   23. Keyframes (verbatim from the reference stylesheet)
   -------------------------------------------------------------------------- */
@keyframes cm-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cm-fade-in-plain { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-fade-rise {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes cm-fade-out { to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes cm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes cm-float-slow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes cm-glow {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
@keyframes cm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes cm-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* The toast stack is already centred by transform, so its rise animation
   has to preserve the -50% X offset — hence the dedicated keyframes above. */

/* --------------------------------------------------------------------------
   23a. Format download buttons
   -------------------------------------------------------------------------- */
.format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.format-btn { font-variant-numeric: tabular-nums; }
.format-btn em {
  font-style: normal;
  opacity: 0.65;
  font-size: 0.6875rem;
  font-weight: 400;
}

/* Compact list of formats a product ships with, shown before purchase */
.format-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.format-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-sm);
  background: var(--cm-surface);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cm-ink);
}
.format-tag span { font-weight: 400; font-size: 0.6875rem; color: var(--cm-muted); }

/* Demo-mode banner — must never be mistaken for live, but it sits above real
   pricing so it earns its distinction with a tag, not with noise. */
.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.5rem;
  border: 1px dashed rgba(180, 83, 9, 0.45);
  border-radius: var(--radius-md);
  background: var(--cm-warning-soft);
  color: #92400e;
  font-size: 0.875rem;
  line-height: 1.55;
}
.demo-banner__tag {
  flex: none;
  margin-top: 0.0625rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: #b45309;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.demo-banner__text strong { font-weight: 600; }
.demo-banner svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 1px; }
.demo-banner strong { font-weight: 600; }

/* Notices above the fold stack with one rhythm instead of ad-hoc margins */
.notice-stack { display: flex; flex-direction: column; gap: 0.875rem; }
.notice-stack:not(:empty) { margin-bottom: 2rem; }
.notice-stack > * { margin-bottom: 0; }

.badge--demo {
  background: #fef3c7;
  color: #92400e;
  border: 1px dashed #b45309;
}

/* --------------------------------------------------------------------------
   23b. Membership & account
   -------------------------------------------------------------------------- */

/* Remaining-quota chip in the header */
.quota-chip {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid rgba(200, 168, 107, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(200, 168, 107, 0.12);
  color: var(--cm-gold);
  font-size: 0.75rem;
  white-space: nowrap;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.quota-chip:hover { background: rgba(200, 168, 107, 0.2); border-color: var(--cm-gold); }
.quota-chip svg { width: 0.875rem; height: 0.875rem; }
.quota-chip b { font-weight: 600; }
.quota-chip span { color: rgba(255, 255, 255, 0.55); }

/* Pricing page hero — assurances answer the objections before the price lands */
.page-head--pricing { padding-block: 3rem 1.75rem; }
.assurance-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}
.assurance-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  color: var(--cm-muted);
}
.assurance-row svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--cm-gold); }

/* Active-membership panel — the quota is the thing a member came to check,
   so it reads as a dashboard row rather than a one-line alert. */
.member-status {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(5, 150, 105, 0.22);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--cm-success-soft), var(--cm-surface) 70%);
  box-shadow: var(--shadow-card);
}
.member-status__plan {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 0.375rem;
}
.member-status__meters { display: grid; gap: 1.25rem; }
.member-status__cta { align-self: start; justify-self: start; white-space: nowrap; }

.meter__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.meter__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cm-muted);
}
.meter__value { font-size: 0.8125rem; color: var(--cm-muted); }
.meter__value b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--cm-ink);
}
.meter__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(17, 17, 17, 0.08);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cm-success);
  transition: width var(--t-slower) var(--ease-out);
}
.meter--low .meter__fill { background: var(--cm-warning); }
.meter--low .meter__value b { color: var(--cm-warning); }
.meter__note { margin-top: 0.4375rem; font-size: 0.6875rem; color: var(--cm-muted); }

/* Pricing cards */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out),
              border-color var(--t-base);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

.plan-card--popular {
  border-color: var(--cm-gold);
  box-shadow: 0 28px 60px -30px rgba(200, 168, 107, 0.55);
}
/* A hairline of gold across the top so the popular card reads at a glance,
   without resorting to a colour-filled card that fights the price. */
.plan-card--popular::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, transparent, var(--cm-gold), transparent);
}
.plan-card--current { border-color: rgba(5, 150, 105, 0.45); }
.plan-card--current::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, transparent, var(--cm-success), transparent);
}

.plan-card__flag {
  position: absolute;
  top: -0.6875rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--cm-gold);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  box-shadow: var(--shadow-gold-sm);
}
.plan-card__flag--current { background: var(--cm-success); box-shadow: 0 8px 20px -6px rgba(5, 150, 105, 0.5); }

.plan-card__head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--cm-border); }

.plan-card__price { padding-block: 1.25rem 1.5rem; }
.plan-card__amount { display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; }
.plan-card__period { font-size: 0.875rem; color: var(--cm-muted); }
.plan-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-height: 1.25rem;
}

/* Quota block — the per-file rate is the real argument for a plan, so it
   sits beside the count rather than under it as a footnote. */
.plan-card__quota {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--cm-sand);
}
.plan-card__quota-main { display: flex; align-items: center; gap: 0.625rem; }
.plan-card__quota b {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--cm-ink);
}
.plan-card__quota span {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plan-card__quota-rate {
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid rgba(200, 168, 107, 0.4);
  text-align: right;
}
.plan-card__quota-rate em {
  display: block;
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cm-gold);
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
  flex: 1;
}
.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cm-muted);
}
.plan-card__features svg { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 3px; color: var(--cm-gold); }

.plan-card__buy { margin-top: auto; }
.plan-card__fineprint {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--cm-muted);
}

/* Numbered "how it works" flow — a connecting rule replaces four boxes */
.step-flow {
  display: grid;
  gap: 2rem 1.5rem;
  margin-top: 2.5rem;
}
.step-flow__item { position: relative; padding-top: 0.5rem; }
.step-flow__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(200, 168, 107, 0.45);
  border-radius: 50%;
  background: var(--cm-surface);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--cm-gold);
}
.step-flow__item h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.0625rem; }
.step-flow__item p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--cm-muted); }

/* PayPal buttons — the SDK renders inside this, so it only needs spacing */
.paypal-buttons { min-height: 3rem; }
.paypal-buttons:empty::after {
  content: 'Loading PayPal…';
  display: block;
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--cm-muted);
}

/* "or" rule between two payment options */
.pay-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.25rem 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cm-muted);
}
.pay-divider::before,
.pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cm-border);
}

/* Account area */
.account-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.375rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-pill);
  background: var(--cm-surface);
  box-shadow: var(--shadow-card);
}
.account-nav a {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--cm-muted);
  transition: background-color var(--t-base), color var(--t-base);
}
.account-nav a:hover { color: var(--cm-ink); background: var(--cm-bg); }
.account-nav a.is-active { background: var(--cm-ink); color: #fff; }
.account-nav__out {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--cm-muted);
  transition: color var(--t-base);
}
.account-nav__out:hover { color: var(--cm-danger); }

.account-grid { display: grid; gap: 1.5rem; align-items: start; }

.membership-card { border-color: var(--cm-border); }
.membership-card.is-active { border-color: rgba(200, 168, 107, 0.5); }

/* Quota meter */
.quota { margin-top: 1.5rem; }
.quota__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  overflow: hidden;
}
.quota__bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--cm-gold), var(--cm-gold-soft));
  transition: width var(--t-slow) var(--ease-out);
}
.quota__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--cm-muted);
}

/* Stat pills on the account overview */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.stat-pill {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-lg);
}
.stat-pill b {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.5px;
}
.stat-pill span { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cm-muted); }

/* Membership nudge on the product page */
.pdp__member-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid rgba(200, 168, 107, 0.35);
  border-radius: var(--radius-md);
  background: var(--cm-sand);
  font-size: 0.8125rem;
  color: var(--cm-muted);
  transition: border-color var(--t-base), background-color var(--t-base);
}
.pdp__member-hint:hover { border-color: var(--cm-gold); background: rgba(200, 168, 107, 0.12); }
.pdp__member-hint > svg:first-child { width: 1.25rem; height: 1.25rem; flex: none; color: var(--cm-gold); }
.pdp__member-hint strong { display: block; color: var(--cm-ink); font-weight: 500; }
.pdp__member-hint__go { width: 1rem; height: 1rem; flex: none; margin-left: auto; color: var(--cm-gold); }

/* --------------------------------------------------------------------------
   24. Contact page
   -------------------------------------------------------------------------- */
/* auto-fit rather than a fixed column count: the number of cards depends on
   which CONTACT_* values are configured, so the grid has to cope with 2–4. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1.75rem;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--cm-sand);
  color: var(--cm-gold);
}
.contact-card__icon svg { width: 1.25rem; height: 1.25rem; }

.contact-card__label {
  margin-top: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm-muted);
}
/* Email addresses and postal lines are long unbreakable strings on a narrow
   card — let them wrap anywhere rather than widen the grid track. */
.contact-card__value {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--cm-ink);
  overflow-wrap: anywhere;
}
.contact-card__value a { color: inherit; }
.contact-card__value a:hover { color: var(--cm-gold); }
.contact-card__note { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--cm-muted); }
.contact-card .link-arrow { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.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;
}
.hide { display: none !important; }
.relative { position: relative; }

/* --------------------------------------------------------------------------
   26. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .quota-chip { display: inline-flex; }
}

@media (min-width: 640px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-block: 5rem 7rem; }
  .section { padding-block: var(--section-y-lg); }
  .site-footer { padding-block: 5rem; }
  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-status__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .step-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Four columns need real width — "Download size" and "Delivery" collide
     below this. */
  .pdp__meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .render-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (min-width: 1024px) {
  :root { --gutter: var(--gutter-lg); }
  .nav { display: flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
  .header-search { display: flex; }
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 2fr repeat(4, 1fr); }
  .checkout-layout { grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr); gap: 2rem; }
  .account-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .member-status {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
  }
  .member-status__cta { align-self: center; }
  /* The rule threads behind the numerals to read as one sequence */
  .step-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .step-flow__item::after {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: 3rem;
    right: -2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(200, 168, 107, 0.5), rgba(200, 168, 107, 0.05));
  }
  .step-flow__item:last-child::after { display: none; }
  .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; }
  .hero__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .hero__grid > .feature-card--lg { grid-column: span 7; }
  .hero__grid > .hero__side { grid-column: span 3; display: flex; flex-direction: column; gap: 1.25rem; }
  .hero__side .feature-card { flex: 1; }
  .split-dark { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; }
  .spec-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; }
}

@media (max-width: 640px) {
  /* The logo is 4.4× wider than it is tall, so it has to come down on phones
     or it pushes the cart and burger off the row. */
  .brand--md img { height: 34px; }
  .brand--lg img { height: 44px; }
  .product-card__actions { grid-template-columns: 1fr; }
  .dialog__actions { grid-template-columns: 1fr; }
  .line-item { grid-template-columns: 4.5rem 1fr; gap: 0.875rem; }
  .line-item__media { width: 4.5rem; height: 3.75rem; }
  .section-head { margin-bottom: 2.5rem; }
  .toolbar { padding: 1rem; }
  .toolbar .select { width: 100%; min-width: 0; }

  /* Card headers pair a title with a status badge. Side by side that forces a
     phone to scroll sideways, so the badge drops onto its own line. */
  .card__head { flex-wrap: wrap; gap: 0.75rem; padding: 1.125rem 1.125rem; }
  .card__body, .card__foot { padding-inline: 1.125rem; }

  /* Download rows already wrap; giving the buttons the full width stops them
     being squeezed into a sliver beside the title. */
  .download-item .format-row { width: 100%; }
  .format-btn { flex: 1 1 auto; justify-content: center; }

  /* Large buttons keep their height but lose the wide inline padding, which is
     what pushes a long label past the screen edge. */
  .btn--lg { --btn-px: 1.25rem; font-size: 0.875rem; }
  .btn { max-width: 100%; }

  /* A long design code in the last crumb must wrap, not extend the page. */
  .breadcrumb { row-gap: 0.25rem; }
  .breadcrumb span { overflow-wrap: anywhere; }

  .hero__facts { gap: 0 1.5rem; margin-top: 2.25rem; padding-top: 1.5rem; }
  .hero__fact { min-width: 5.5rem; }
  /* The rule-and-eyebrow flourish is 5rem of pure decoration on each side. */
  .hero__eyebrow { letter-spacing: 0.2em; }
  .hero__eyebrow::before, .hero__eyebrow::after { width: 1.25rem; }

  .pdp__stage img { padding: 0.75rem; }
  .pdp__gallery-badge { top: 0.75rem; left: 0.75rem; }
  .pdp__meta-grid { gap: 1rem; }

  .success-hero { padding-block: 2rem 1.5rem; }
  /* Order references and emails are unbreakable strings. */
  .success-hero strong, .alert strong { overflow-wrap: anywhere; }
}

/* Nothing on any page may extend the viewport: a horizontal scrollbar makes an
   otherwise finished layout feel broken. This is the backstop — the rules above
   fix the causes.

   `clip` rather than `hidden` on purpose. `overflow-x: hidden` turns the root
   into a scroll container, which silently kills `position: sticky` on the
   header; `clip` trims the overflow without doing that. */
html, body { max-width: 100%; overflow-x: clip; }

/* PayPal buttons inside a plan card sit where the buy button would be */
.plan-card__paypal { margin-top: auto; min-height: 2.75rem; }