/* MoodTag info pages, concept B look. Built by scripts/pages/build.py from concepts/base.css + concepts/b/b.css + concepts/pages.css + concepts/dna.css; edit those. */
/* Shared mechanics only (no look): menu, 3D stage overlay, switch hooks, reveals. Each concept sets the look. */
:where(.mtd) *, :where(.mtd) *::before, :where(.mtd) *::after { box-sizing: border-box; }
:where(.mtd) img { max-width: 100%; height: auto; display: block; }
:where(.mtd) a { color: inherit; }
:where(.mtd) :where(p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(.mtd) :where(ul, ol) { padding: 0; list-style: none; }
.mtd { margin: 0; -webkit-font-smoothing: antialiased; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: #000; color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--maxw, 1240px), 100% - 48px); margin-inline: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* 3D stage mechanics (moodtag-hero3d.js expects these) */
.stage { position: relative; }
.mtd-stage { position: relative; aspect-ratio: 10 / 12.5; }
.mtd-stage__poster, .mtd-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mtd-stage__poster { object-fit: contain; }
.mtd-stage__canvas { opacity: 0; transition: opacity .4s ease; touch-action: pan-y; }
.is-3d .mtd-stage__canvas { opacity: 1; }
.is-3d .mtd-stage__poster { opacity: 0; }
.mtd-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: var(--lead, currentColor); stroke: var(--lead, currentColor); stroke-width: 1; }
.mtd-leads path { fill: none; }
.mtd-leads3d { position: absolute; inset: var(--stage-top, 0) 0 0; pointer-events: none; }
.mtd-lead3d { position: absolute; top: var(--y); max-width: 150px; display: flex; gap: 8px; align-items: baseline; }
.mtd-lead3d--l { left: var(--x); }
.mtd-lead3d--r { right: var(--x); flex-direction: row-reverse; text-align: right; }
@media (max-width: 640px) {
  /* Phones keep the pointer lines: narrower labels at the stage edges, placed where the model is slim
     (D-ring, top of the big ring, the coil, the bottom of the tag) so they never sit on top of it. */
  .mtd-stage { aspect-ratio: 10 / 14; } /* taller canvas = room for the labels; the model keeps its width (see hero3d.js resize) */
  .mtd-lead3d { max-width: 38%; gap: 6px; }
  .mtd-lead3d:nth-child(1) { top: 13%; }
  .mtd-lead3d:nth-child(2) { top: 15%; max-width: 44%; }
  .mtd-lead3d:nth-child(3) { top: 42%; }
  .mtd-lead3d:nth-child(4) { top: 78%; max-width: 44%; }
  .stage__hint { display: none; }
}
@media (max-width: 359px) {
  .mtd-stage { aspect-ratio: 10 / 15; } /* the smallest phones: more room below the tag */
  .mtd-lead3d { font-size: 11.5px; }
  .mtd-lead3d:nth-child(2) { top: 12%; max-width: 48%; }
  .mtd-lead3d:nth-child(4) { top: 72%; }
}

/* details marker reset */
.qa summary { list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }

/* reveals + force bars + reduced motion */
.mtd-js .mtd-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.mtd-js .mtd-reveal.is-in { opacity: 1; transform: none; }
.force__bar { display: block; height: 100%; width: calc(var(--v) * 100%); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.mtd-js [data-mtd-force]:not(.is-in) .force__bar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .mtd *, .mtd *::before, .mtd *::after { animation: none !important; transition: none !important; }
  .mtd-js .mtd-reveal { opacity: 1; transform: none; }
  .mtd-js [data-mtd-force]:not(.is-in) .force__bar { transform: none; }
  html { scroll-behavior: auto; }
}

/* MoodTag site chrome: header, nav, cart and footer. One source for every page: loaded on its own on WooCommerce pages
   (assets/moodtag-chrome.<ver>.css) and concatenated into the home and info page CSS. Scope: body.mtd-chrome. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-upright.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-400-800.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

.mtd-chrome .mtd-header, .mtd-chrome .foot {
  --sand: #f4f1ea; --sand-2: #e8e3d8; --cream: #fbf9f4; --ink: #1a202c; --ink-2: #2d3748; --muted: #5f6a64;
  --terra: #2fa66a; --terra-ink: #1f7a4c; --olive: #13612e; --olive-soft: #dff3e7; --maxw: 1200px;
  --serif: "Fraunces", Georgia, serif; --sans: "Jakarta", system-ui, sans-serif;
  font: 500 16px/1.5 var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: 0; text-transform: none;
}
.mtd-chrome :where(.mtd-header, .foot) *, .mtd-chrome :where(.mtd-header, .foot) *::before, .mtd-chrome :where(.mtd-header, .foot) *::after { box-sizing: border-box; }
.mtd-chrome :where(.mtd-header, .foot) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.mtd-chrome :where(.mtd-header, .foot) :where(p, figure, h2, h3) { margin: 0; }
.mtd-chrome :where(.mtd-header, .foot) img { max-width: 100%; height: auto; display: block; }
.mtd-chrome :where(.mtd-header, .foot) a { color: inherit; }
.mtd-chrome :where(.mtd-header, .foot) :focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 999px; }
.mtd-chrome .mtd-header .wrap, .mtd-chrome .foot .wrap { width: min(var(--maxw), 100% - 48px); margin-inline: auto; }
.mtd-chrome .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.mtd-chrome .mtd-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 236, 220, .92); backdrop-filter: blur(10px); }
.mtd-chrome .mtd-header__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.mtd-chrome .mtd-logo { display: block; flex: none; border-radius: 8px; }
.mtd-chrome .mtd-logo img { width: 124px; }
.mtd-chrome .mtd-nav { margin-left: auto; }
/* The link bar is one rounded pill, so the pill-shaped hover and active states sit inside a matching shape. */
.mtd-chrome .mtd-nav__list { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--cream); }
.mtd-chrome .mtd-nav__list > li > a, .mtd-chrome .mtd-nav__sub > button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 700 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.mtd-chrome .mtd-nav__list > li > a:hover, .mtd-chrome .mtd-nav__sub > button:hover, .mtd-chrome .mtd-nav__sub > button[aria-expanded="true"] { background: var(--sand-2); color: var(--ink); }
.mtd-chrome .mtd-nav__list > li > a[aria-current="page"], .mtd-chrome .mtd-nav__sub > button.is-active { background: var(--olive-soft); color: var(--olive); }
.mtd-chrome .mtd-nav__sub { position: relative; }
.mtd-chrome .mtd-nav__sub > button::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .7; }
.mtd-chrome .mtd-nav__sub > ul { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; padding: 8px; background: var(--cream); border-radius: 20px; box-shadow: 0 24px 48px -24px rgba(26, 32, 44, .4), 0 0 0 1px rgba(26, 32, 44, .06); }
.mtd-chrome .mtd-nav__sub > button[aria-expanded="true"] + ul { display: block; }
.mtd-chrome .mtd-nav__sub > ul a { display: block; padding: 10px 14px; border-radius: 12px; font: 600 15px/1.3 var(--sans); color: var(--ink-2); text-decoration: none; }
.mtd-chrome .mtd-nav__sub > ul a:hover { background: var(--sand); color: var(--ink); }
.mtd-chrome .mtd-nav__sub > ul a[aria-current="page"] { background: var(--olive-soft); color: var(--olive); }
.mtd-chrome .mtd-cart { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 14px/1 var(--sans); text-decoration: none; transition: background-color .15s ease; }
.mtd-chrome .mtd-cart:hover { background: var(--olive); color: #fff; }
.mtd-chrome .mtd-cart__count { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--terra); color: #fff; font: 800 13px/1 var(--sans); }
.mtd-chrome .mtd-menu-btn { display: none; }
@media (max-width: 960px) {
  .mtd-chrome .mtd-header__in { gap: 12px; }
  .mtd-chrome .mtd-menu-btn { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(26, 32, 44, .25); border-radius: 999px; background: var(--cream); color: var(--ink); cursor: pointer; }
  .mtd-chrome .mtd-menu-btn__bars, .mtd-chrome .mtd-menu-btn__bars::before, .mtd-chrome .mtd-menu-btn__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .2s ease, background-color .2s ease; }
  .mtd-chrome .mtd-menu-btn__bars::before, .mtd-chrome .mtd-menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .mtd-chrome .mtd-menu-btn__bars::before { top: -6px; }
  .mtd-chrome .mtd-menu-btn__bars::after { top: 6px; }
  .mtd-chrome .mtd-menu-btn[aria-expanded="true"] .mtd-menu-btn__bars { background: transparent; }
  .mtd-chrome .mtd-menu-btn[aria-expanded="true"] .mtd-menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
  .mtd-chrome .mtd-menu-btn[aria-expanded="true"] .mtd-menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .mtd-chrome .mtd-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px 16px 20px; max-height: calc(100vh - 72px); overflow-y: auto; background: var(--sand); box-shadow: 0 30px 40px -30px rgba(26, 32, 44, .4); }
  .mtd-chrome .mtd-nav.is-open { display: block; }
  .mtd-chrome .mtd-nav__list { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; border-radius: 20px; background: var(--cream); }
  .mtd-chrome .mtd-nav__list > li > a, .mtd-chrome .mtd-nav__sub > button { width: 100%; justify-content: space-between; padding: 14px 14px; border-radius: 14px; font-size: 16px; }
  .mtd-chrome .mtd-nav__sub > ul { position: static; min-width: 0; margin: 2px 0 6px; padding: 6px; background: var(--sand); border-radius: 14px; box-shadow: none; }
  .mtd-chrome .mtd-nav__sub > ul a { padding: 11px 14px; }
  .mtd-chrome .mtd-nav__sub > ul a:hover { background: var(--cream); }
  .mtd-chrome .mtd-cart__label { display: none; }
  .mtd-chrome .mtd-cart { padding: 0 6px; }
}

/* footer */
.mtd-chrome .foot { background: var(--ink); color: #c6c0b8; padding: 60px 0 28px; }
.mtd-chrome .foot__in { display: grid; grid-template-columns: .8fr 2fr; gap: 48px; }
.mtd-chrome .foot__brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.mtd-chrome .foot__brand img { width: 124px; filter: brightness(0) invert(1); opacity: .9; }
.mtd-chrome .foot__email { font-size: 15px; }
.mtd-chrome .foot__email a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mtd-chrome .foot__email a:hover { color: #9fe3bf; }
.mtd-chrome .foot__social { display: flex; gap: 8px; }
.mtd-chrome .foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; }
.mtd-chrome .foot__social a:hover { background: var(--terra); }
.mtd-chrome .foot__social svg { width: 18px; height: 18px; }
.mtd-chrome .foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mtd-chrome .foot__h { font: 800 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.mtd-chrome .foot__cols li + li { margin-top: 10px; }
.mtd-chrome .foot__cols a { text-decoration: none; font-size: 15px; }
.mtd-chrome .foot__cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mtd-chrome .foot :focus-visible { outline-color: var(--cream); }
.mtd-chrome .foot__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
@media (max-width: 960px) {
  .mtd-chrome .foot__in { grid-template-columns: 1fr; gap: 36px; }
  .mtd-chrome .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* Concept B: Coming home. Warm, photo-led, soft and rounded. Sand, cream, MoodTag green. */


/* Fraunces is a variable font: one file covers every weight (Google served the same file for 600 and 800). */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-upright.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-400-800.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

.cb {
  --sand: #f4f1ea; --sand-2: #e8e3d8; --cream: #fbf9f4; --ink: #1a202c; --ink-2: #2d3748; --muted: #5f6a64;
  --terra: #2fa66a; --terra-ink: #1f7a4c; --olive: #13612e; --olive-soft: #dff3e7; --honey: #f5a524; --rust: #b42318; --blue: #1159af;
  --lead: #2b2420; --maxw: 1200px; --r: 28px;
  /* Gradient tokens (Wilson chose option B, 25 Oct 2026): a diagonal sweep from MoodTag green into forest on dark bands
     and highlighted cards, and a faint cream-to-sand wash on alternate sections. The green darkens quickly after the
     bright corner so cream and white text stay readable (checked: ≥4.5:1 where body text sits). No images, CSS only. */
  --grad-band: linear-gradient(135deg, #2fa66a 0%, #1f7a4c 22%, #13612e 60%, #0b1f14 100%);
  --grad-card: linear-gradient(135deg, #2fa66a 0%, #1f7a4c 18%, #13612e 70%);
  --grad-surface: linear-gradient(180deg, #fbf9f4 0%, #f4f1ea 100%);
  --serif: "Fraunces", Georgia, serif; --sans: "Jakarta", system-ui, sans-serif;
  background: var(--sand); color: var(--ink); font: 500 17px/1.65 var(--sans);
}
.cb :focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 8px; }
.cb .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font: 700 13px/1 var(--sans); letter-spacing: .04em; }
.cb .h2 { font: 800 clamp(32px, 4.2vw, 54px)/1.05 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.cb .h2 em, .cb .hero__h1 em, .cb .close__h em { font-style: italic; font-weight: 600; color: var(--terra); }
/* The italic accent on a dark or gradient band is pale mint, never MoodTag green on green (SAGE, 26 Oct 2026): #9fe3bf is 11:1 on forest, 3.6:1 on the brightest corner. */
.cb :is(.close, .sec--cta, .card--feature, .chain--moodtag, .depth, .cost__col--moodtag) :is(.h2, .h3, .hero__h1, .close__h, h2, h3) em { color: #9fe3bf; }
.cb .h3 { font: 800 clamp(22px, 2vw, 26px)/1.15 var(--serif); letter-spacing: -.01em; }
.cb .lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); max-width: 620px; }
.cb .head { display: grid; gap: 18px; justify-items: start; max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.cb .head--centre { justify-items: center; text-align: center; margin-inline: auto; }
.cb .head--centre .lede { margin-inline: auto; }
.cb .sec { padding: clamp(72px, 9vw, 120px) 0; }
.cb .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; border-radius: 999px; background: var(--terra-ink); color: #fff; text-decoration: none; font: 700 16px/1 var(--sans); box-shadow: 0 12px 28px -14px rgba(47, 166, 106, .7); transition: transform .2s ease, background-color .2s ease; }
.cb .btn::after { content: "→"; }
.cb .btn:hover { background: var(--olive); transform: translateY(-2px); }
.cb .btn--big { min-height: 64px; padding: 0 36px; font-size: 17px; }
.cb .stars { color: var(--honey); letter-spacing: 2px; font-size: 14px; }
.cb .step { font: 800 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
.cb .p { color: var(--ink-2); font-size: 15px; }

/* hero */
.cb .hero { padding: clamp(28px, 4vw, 56px) 0 0; }
.cb .hero__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cb .hero__photo { position: relative; border-radius: 48% 48% 40% 40% / 38% 38% 30% 30%; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(43, 36, 32, .5); }
.cb .hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.cb .hero__photo figcaption { position: absolute; left: 50%; transform: translateX(-50%); bottom: 28px; white-space: nowrap; padding: 10px 16px; border-radius: 999px; background: var(--cream); font: 700 13px/1.3 var(--sans); color: var(--ink); }
.cb .hero__photo figcaption span { color: var(--muted); font-weight: 600; }
.cb .hero__copy { display: grid; gap: 22px; justify-items: start; }
.cb .hero__copy .eyebrow { background: var(--cream); color: var(--ink-2); }
.cb .hero__h1 { font: 800 clamp(40px, 5.2vw, 72px)/1.02 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.cb .hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 560px; }
.cb .hero__cta { display: grid; gap: 12px; justify-items: start; }
.cb .hero__price { font-size: 14px; font-weight: 600; color: var(--muted); }
.cb .hero__risk { font-size: 14px; color: var(--muted); max-width: 520px; }
.cb .ticks { display: grid; gap: 8px; }
.cb .ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.cb .ticks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 13px; font-weight: 800; }
.cb .guarline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 6vw, 72px); }
.cb .guarline li { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 20px; background: var(--cream); font-size: 15px; font-weight: 700; }
.cb .guarline b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--olive); color: #fff; font-size: 15px; }

/* close (early, as the story) */
.cb .close { background: var(--grad-band); color: var(--cream); }
.cb .close .eyebrow { background: rgba(255, 255, 255, .14); color: var(--cream); }
.cb .close__in { display: grid; gap: 22px; max-width: 900px; justify-items: start; }
.cb .close__h { font: 800 clamp(40px, 5.6vw, 80px)/1 var(--serif); letter-spacing: -.025em; }
.cb .close__h em { color: #9fe3bf; }
.cb .close__lede { font: 600 clamp(20px, 2vw, 26px)/1.3 var(--serif); }
.cb .close__p { color: #cfe8d9; max-width: 640px; }
.cb .close .btn { background: var(--cream); color: var(--ink); box-shadow: none; }
.cb .close .btn:hover { background: #fff; }
.cb .close__small { font-size: 14px; color: #c6e6d4; }
.cb .close__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; font-weight: 700; color: #dff0e6; }
.cb .close__trust b { margin-right: 6px; color: #9fe3bf; }

/* how */
.cb .how { background: var(--grad-surface); }
.cb .how__stage { max-width: 620px; margin: 0 auto 40px; }
.cb .stage { background: var(--sand); border-radius: var(--r); padding: 18px 18px 14px; --stage-top: 18px; }
.cb .mtd-lead3d { font: 700 13px/1.3 var(--sans); color: var(--ink); }
.cb .mtd-lead3d span { font-weight: 800; color: var(--terra-ink); }
.cb .stage__cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(43, 36, 32, .2); font-size: 13px; font-weight: 600; color: var(--muted); }
.cb .stage__hint { color: var(--terra-ink); }
.cb .chains { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb .chain { padding: 28px; border-radius: var(--r); background: var(--sand); }
.cb .chain--moodtag { background: var(--grad-card); color: var(--cream); }
.cb .chain h3 { font: 800 23px/1.15 var(--serif); margin-bottom: 18px; }
.cb .chain li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(43, 36, 32, .12); font-weight: 600; }
.cb .chain--moodtag li { border-color: rgba(255, 255, 255, .18); }
.cb .chain .n { font-size: 12px; font-weight: 800; color: var(--muted); line-height: 2; }
.cb .chain--moodtag .n { color: var(--cream); }
.cb .chain .t em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--rust); }
.cb .chain--moodtag .t em { color: #dff3e7; }
.cb .force { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 48px; align-items: end; margin-top: 18px; padding: 28px; border-radius: var(--r); background: var(--sand); }
.cb .force__row + .force__row { margin-top: 18px; }
.cb .force__name { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cb .force__name strong { font: 800 42px/1 var(--serif); }
.cb .force__name span { font-size: 14px; color: var(--muted); font-weight: 600; }
.cb .force__row[data-v="100"] strong { color: var(--terra); }
.cb .force__track { height: 14px; border-radius: 999px; background: var(--sand-2); overflow: hidden; }
.cb .force__bar { background: var(--olive); border-radius: 999px; }
.cb .force__row[data-v="100"] .force__bar { background: var(--terra); }
.cb .force__note { font-size: 14px; color: var(--muted); }

/* proof */
.cb .score { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.cb .score__n { font: 800 56px/1 var(--serif); }
.cb .score__s { display: grid; gap: 2px; max-width: 220px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; }
.cb .story { display: grid; grid-template-columns: 5fr 7fr; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.cb .story__photo { position: relative; }
.cb .story__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.cb .story__photo figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; }
.cb .story__body { display: grid; align-content: center; gap: 22px; padding: clamp(28px, 5vw, 64px); }
.cb .story__body blockquote { font: 600 clamp(22px, 2.4vw, 32px)/1.25 var(--serif); }
.cb .story__who { font-size: 14px; color: var(--muted); }
.cb .story__who strong { display: block; color: var(--ink); font-size: 16px; }
.cb .proof__more { margin: 40px 0 14px; text-align: center; font: 800 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cb .wall { columns: 4 230px; column-gap: 16px; }
.cb .quote { break-inside: avoid; display: grid; gap: 12px; margin-bottom: 16px; padding: 22px 22px 20px; background: var(--cream); border-radius: 22px 22px 22px 6px; }
.cb .quote blockquote { font-size: 15px; color: var(--ink-2); }
.cb .quote p { font-size: 13px; color: var(--muted); font-weight: 600; }
.cb .quote p strong { display: block; color: var(--ink); font-size: 14px; }
.cb .banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 28px 32px; border-radius: var(--r); background: var(--terra); color: #fff; }
.cb .banner__h { font: 800 clamp(20px, 2.1vw, 26px)/1.15 var(--serif); }
.cb .banner__p { color: #dff3e7; margin-top: 6px; }
.cb .banner .btn { background: #fff; color: var(--olive); box-shadow: none; flex: none; }

/* choose */
.cb .choose { background: var(--grad-surface); }
.cb .choose__grid { display: grid; gap: 36px; }
.cb .choose__step { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 860px; margin-inline: auto; }
.cb .setups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 6px; }
.cb .setup { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 22px 22px 22px 56px; text-align: left; background: var(--sand); border: 2px solid transparent; border-radius: 24px; font: inherit; color: inherit; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.cb .setup::before { content: ""; position: absolute; left: 20px; top: 26px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); background: #fff; }
.cb .setup[aria-pressed="true"] { border-color: var(--terra); background: #fff; }
.cb .setup[aria-pressed="true"]::before { border: 7px solid var(--terra); }
.cb .setup__flag { grid-column: 1 / -1; justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--olive); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cb .setup__name { font: 800 28px/1 var(--serif); }
.cb .setup__price { align-self: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.cb .setup__gauge { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--sand-2); overflow: hidden; margin: 4px 0; }
.cb .setup__gauge i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 999px; background: var(--olive); }
.cb .setup[aria-pressed="true"] .setup__gauge i { background: var(--terra); }
.cb .setup__spec { grid-column: 1 / -1; font-size: 14px; font-weight: 800; }
.cb .setup__desc { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.cb .choose__now { font-size: 14px; font-weight: 600; color: var(--muted); }
.cb .choose__now strong { color: var(--terra-ink); }
.cb .choose__shapes-head { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 24px; }
.cb .shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cb .shape a { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 6px; height: 100%; padding: 14px 14px 20px; text-decoration: none; background: var(--sand); border-radius: 26px; transition: transform .25s ease, background-color .25s ease; }
.cb .shape a:hover { background: #fff; transform: translateY(-4px); }
.cb .shape__img { aspect-ratio: 1; overflow: hidden; border-radius: 50%; margin-bottom: 8px; background: var(--sand-2); }
.cb .shape__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.cb .shape__idx { display: none; }
.cb .shape__tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cb .shape__tag--best { color: var(--terra-ink); }
.cb .shape__name { font: 800 20px/1.15 var(--serif); }
.cb .shape__desc { font-size: 13px; color: var(--muted); }
.cb .shape__cta { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 4px; }

/* cost */
.cb .cost__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb .cost__col { display: grid; gap: 16px; align-content: start; padding: 30px; border-radius: var(--r); background: var(--cream); }
.cb .cost__col--moodtag { background: var(--ink); color: var(--cream); }
.cb .cost__title { font: 800 22px/1.1 var(--serif); }
.cb .cost__rows li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(43, 36, 32, .12); font-size: 15px; font-weight: 600; }
.cb .cost__col--moodtag .cost__rows li { border-color: rgba(255, 255, 255, .14); }
.cb .cost__rows b { font-weight: 800; white-space: nowrap; }
.cb .cost__col--ordinary .cost__rows b { color: var(--rust); }
.cb .cost__col--moodtag .cost__rows b { color: #61cd92; }
.cb .cost__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 2px solid currentColor; }
.cb .cost__total span { font-size: 14px; font-weight: 700; color: var(--muted); }
.cb .cost__col--moodtag .cost__total span { color: #c6c0b8; }
.cb .cost__total strong { font: 800 44px/1 var(--serif); }
.cb .cost__col--ordinary .cost__total strong { color: var(--rust); }
.cb .cost__col--moodtag .cost__total strong { color: #61cd92; }
.cb .cost__p { font-size: 15px; color: var(--muted); }
.cb .cost__col--moodtag .cost__p { color: #c6c0b8; }
.cb .verdict { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 28px; padding: 28px 32px; border-radius: var(--r); background: var(--cream); }
.cb .verdict p { font: 800 clamp(20px, 2.1vw, 26px)/1.2 var(--serif); max-width: 760px; }

/* plus */
.cb .plus { background: var(--grad-surface); }
.cb .plus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.cb .plus__head { margin-bottom: 0; }
.cb .plus__small { font-size: 14px; color: var(--muted); padding: 14px 18px; border-radius: 16px; background: var(--sand); }
.cb .plus__card { border-radius: var(--r); background: var(--sand); overflow: hidden; }
.cb .plus__top { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 24px 26px; background: var(--olive-soft); align-items: center; }
.cb .plus__name { font: 800 25px/1.1 var(--serif); }
.cb .plus__price { font-size: 14px; font-weight: 700; color: var(--olive); }
.cb .plus__value { grid-row: 1 / 3; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 800; }
.cb .plus__list li { padding: 18px 26px; border-top: 1px solid rgba(43, 36, 32, .1); }
.cb .plus__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cb .plus__row strong { font-size: 16px; font-weight: 800; }
.cb .plus__row em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--terra-ink); white-space: nowrap; }
.cb .plus__note { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* guarantees */
.cb .guar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cb .guar__card { display: grid; gap: 12px; align-content: start; justify-items: center; text-align: center; padding: 34px 26px; border-radius: var(--r); background: var(--cream); }
.cb .guar__card:first-child { background: var(--grad-card); color: #fff; }
.cb .guar__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 24px; font-weight: 800; }
.cb .guar__card:first-child .guar__ico { background: rgba(255, 255, 255, .2); color: #fff; }
.cb .guar__card h3 { font: 800 22px/1.15 var(--serif); }
.cb .guar__card p { font-size: 15px; color: var(--ink-2); }
.cb .guar__card:first-child p { color: #dff3e7; }
.cb .guar__note a:hover { color: var(--olive); }
.cb .guar__note { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); max-width: 720px; margin-inline: auto; }

/* faq */
.cb .faq { background: var(--grad-surface); }
.cb .faq__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.cb .faq__head { position: sticky; top: 100px; margin-bottom: 0; }
.cb .faq__list { display: grid; gap: 10px; }
.cb .qa { background: var(--sand); border-radius: 18px; }
.cb .qa summary { display: grid; grid-template-columns: 1fr 30px; gap: 12px; align-items: center; padding: 18px 20px; font-size: 16px; font-weight: 800; }
.cb .qa summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #fff; color: var(--terra); font-size: 20px; font-weight: 600; transition: transform .25s ease; }
.cb .qa[open] summary::after { transform: rotate(45deg); }
.cb .qa__n { display: none; }
.cb .qa__a { padding: 0 20px 20px; color: var(--ink-2); font-size: 15px; }

@media (max-width: 960px) {
  .cb .hero__grid, .cb .chains, .cb .force, .cb .story, .cb .cost__grid, .cb .plus__grid, .cb .faq__grid { grid-template-columns: 1fr; }
  .cb .hero__photo { max-width: 520px; aspect-ratio: 1; }
  .cb .faq__head { position: static; }
  .cb .story__photo img { aspect-ratio: 4 / 3; object-position: center 25%; }
  .cb .shapes { grid-template-columns: repeat(2, 1fr); }
  .cb .guar__grid { grid-template-columns: 1fr; }
  .cb .guarline { grid-template-columns: 1fr; }
  .cb .banner, .cb .verdict { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .cb .wrap { width: calc(100% - 32px); }
  .cb .setups { grid-template-columns: 1fr; }
  .cb .hero__cta .btn { width: 100%; }
  .cb .stage { padding: 12px 12px 10px; --stage-top: 12px; }
  .cb .mtd-lead3d { font-size: 12px; line-height: 1.25; }
}
@media (max-width: 640px) {
  .cb .shapes { grid-template-columns: 1fr; gap: 14px; }
  .cb .shape__img { max-width: 260px; margin-inline: auto; }
  .cb .shape a { padding: 18px 18px 22px; text-align: center; }
  .cb .shape__name { font-size: 22px; }
}

/* link to the dog ID tags hub at the end of the chooser (26 Oct): a quiet outline pill, below the shape cards */
.cb .choose__more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.cb .choose__all { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 2px solid var(--terra-ink); border-radius: 999px; color: var(--terra-ink); font: 700 16px/1 var(--sans); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.cb .choose__all::after { content: "→"; }
.cb .choose__all:hover, .cb .choose__all:focus-visible { background: var(--terra-ink); color: #fff; }

/* MoodTag info pages (concept B look). Added on top of base.css + b.css. Prefix-free class names live inside .page. */
.cb .page { --cream: #fbf9f4; }
.cb .page .h2 { font-size: clamp(27px, 3vw, 38px); }
.cb .page .lede { font-size: clamp(16px, 1.3vw, 18px); }
.cb .page .sec { padding: clamp(48px, 6.5vw, 88px) 0; }
.cb .page .sec--alt, .cb .page .sec--faq { background: var(--grad-surface); }
.cb .page .head { margin-bottom: clamp(26px, 3.5vw, 40px); max-width: 760px; }
.cb .page .head .lede { max-width: 700px; }

/* Spacing rules: blocks that follow each other inside a section always get a gap (the section heading carries its own). */
.cb .page .sec > .wrap:not(.panel):not(.cta__in):not(.close__in):not(.split) > * + * { margin-top: 20px; }
.cb .page .sec > .wrap:not(.panel):not(.cta__in):not(.close__in):not(.split) > .head + * { margin-top: 0; }
.cb .page .sec:not(.sec--band) > .wrap:not(.cta__in):not(.close__in) > p:not(.eyebrow):not(.kicker):not(.note):not(.actions) { max-width: 820px; color: var(--ink-2); } /* never the dark bands */
.cb .page .sec > .wrap > p.note, .cb .page .sec > .wrap > .note { max-width: none; } /* a note bar spans what sits above it */
.cb .card--split > .card { background: transparent !important; padding: 0; gap: 10px; }
.cb .card--split > .card strong { display: block; font-size: 15px; }
.cb .card--split > .card p { font-size: 15px; }
.cb .page .sec > .wrap > .cards + .note, .cb .page .sec > .wrap > .cover + .note { margin-top: 16px; }
.cb .page .eyebrow { line-height: 1.3; white-space: normal; text-align: left; }
.cb .page .pills { gap: 8px 8px; }
.cb .page .pills li { line-height: 1.3; }
.cb .sec--alt .pills li, .cb .card .pills li, .cb .author .pills li { background: var(--sand); } /* pills always contrast with their surface */
.cb .page .sec--cta .eyebrow, .cb .card--feature .eyebrow { background: var(--cream); color: var(--olive); } /* light pill on dark surfaces */

/* page hero */
.cb .phero { padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 5vw, 64px); }
.cb .phero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cb .phero__copy { display: grid; gap: 18px; justify-items: start; }
.cb .crumb { font-size: 14px; font-weight: 600; color: var(--muted); }
.cb .crumb a { color: var(--terra-ink); text-decoration: underline; text-underline-offset: 3px; }
.cb .h1 { font: 800 clamp(34px, 4.6vw, 60px)/1.04 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.cb .phero .lede { font-size: clamp(17px, 1.5vw, 20px); max-width: 600px; }
.cb .updated { font-size: 14px; font-weight: 600; color: var(--muted); }
.cb .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cb .pills li { padding: 8px 14px; border-radius: 999px; background: var(--cream); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cb .card--feature .pills li, .cb .sec--cta .pills li { background: rgba(255, 255, 255, .14); color: #fff; }
.cb .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cb .btn--ghost { background: var(--cream); color: var(--ink); box-shadow: none; }
.cb .btn--ghost:hover { background: #fff; color: var(--ink); }
.cb .phero__art { max-width: 460px; width: 100%; justify-self: center; margin: 0; }
.cb .art { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(43, 36, 32, .18)); }

/* copy + box panels */
.cb .panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cb .panel__copy { display: grid; gap: 16px; justify-items: start; }
.cb .panel__copy .h2 { font-size: clamp(26px, 2.8vw, 36px); }
.cb .panel__copy p { color: var(--ink-2); }
.cb .panel__box { align-self: center; }

/* cards */
.cb .cards { display: grid; gap: 16px; }
.cb .cards--2 { grid-template-columns: repeat(2, 1fr); }
.cb .cards--3 { grid-template-columns: repeat(3, 1fr); }
.cb .cards--4 { grid-template-columns: repeat(4, 1fr); }
.cb .card { position: relative; display: grid; gap: 12px; align-content: start; justify-items: start; padding: 26px 26px 28px; border-radius: 24px; background: var(--cream); }
.cb .sec--alt .card { background: var(--sand); }
.cb .card .h3 { font-size: clamp(20px, 1.6vw, 23px); }
.cb .card .h3 a { text-decoration: none; }
.cb .card .h3 a:hover { color: var(--terra-ink); }
.cb .card p { font-size: 15px; color: var(--ink-2); }
.cb .card--feature { background: var(--grad-card) !important; color: var(--cream); }
.cb .card--feature :where(p, span, li, div, em, .h3, h3, strong) { color: inherit; }
.cb .card--feature p, .cb .card--feature .list li, .cb .card--feature span { color: #dff3e7; }
.cb .card--feature .strength { color: #9fe3bf; }
.cb .prose--loose { max-width: 860px; }
.cb .prose--loose .h2 { margin-bottom: 4px; }
.cb .prose--loose .h3 { margin-top: 8px; }
.cb .prose--loose .note { margin-top: 6px; }
.cb .card--feature .label { color: var(--cream); }
.cb .card--feature .more { color: #dff3e7; text-decoration-color: #9fe3bf; }
.cb .card--feature .badge { background: var(--cream); color: var(--olive); }
/* .card--soft keeps the default card contrast (cream on sand, sand on cream). */
.cb .sec--policy .card, .cb .sec--policy .check { background: var(--cream); }
.cb .loose { padding: 6px 0 18px; }
@media (max-width: 640px) {
  /* The table becomes a stack of labelled blocks. */
  .cb .table, .cb .table tbody, .cb .table tr, .cb .table td { display: block; }
  .cb .table thead { display: none; }
  .cb .table tr { padding: 10px 0; border-top: 1px solid rgba(43, 36, 32, .1); }
  .cb .table tr:first-child { border-top: 0; }
  .cb .table td { padding: 6px 20px; border: 0; white-space: normal; }
  .cb .table td::before { content: attr(data-th); display: block; margin-bottom: 2px; font: 800 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
  .cb .table td:first-child { padding-top: 10px; }
  .cb .table td:first-child::before { display: none; }
}
.cb .card--ok, .cb .card--warn { padding-left: 34px; }
.cb .card--ok::before, .cb .card--warn::before { content: ""; position: absolute; left: 14px; top: 26px; bottom: 26px; width: 5px; border-radius: 3px; background: var(--terra); }
.cb .card--warn::before { background: var(--rust); }
.cb .card--split { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 28px; }
.cb .label { font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
.cb .badge { padding: 6px 12px; border-radius: 999px; background: var(--olive); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cb .card .badge { position: static; margin-bottom: 2px; } /* own row: can never cover the label or heading */
.cb .strength { font-size: 14px; font-weight: 800; color: var(--terra-ink); }
.cb .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font: 800 18px/1 var(--serif); }
.cb .card--feature .num { background: rgba(255, 255, 255, .18); color: #fff; }
.cb .more { font-size: 14px; font-weight: 800; color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 4px; }
.cb .more:hover { color: var(--olive); }
.cb .note { padding: 16px 20px; border-radius: 16px; background: var(--olive-soft); color: var(--olive); font-size: 14px; font-weight: 600; }
.cb .card .note { background: rgba(255, 255, 255, .6); }

/* lists */
.cb .list { display: grid; gap: 8px; }
.cb .list li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); }
.cb .list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 999px; background: var(--terra); }
.cb .list--check li, .cb .card--ok .list li { padding-left: 30px; }
.cb .list--check li::before, .cb .card--ok .list li::before { content: "✓"; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center; background: var(--olive-soft); color: var(--olive); font-size: 12px; font-weight: 800; }
.cb .card--warn .list li { padding-left: 30px; }
.cb .card--warn .list li::before { content: "✕"; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center; background: #fbe4e1; color: var(--rust); font-size: 11px; font-weight: 800; }
.cb .card--feature .list li::before { background: #9fe3bf; }
.cb .prose { display: grid; gap: 14px; max-width: 800px; }
.cb .prose p, .cb .prose li { color: var(--ink-2); }
.cb .prose .h3 { margin-top: 10px; font-size: 21px; }
.cb .prose .list { margin: 2px 0 6px; }

/* specific blocks */
.cb .cover { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb .checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cb .check { display: grid; gap: 6px; padding: 20px 22px 20px 54px; position: relative; border-radius: 20px; background: var(--cream); }
.cb .sec--alt .check { background: var(--sand); }
.cb .check::before { content: "✓"; position: absolute; left: 18px; top: 20px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--olive); color: #fff; font-size: 13px; font-weight: 800; }
.cb .check strong { font-size: 15px; }
.cb .check span { font-size: 14px; color: var(--muted); }
.cb .paths { display: grid; gap: 10px; }
.cb .path { display: grid; grid-template-columns: 220px 1fr; gap: 6px 18px; padding: 14px 18px; border-radius: 16px; background: var(--sand); }
.cb .path strong { font-size: 15px; }
.cb .path span { font-size: 14px; color: var(--ink-2); }
.cb .links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cb .linkcard { display: grid; gap: 6px; padding: 22px 24px; border-radius: 20px; background: var(--cream); text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.cb .sec--alt .linkcard { background: var(--sand); }
.cb .linkcard:hover { background: #fff; transform: translateY(-3px); }
.cb .linkcard strong { font-size: 16px; color: var(--terra-ink); }
.cb .linkcard span { font-size: 14px; color: var(--ink-2); }
.cb .chainline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; margin: 4px 0 28px; }
.cb .chainline li { position: relative; padding: 12px 18px; border-radius: 999px; background: var(--olive); color: #fff; font-size: 14px; font-weight: 800; }
.cb .chainline li:first-child { background: var(--terra); color: #fff; } /* the first step stands out in MoodTag green; never blue */
.cb .chainline li + li::before { content: "→"; position: absolute; left: -27px; top: 50%; transform: translateY(-50%); color: var(--terra-ink); font-weight: 800; }
@media (max-width: 640px) {
  .cb .chainline { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cb .chainline li + li::before { content: "↓"; left: 18px; top: -22px; transform: none; }
}
.cb .tagmock { display: grid; gap: 10px; justify-items: center; margin: 6px 0; padding: 20px; border-radius: 20px; background: var(--sand); width: 100%; }
.cb .card--feature .tagmock { background: rgba(255, 255, 255, .12); }
.cb .tagmock figcaption { font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cb .card--feature .tagmock figcaption { color: #9fe3bf; }
.cb .tagmock__tag { position: relative; display: grid; place-content: center; gap: 4px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2f7fe0, #1159af 55%, #0b3f86); box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .25), 0 14px 24px -14px rgba(0, 0, 0, .5); text-align: center; color: #fff; }
.cb .tagmock__hole { position: absolute; left: 50%; top: 14px; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); background: var(--sand); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.cb .card--feature .tagmock__hole { background: var(--olive); }
.cb .tagmock__tag strong { font: 800 26px/1 var(--sans); letter-spacing: .04em; }
.cb .tagmock__tag em { font: 700 12px/1.2 var(--sans); font-style: normal; letter-spacing: .14em; opacity: .9; }
.cb .depth { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 32px 26px; border-radius: 24px; background: var(--grad-card); color: var(--cream); }
.cb .depth strong { font: 800 clamp(34px, 4vw, 52px)/1 var(--serif); color: #9fe3bf; }
.cb .depth span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a9cdb8; }
.cb .depth p { margin-top: 8px; font-size: 15px; color: #dff3e7; }
.cb .toc { position: sticky; top: 78px; z-index: 5; margin: -10px 0 8px; padding: 10px 0; background: var(--sand); }
.cb .toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cb .toc a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--cream); font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.cb .toc a:hover { background: var(--olive); color: #fff; }
.cb .tablewrap { overflow-x: auto; border-radius: 22px; background: var(--cream); }
.cb .table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cb .table th { padding: 16px 20px; text-align: left; font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); background: var(--olive-soft); }
.cb .table td { padding: 16px 20px; border-top: 1px solid rgba(43, 36, 32, .1); vertical-align: top; color: var(--ink-2); }
.cb .table td:first-child { white-space: nowrap; }
.cb .table strong { color: var(--ink); }
.cb .video { position: relative; aspect-ratio: 16 / 9; max-width: 860px; margin: 0 auto 20px; border-radius: 24px; overflow: hidden; background: var(--ink); }
.cb .video__link { display: block; height: 100%; }
.cb .video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.cb .video__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--terra); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .6); transition: transform .2s ease; }
.cb .video__play::after { content: ""; position: absolute; left: 34px; top: 26px; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.cb .video__link:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }
.cb .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; margin: 0 auto; }
.cb .notes__item { padding: 20px 22px; border-radius: 18px; background: var(--cream); }
.cb .notes__item strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--terra-ink); }
.cb .notes__item p { font-size: 15px; color: var(--ink-2); }
.cb .author { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; margin-top: clamp(40px, 6vw, 72px); padding: 28px; border-radius: 24px; background: var(--cream); }
.cb .author__avatar img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; background: #fff; }
.cb .author__body { display: grid; gap: 10px; justify-items: start; }
.cb .author__body p { font-size: 15px; color: var(--ink-2); }
.cb .formbox { padding: 8px; border-radius: 24px; background: var(--cream); min-height: 320px; }
.cb .sec--cta { background: var(--grad-band); color: var(--cream); }
.cb .sec--cta .head { margin-bottom: 20px; max-width: 820px; }
.cb .sec--cta .h2 { font-size: clamp(30px, 3.6vw, 48px); }
.cb .sec--cta .lede, .cb .sec--cta p { color: #dff3e7; }
.cb .sec--cta .btn { background: var(--cream); color: var(--ink); box-shadow: none; }
.cb .sec--cta .btn:not(.btn--ghost):hover { background: #fff; color: var(--ink); }
.cb .sec--cta .btn--ghost:hover, .cb .sec--cta .btn--ghost:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .7); } /* ghost on dark: light tint, text stays light */
.cb .btn--ghost:not(.sec--cta *):hover { color: var(--ink); } /* ghost on light: cream -> white fill, dark text */
.cb .sec--cta .btn--ghost { background: transparent; color: var(--cream); border: 2px solid rgba(255, 255, 255, .4); }
.cb .cta__in { display: grid; gap: 8px; justify-items: start; }
.cb .page .sec--cta .cta__in > p:not(.actions):not(.eyebrow), .cb .cta__in > p:not(.actions):not(.eyebrow) { color: #dff3e7; max-width: 720px; } /* beats the generic body-paragraph colour */
.cb .faq__list { display: grid; gap: 10px; max-width: 860px; }
.cb .page .qa__a { display: grid; gap: 10px; }
.cb .sec--policy .prose { max-width: 820px; }
.cb .sec--policy .head { margin-bottom: 22px; }
.cb .sec--policy .h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cb .sec--policy { padding: clamp(32px, 4.5vw, 48px) 0; }
.cb .sec--policy + .sec--policy > .wrap { border-top: 1px solid rgba(43, 36, 32, .12); padding-top: clamp(32px, 4.5vw, 48px); }
.cb .sec--policy.sec--alt { background: transparent; }
.cb .sec--policy .cards--4 { grid-template-columns: repeat(2, 1fr); } /* four-up never fits the policy column */
.cb .panel:has(.formbox) { align-items: start; } /* the contact form is tall: copy sits at the top beside it */
.cb .card--split .card :where(p, span, li) { font-size: 15px; }

@media (max-width: 960px) {
  .cb .phero__grid, .cb .panel { grid-template-columns: 1fr; }
  .cb .phero__art { max-width: 360px; order: -1; }
  .cb .cards--3, .cb .cards--4, .cb .links, .cb .checks { grid-template-columns: repeat(2, 1fr); }
  .cb .card--split { grid-template-columns: 1fr; }
  .cb .path { grid-template-columns: 1fr; }
  .cb .toc { position: static; }
}
@media (max-width: 640px) {
  .cb .cards--2, .cb .cards--3, .cb .cards--4, .cb .links, .cb .checks, .cb .cover, .cb .notes { grid-template-columns: 1fr; }
  .cb .author { grid-template-columns: 1fr; }
  .cb .actions .btn { width: 100%; }
  .cb .phero__art { max-width: 320px; }
  .cb .mtd-page--what-is-moodtag .phero__art { max-width: 100%; } /* the labelled diagram needs the width to stay readable */
  .cb .card { padding: 22px 20px 24px; }
  .cb .card--ok, .cb .card--warn { padding-left: 34px; } /* keep the gap after the stripe on phones too */
}

/* Labelled hero diagram: SVG labels on desktop, a numbered legend under the drawing on phones */
.cb .art-legend { display: none; }
@media (max-width: 640px) {
  .cb .art__label { display: none; }
  .cb .art-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font: 700 13px/1.3 var(--sans); color: var(--ink); }
  .cb .art-legend li { display: flex; gap: 8px; }
  .cb .art-legend b { color: var(--terra-ink); }
  .cb .phero__art:has(.art-legend) { max-width: 100%; }
}

/* Photo hero (what-is-moodtag): the render in a soft frame, legend always visible with a clear gap after the number */
.cb .phero__art--photo { max-width: 440px; display: grid; gap: 12px; }
.cb .art--photo { width: 100%; height: auto; border-radius: 28px; background: var(--cream); filter: none; }
.cb .art-legend--always { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font: 700 13px/1.3 var(--sans); color: var(--ink); }
.cb .art-legend--always li { display: flex; gap: 8px; }
.cb .art-legend--always b { color: var(--terra-ink); flex: none; }
@media (max-width: 960px) { .cb .phero__art--photo { max-width: 360px; } }

/* Inline links in running text: the paragraph's size and weight, only colour and underline change; light on dark surfaces */
.cb .page :is(p, li, td, dd, .qa__a, .note) a:not(.btn):not(.more):not(.linkcard) { color: var(--terra-ink); font: inherit; text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 3px; }
.cb .page :is(p, li, td, dd, .qa__a, .note) a:not(.btn):not(.more):not(.linkcard):hover { color: var(--olive); text-decoration-thickness: 2px; }
.cb .page :is(.card--feature, .sec--cta, .depth, .sec--band) :is(p, li, td, dd, .qa__a, .note) a:not(.btn):not(.more):not(.linkcard) { color: #fff; text-decoration-color: #9fe3bf; }
.cb .page :is(.card--feature, .sec--cta, .depth, .sec--band) :is(p, li, td, dd, .qa__a, .note) a:not(.btn):not(.more):not(.linkcard):hover { color: #fff; text-decoration-color: #fff; text-decoration-thickness: 2px; }

/* Shipping / size guide / FAQ page blocks */
.cb .price { font: 800 clamp(30px, 3vw, 40px)/1 var(--serif); color: var(--ink); }
.cb .price span { display: block; margin-top: 6px; font: 700 13px/1.3 var(--sans); color: var(--terra-ink); }
.cb .card--feature .price, .cb .card--feature .price span { color: #fff; }
.cb .card--feature .price span { color: #9fe3bf; }
.cb .card .list li.is-no { color: var(--muted); }
.cb .list li.is-no::before { content: "✕"; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--sand-2); color: var(--muted); font-size: 11px; font-weight: 800; }
.cb .card .list li { padding-left: 30px; }
.cb .card .list li::before { content: "✓"; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 12px; font-weight: 800; }
.cb .card--feature .list li::before { background: rgba(255, 255, 255, .18); color: #fff; }
.cb .card .list li.is-no::before { content: "✕"; background: var(--sand-2); color: var(--muted); font-size: 11px; }
.cb .card--feature .list li.is-no { color: #c6e6d4; }
.cb .card--feature .list li.is-no::before { background: rgba(255, 255, 255, .12); color: #dff3e7; }
.cb .sec--promo { padding: 0 0 clamp(24px, 3vw, 36px); }
.cb .promo { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: 20px; background: var(--olive-soft); color: var(--olive); }
.cb .promo .num { flex: none; background: var(--olive); color: #fff; font-size: 16px; }
.cb .promo__body { display: grid; gap: 4px; }
.cb .promo__body strong { font-size: 16px; color: var(--ink); }
.cb .promo__body p { font-size: 15px; color: var(--ink-2); }
.cb .sec--faq .head { margin-bottom: 20px; }
.cb .sec--faq .h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cb .page .sec--cta p.lede, .cb .page .sec--cta .actions + p { color: #dff3e7; }

/* Engraving examples (what-to-put-on-a-dog-tag): the back of a tag drawn black, engraving always light (Wilson's tag rule) */
.cb .tagmock--back .tagmock__tag { background: radial-gradient(circle at 35% 30%, #3a3f44, #1a1d21 55%, #0b0d10); }
.cb .card .tagmock + .tagmock { margin-top: 0; }
.cb .cards--3 .tagmock__tag { width: 150px; height: 150px; }
.cb .cards--3 .tagmock__tag strong { font-size: 22px; }
/* Sample front quotes: shown as engraved text on a black tag strip, so the chip shape means "this is what the engraving looks like" */
.cb .quotes { display: flex; flex-wrap: wrap; gap: 10px; }
.cb .quotes li { padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, #3a3f44, #1a1d21 55%, #0b0d10); color: #f3f5f4; font: 700 13px/1.2 var(--sans); letter-spacing: .12em; }

/* Home DNA for the inner pages (DESIGN-BRIEF.md, "Home DNA"). Pages built by scripts/pages/dna.py carry .page--dna and reuse
   the home page's own components from b.css (hero__photo, guarline, close, chains, force, guar__grid). This file only adds
   the few inner-page components the home does not have and tunes the home sizes for a page that sits below the home. */

/* type scale: inner pages sit one step below the home */
.cb .page--dna .hero__h1 { font-size: clamp(36px, 4.6vw, 60px); }
.cb .page--dna .h2 { font-size: clamp(30px, 3.4vw, 44px); }
.cb .page--dna .close__h { font-size: clamp(34px, 4.6vw, 60px); }
.cb .page--dna .close__lede { font-size: clamp(19px, 1.9vw, 24px); }
.cb .page--dna .sec--policy .h2 { font-size: clamp(26px, 2.8vw, 36px); }

/* kicker: the section label words, as a small green caption (a pill only where the register changes: hero and dark bands) */
.cb .kicker { font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
.cb .close .kicker { color: #9fe3bf; }

/* hero: copy first, the photo beside it (under it on phones) */
.cb .page--dna .hero { padding-bottom: clamp(32px, 5vw, 64px); }
.cb .page--dna .hero:has(.guarline) { padding-bottom: 0; }
.cb .page--dna .hero__copy > .pills, .cb .page--dna .hero__copy > .actions, .cb .page--dna .hero__copy > .updated { margin-top: 0; }
.cb .page--dna .hero__copy .lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 560px; }
.cb .page--dna .hero__grid { grid-template-columns: 1.05fr .95fr; }
.cb .page--dna .hero__photo { max-width: 440px; justify-self: center; width: 100%; }
.cb .page--dna .hero__copy .eyebrow { background: var(--cream); color: var(--ink-2); }
.cb .page--dna .guarline { margin-top: clamp(32px, 5vw, 56px); margin-bottom: clamp(16px, 3vw, 32px); }
.cb .page--dna .guarline b { font-size: 14px; }

/* dark statement band: the quick list rides inside it as hairline rows */
.cb .page--dna .close__in { max-width: 960px; }
.cb .stack { width: 100%; max-width: 760px; margin-top: 10px; padding-top: 6px; }
.cb .stack__h { font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9fe3bf; }
.cb .stack__list { margin-top: 10px; }
.cb .stack__list li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; color: #dff3e7; }
.cb .stack__list li strong { color: #fff; }
.cb .stack__list li::before { content: "✓"; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 800; }

/* three guarantees: the home's guar cards, the singled-out one carries the gradient (not always the first) */
.cb .page--dna .guar__card:first-child { background: var(--cream); color: inherit; }
.cb .page--dna .guar__card:first-child .guar__ico { background: var(--olive-soft); color: var(--olive); }
.cb .page--dna .guar__card:first-child p { color: var(--ink-2); }
.cb .page--dna .guar__card--feature { background: var(--grad-card); color: #fff; }
.cb .page--dna .guar__card--feature .guar__ico { background: rgba(255, 255, 255, .2); color: #fff; }
.cb .page--dna .guar__card--feature p { color: #dff3e7; }
.cb .page--dna .guar__card--feature .badge { background: var(--cream); color: var(--olive); }
.cb .page--dna .sec--alt .guar__card:not(.guar__card--feature) { background: var(--cream); }

/* covers / does not cover: the home's two-column comparison, marks instead of numbers. Each side keeps its own height
   (SAGE, 26 Oct): a short covers list never leaves an empty green block beside a long does-not-cover list. */
.cb .page--dna .chains { align-items: start; }
.cb .page--dna .chain { background: var(--cream); }
.cb .page--dna .chain--moodtag { background: var(--grad-card); }
.cb .page--dna .chain li { grid-template-columns: 28px 1fr; font-size: 15px; }
.cb .page--dna .chain .n { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 999px; font-size: 12px; line-height: 1; }
.cb .page--dna .chain--ok .n { background: rgba(255, 255, 255, .2); color: #fff; }
.cb .page--dna .chain--no .n { background: #fbe4e1; color: var(--rust); font-size: 11px; }
.cb .page--dna .chain--ok li { color: #dff3e7; border-color: rgba(255, 255, 255, .18); }
.cb .page--dna .chain--ok h3 { color: #fff; }
.cb .page--dna .chain h3 { font-size: 21px; }

/* pull-force block: the home's force rows, names where the home has the figures */
.cb .page--dna .force { grid-template-columns: 1fr 1fr; background: var(--cream); margin-top: 0; }
.cb .page--dna .force__name strong { font-size: clamp(24px, 2.2vw, 30px); }
.cb .page--dna .force__name { flex-direction: column; align-items: flex-start; gap: 4px; }
.cb .page--dna .force__note { grid-column: 1 / -1; color: var(--ink-2); }
.cb .page--dna .strength { font-size: 15px; }

/* claim steps: three columns with a big serif number, no boxes */
.cb .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cb .steps:has(li:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.cb .steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--terra); }
.cb .steps__n { font: 800 44px/1 var(--serif); color: var(--terra-ink); }
.cb .steps .h3 { font-size: clamp(20px, 1.6vw, 23px); }
.cb .steps p { font-size: 15px; color: var(--ink-2); }

/* exclusions: one list in two columns, each item marked */
.cb .xlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 1000px; }
.cb .xlist li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid rgba(43, 36, 32, .12); font-size: 15px; color: var(--ink-2); }
.cb .xlist li::before { content: "✕"; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: #fbe4e1; color: var(--rust); font-size: 11px; font-weight: 800; }

/* photo + definition rows */
.cb .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cb .split__photo { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(43, 36, 32, .45); }
.cb .split__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.cb .split__body { display: grid; gap: 16px; justify-items: start; }
.cb .split__body .lede { max-width: 560px; }
.cb .rows { width: 100%; margin-top: 8px; }
.cb .rows > li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(43, 36, 32, .12); }
.cb .rows > li strong { font-size: 16px; }
.cb .rows > li span { font-size: 15px; color: var(--ink-2); }

/* generic DNA pages (DNAConverter): the guarantee trio and steps strip built from ordinary card grids */
.cb .page--dna .guar__card .h3 { font-size: 22px; }
.cb .page--dna .guar__card .label { color: var(--terra-ink); }
.cb .page--dna .steps .h3 { margin: 0; }

/* dark statement band skin: one ordinary section (chosen per page by its H2) wears the home's close-band look */
.cb .page--dna .sec--band { background: var(--grad-band); color: var(--cream); }
.cb .page--dna .sec--band .eyebrow { background: rgba(255, 255, 255, .14); color: var(--cream); }
.cb .page--dna .sec--band .head { max-width: 900px; }
.cb .page--dna .sec--band .h2, .cb .page--dna .sec--band .panel__copy .h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; }
.cb .page--dna .sec--band .h2 em { color: #9fe3bf; }
.cb .page--dna .sec--band .lede, .cb .page--dna .sec--band :is(.panel__copy, .card, .head) > .h2 + p { font: 600 clamp(19px, 1.9vw, 24px)/1.3 var(--serif); color: var(--cream); max-width: 760px; }
.cb .page--dna .sec--band p, .cb .page--dna .sec--band .panel__copy p, .cb .page--dna .sec--band li { color: #dff3e7; }
.cb .page--dna .sec--band .kicker { color: #9fe3bf; }
.cb .page--dna .sec--band .label { font: 800 16px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; } /* a card's label is its title inside the band */
.cb .page--dna .sec--band .h3, .cb .page--dna .sec--band h3, .cb .page--dna .sec--band strong { color: #fff; }
.cb .page--dna .sec--band .card, .cb .page--dna .sec--band .panel__box { background: transparent !important; padding: 0; border-radius: 0; color: inherit; }
.cb .page--dna .sec--band .card .h3 { font-size: 13px; font-family: var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9fe3bf; } /* a card's title becomes the list's caption */
.cb .page--dna .sec--band .cards { grid-template-columns: 1fr; gap: 0; max-width: 760px; }
.cb .page--dna .sec--band .cards > .card { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.cb .page--dna .sec--band .cards > .card .h3 { font: 800 18px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; }
.cb .page--dna .sec--band .list { gap: 0; }
.cb .page--dna .sec--band .list li { padding: 12px 0 12px 32px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; }
.cb .page--dna .sec--band .list li::before { content: "✓"; left: 0; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 800; }
.cb .page--dna .sec--band .list li.is-no::before { content: "✕"; background: rgba(255, 255, 255, .12); color: #dff3e7; }
.cb .page--dna .sec--band .note { background: rgba(255, 255, 255, .12); color: #fff; }
.cb .page--dna .sec--band .btn { background: var(--cream); color: var(--ink); box-shadow: none; }
.cb .page--dna .sec--band .btn:hover { background: #fff; }
.cb .page--dna .sec--band .more { color: #dff3e7; text-decoration-color: #9fe3bf; }
.cb .page--dna .sec--band .more:hover { color: #fff; }
.cb .page--dna .sec--band .chainline { border-color: rgba(255, 255, 255, .18); }
.cb .page--dna .sec--band .chainline li, .cb .page--dna .sec--band .chainline li:first-child { color: var(--cream); }
.cb .page--dna .sec--band .chainline li + li::before { color: #9fe3bf; }
.cb .page--dna .sec--band .card--no .list li::before { content: "✕"; background: rgba(255, 255, 255, .12); color: #dff3e7; }

/* negative lists ("does not …", "surface-level …"): ✕ marks, never a green tick (rule 6) */
.cb .page--dna .card--no .list li::before, .cb .page--dna .rows__item--no .list li::before { content: "✕"; background: #fbe4e1; color: var(--rust); font-size: 11px; }
.cb .page--dna .card--feature.card--no .list li::before { background: rgba(255, 255, 255, .12); color: #dff3e7; }

/* hairline rows: a card grid that would follow another card grid (rule 5), and the useful-pages link grid */
.cb .rows--grid, .cb .rows--links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; width: 100%; margin: 0; }
.cb .rows__item { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 16px 0; border-top: 1px solid rgba(43, 36, 32, .12); }
.cb .rows__item .h3 { font-size: 20px; }
.cb .rows__item .h3 a { text-decoration: none; }
.cb .rows__item .h3 a:hover { color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 3px; }
.cb .rows__item strong { font-size: 16px; }
.cb .rows__item p, .cb .rows__item > span:not(.badge) { font-size: 15px; color: var(--ink-2); }
/* a pill on one item of a row sits inline with the kicker, so the items beside it stay level */
.cb .rows__item:has(> .badge) { grid-template-columns: auto 1fr; align-items: center; }
.cb .rows__item > .badge { grid-row: 1; grid-column: 2; justify-self: start; margin: -8px 0; } /* negative block margin: the pill never makes its row taller than the kicker beside it */
.cb .rows__item > .label { grid-row: 1; grid-column: 1; }
.cb .rows__item > :not(.badge):not(.label) { grid-column: 1 / -1; }
.cb .card:has(> .badge + .label), .cb .card:has(> .label + .badge) { grid-template-columns: auto auto 1fr; align-items: center; }
.cb .card:has(> .badge + .label) > .badge, .cb .card:has(> .label + .badge) > .badge { grid-row: 1; grid-column: 2; margin: 0; }
.cb .card:has(> .badge + .label) > .label, .cb .card:has(> .label + .badge) > .label { grid-row: 1; grid-column: 1; }
.cb .card:has(> .badge + .label) > :not(.badge):not(.label), .cb .card:has(> .label + .badge) > :not(.badge):not(.label) { grid-column: 1 / -1; }
.cb .rows__item .list { gap: 6px; margin-top: 2px; }
.cb .rows__item .list li { padding-left: 30px; }
.cb .rows__item .list li::before { content: "✓"; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 12px; font-weight: 800; }
.cb .rowlink { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(43, 36, 32, .12); text-decoration: none; }
.cb .rowlink strong { font-size: 16px; color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 3px; }
.cb .rowlink:hover strong { color: var(--olive); text-decoration-thickness: 2px; }
.cb .rowlink span { font-size: 14px; color: var(--ink-2); }

/* the setup chain as a hairline text chain, not pills (rule 4) */
.cb .page--dna .chainline { gap: 10px 18px; margin: 4px 0 24px; padding: 14px 0; border-top: 1px solid rgba(43, 36, 32, .12); border-bottom: 1px solid rgba(43, 36, 32, .12); }
.cb .page--dna .chainline li, .cb .page--dna .chainline li:first-child { padding: 0; background: none; color: var(--ink); font: 700 15px/1.3 var(--sans); }
.cb .page--dna .chainline li + li::before { position: static; transform: none; margin-right: 10px; color: var(--terra); } /* the arrow travels with its item when the chain wraps */

/* jump links on the policy pages: plain text links with separators, not outline pills (rule 4) */
.cb .page--dna .toc ul { gap: 6px 0; }
.cb .page--dna .toc li { display: inline-flex; align-items: center; }
.cb .page--dna .toc li + li::before { content: "·"; margin: 0 12px; color: var(--muted); }
.cb .page--dna .toc a { padding: 2px 0; background: none; font-size: 14px; color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 3px; }
.cb .page--dna .toc a:hover { background: none; color: var(--olive); text-decoration-thickness: 2px; }

/* a one-line CTA between reference blocks: an inline button row on a light tint, not a band */
.cb .page--dna .sec--cta-inline { background: transparent; color: inherit; padding: 0 0 clamp(32px, 4.5vw, 48px); }
.cb .page--dna .sec--cta-inline .cta__in { grid-auto-flow: column; grid-auto-columns: auto; align-items: center; justify-content: start; gap: 12px 28px; padding: 22px 26px; border-radius: 24px; background: var(--olive-soft); }
.cb .page--dna .sec--cta-inline .cta__in > p { color: var(--olive); font-weight: 600; max-width: none; }
.cb .page--dna .sec--cta-inline .btn { background: var(--terra-ink); color: #fff; }
.cb .page--dna .sec--cta-inline .btn:hover { background: var(--olive); }

/* the section spacing rule in pages.css adds a gap between wrap children; grids manage their own */
.cb .page--dna .sec > .wrap.close__in > * + *, .cb .page--dna .sec > .wrap.split > * + * { margin-top: 0; }
.cb .page--dna .sec > .wrap > .head + .chains, .cb .page--dna .sec > .wrap > p + .chains { margin-top: 24px; }

@media (max-width: 960px) {
  .cb .page--dna .hero__grid { grid-template-columns: 1fr; }
  .cb .page--dna .hero__photo { max-width: 420px; aspect-ratio: 4 / 5; }
  .cb .steps, .cb .steps:has(li:nth-child(4)) { grid-template-columns: 1fr; gap: 18px; }
  .cb .split { grid-template-columns: 1fr; }
  .cb .split__photo { max-width: 520px; }
  .cb .page--dna .force { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cb .xlist, .cb .rows--grid, .cb .rows--links { grid-template-columns: 1fr; }
  .cb .page--dna .chainline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .cb .page--dna .chainline li + li::before { content: "→"; position: static; transform: none; }
  .cb .page--dna .sec--cta-inline .cta__in { grid-auto-flow: row; justify-items: start; }
  .cb .page--dna .chain { padding: 22px 18px; }
  .cb .page--dna .hero__photo { max-width: 100%; aspect-ratio: 4 / 5; }
}

/* "Mistakes" / "what not to" sections: each item's title carries the ✕ mark when it has no list of its own (rule 6: the mark means "don't") */
.cb .page--dna :is(.card--no, .rows__item--no):not(:has(.list)) > :is(.h3, h3, h4) { display: flex; gap: 10px; align-items: baseline; }
.cb .page--dna :is(.card--no, .rows__item--no):not(:has(.list)) > :is(.h3, h3, h4)::before { content: "✕"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #fbe4e1; color: var(--rust); font: 800 11px/1 var(--sans); transform: translateY(-2px); }
/* tag examples inside the dark band: one translucent surface for every example, the hole shows the band behind it */
.cb .page--dna .sec--band .tagmock { background: rgba(255, 255, 255, .1) !important; }
.cb .page--dna .sec--band .tagmock figcaption { color: #9fe3bf; }
.cb .page--dna .sec--band .tagmock__hole { background: #17663d; }

.cb .nowrap { white-space: nowrap; } /* number terms in headings: "5-point" never splits at the hyphen */

/* ---- /dog-tag-finishes/ (new copy, finishes.py) ---- */
/* In short box under the H1, and tick rows on light surfaces */
.cb .inshort { width: 100%; max-width: 600px; padding: 18px 22px 8px; border-radius: 20px; background: var(--cream); }
.cb .inshort__h { font: 800 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
.cb .stack-rows { margin-top: 6px; }
.cb .stack-rows > li { position: relative; padding: 10px 0 10px 32px; border-top: 1px solid rgba(43, 36, 32, .12); font-size: 15px; color: var(--ink-2); }
.cb .stack-rows > li:first-child { border-top: 0; }
.cb .stack-rows > li::before { content: "✓"; position: absolute; left: 0; top: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 12px; font-weight: 800; }
.cb .stack-rows li strong { color: var(--ink); }
.cb .page--dna .hero__copy .updated { margin-top: 2px; }
/* the opening answer as a large statement (the home's centred-statement pattern, left-aligned for reading) */
.cb .sec--statement { padding: clamp(40px, 5vw, 64px) 0; }
.cb .statement { max-width: 900px; font: 600 clamp(20px, 2vw, 26px)/1.4 var(--serif); color: var(--ink); }
/* a run of short question sections: heading left, answer right, hairline between them (one pattern, one band of the page) */
.cb .qsplit { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px clamp(28px, 5vw, 72px); align-items: start; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid rgba(43, 36, 32, .12); }
.cb .qsplit:first-child { border-top: 0; padding-top: 0; }
.cb .qsplit:last-child { padding-bottom: 0; }
.cb .qsplit__head { display: grid; gap: 12px; justify-items: start; }
.cb .qsplit__head .h2 { font-size: clamp(24px, 2.4vw, 32px); }
.cb .qsplit__body { max-width: 640px; }
.cb .qsplit__body .note { margin-top: 4px; }
/* narrow reading column for prose-only sections */
.cb .wrap.narrow { max-width: 820px; display: grid; gap: 16px; justify-items: start; }
.cb .wrap.narrow > p:not(.kicker) { color: var(--ink-2); }
.cb .page--dna .sec > .wrap.narrow > * + * { margin-top: 0; }
.cb .split__body > p:not(.kicker) { color: var(--ink-2); }
/* key takeaways card */
.cb .takeaways { display: grid; gap: 14px; justify-items: start; max-width: 860px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--cream); }
.cb .sec--alt .takeaways { background: var(--sand); }
/* care steps: four numbered steps (the copy numbers them); step text is a sentence, not a heading */
.cb .steps p { font-size: 15px; color: var(--ink-2); }
/* tables and tick rows on the dark band */
.cb .page--dna .sec--band .tablewrap { background: rgba(255, 255, 255, .08); }
.cb .page--dna .sec--band .table th { background: rgba(255, 255, 255, .12); color: #9fe3bf; }
.cb .page--dna .sec--band .table td { color: #dff3e7; border-color: rgba(255, 255, 255, .14); }
.cb .page--dna .sec--band .table td::before { color: #9fe3bf; }
.cb .page--dna .sec--band .table strong { color: #fff; }
.cb .page--dna .sec--band > .wrap > p { max-width: 820px; }
@media (max-width: 960px) { .cb .qsplit { grid-template-columns: 1fr; } }

/* kickers keep their colour inside containers whose paragraph colour would otherwise win (panels, author box, cards, prose) */
.cb .page--dna :is(.panel__copy, .author__body, .card, .prose, .split__body, .narrow, .qsplit__head) p.kicker { color: var(--terra-ink); }
.cb .page--dna .sec--band :is(.panel__copy, .author__body, .card, .prose, .split__body, .narrow, .qsplit__head) p.kicker { color: #9fe3bf; }

/* ---- hub category page (/product-category/dog-id-tags/, hub.py): trust row, setup cards, WooCommerce grid ---- */
.cb .trustrow { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cb .trustrow li { display: inline-flex; align-items: center; gap: 8px; }
.cb .trustrow b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font-size: 13px; }
.cb .page--shop .sec--setups { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 0; }
.cb .setupcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cb .setupcard { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; padding: 26px 24px 24px; border-radius: 24px; background: var(--cream); border: 1px solid var(--sand-2); }
.cb .setupcard:nth-child(2) { background: var(--grad-card); border-color: transparent; color: var(--cream); } /* MAX: the home's highlighted setup */
.cb .page .setupcard p { margin: 0; max-width: none; }
.cb .setupcard__name { font: 800 clamp(24px, 2.2vw, 30px)/1.1 var(--serif); color: var(--ink); }
.cb .setupcard__price { font-size: 14px; font-weight: 700; color: var(--muted); }
.cb .setupcard__spec { margin-top: 8px !important; padding-top: 12px; border-top: 1px solid rgba(43, 36, 32, .12); font-size: 15px; font-weight: 800; color: var(--terra-ink); }
.cb .setupcard__desc { font-size: 15px; color: var(--ink-2); }
.cb .setupcard .btn { justify-self: start; margin-top: 14px; min-height: 50px; padding: 0 24px; font-size: 15px; }
.cb .page .setupcard:nth-child(2) :is(.setupcard__name, .setupcard__spec) { color: #fff; }
.cb .page .setupcard:nth-child(2) :is(.setupcard__price, .setupcard__desc) { color: #dff3e7; }
.cb .setupcard:nth-child(2) .setupcard__spec { border-color: rgba(255, 255, 255, .2); }
.cb .setupcard:nth-child(2) .btn { background: var(--cream); color: var(--ink); box-shadow: none; }
.cb .setupcard:nth-child(2) .btn:hover, .cb .setupcard:nth-child(2) .btn:focus-visible { background: #fff; color: var(--ink); }

/* WooCommerce's own loop markup (content-product + Kadence's card hooks), styled to the home's shape cards */
.cb .page--shop .sec--shop .wrap > * + * { margin-top: 16px; }
.cb .page--shop .kadence-shop-top-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.cb .page--shop .kadence-woo-toggle, .cb .page--shop .woocommerce-result-count:empty { display: none; }
.cb .page--shop .woocommerce-ordering select { min-height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--sand-2); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a202c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; font: 600 14px/1 var(--sans); color: var(--ink); appearance: none; cursor: pointer; }
.cb .page--shop .woocommerce-ordering select:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.cb .page--shop ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cb .page--shop ul.products::before, .cb .page--shop ul.products::after { content: none; }
.cb .page--shop ul.products > li.product { position: relative; display: flex; flex-direction: column; float: none; width: auto; margin: 0; padding: 0; border-radius: 22px; background: #fff; border: 1px solid var(--sand-2); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.cb .page--shop ul.products > li.product:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(43, 36, 32, .5); }
.cb .page--shop li.product .woocommerce-loop-image-link { position: relative; display: block; aspect-ratio: 1; background: var(--sand); overflow: hidden; }
.cb .page--shop li.product .woocommerce-loop-image-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .4s ease; }
.cb .page--shop li.product .secondary-product-image { position: absolute; inset: 0; opacity: 0; }
.cb .page--shop li.product:hover .product-has-hover-image .secondary-product-image { opacity: 1; }
.cb .page--shop li.product .product-details { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 18px; }
.cb .page--shop li.product .woocommerce-loop-product__title { margin: 0; font: 800 17px/1.25 var(--serif); color: var(--ink); }
.cb .page--shop li.product .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
.cb .page--shop li.product .woocommerce-loop-product__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.cb .page--shop li.product .price { font-size: 15px; font-weight: 700; color: var(--terra-ink); }
.cb .page--shop li.product .price del { color: var(--muted); font-weight: 600; margin-right: 6px; }
.cb .page--shop li.product .price ins { text-decoration: none; }
.cb .page--shop li.product .product-excerpt, .cb .page--shop li.product .star-rating { display: none; }
.cb .page--shop li.product .product-action-wrap { margin-top: auto; padding-top: 8px; }
.cb .page--shop li.product .button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--terra-ink); color: #fff; font: 700 14px/1 var(--sans); text-decoration: none; }
.cb .page--shop li.product .button:hover, .cb .page--shop li.product .button:focus-visible { background: var(--olive); }
.cb .page--shop li.product .button .kadence-svg-iconset { display: none; }
.cb .page--shop li.product .button .kadence-svg-iconset:first-of-type { display: inline-flex; }
.cb .page--shop li.product .button svg { width: 14px; height: 14px; }
.cb .page--shop li.product .button::after { content: none; }
.cb .page--shop .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb .page--shop .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; padding: 0; list-style: none; }
.cb .page--shop .woocommerce-pagination :is(a, span) { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sand-2); color: var(--ink); font-weight: 700; text-decoration: none; }
.cb .page--shop .woocommerce-pagination .current { background: var(--terra-ink); border-color: transparent; color: #fff; }

.cb .wall--two { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb .wall--two .quote { margin: 0; }
.cb .hub__links { font-weight: 700; }
.cb .page--shop .sec--band .narrow > * + * { margin-top: 16px; }

@media (max-width: 1080px) {
  .cb .page--shop ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .cb .setupcards { grid-template-columns: 1fr; }
  .cb .page--shop ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cb .page--shop li.product .product-details { padding: 12px 12px 14px; }
  .cb .page--shop li.product .woocommerce-loop-product__title { font-size: 15px; }
  .cb .page--shop li.product .button { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .cb .wall--two { grid-template-columns: 1fr; }
  .cb .page--shop .kadence-shop-top-row { justify-content: flex-start; }
}
/* WooCommerce's loop reuses class names the info pages style (.price spans, links inside li): reset them on the grid */
.cb .page.page--shop ul.products > li.product .price span { display: inline; margin: 0; font: inherit; color: inherit; }
.cb .page.page--shop ul.products > li.product .woocommerce-loop-product__title a { color: var(--ink); font: inherit; text-decoration: none; }
.cb .page.page--shop ul.products > li.product .woocommerce-loop-product__title a:hover { color: var(--terra-ink); }
.cb .page.page--shop ul.products > li.product a.button { color: #fff; font: 700 14px/1 var(--sans); text-decoration: none; }
@media (max-width: 860px) { .cb .page.page--shop ul.products > li.product a.button { font-size: 13px; } }
.cb .page--shop .sec--shop .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cb .page--shop .sec--shop .wrap > * + * { margin-top: 0; }
.cb .page--shop .sec--shop .wrap > :is(ul.products, .woocommerce-pagination, .woocommerce-info, .woocommerce-no-products-found) { flex-basis: 100%; }
.cb .page--shop .woocommerce-notices-wrapper:empty { display: none; }
.cb .page--shop .wrap > div.narrow { max-width: 820px; }
.cb .page--shop .sec--band .head .lede { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.45; max-width: 820px; }
.cb .page--shop .rows > li { grid-template-columns: 110px 1fr; gap: 4px 20px; color: var(--ink-2); }
.cb .page--shop .rows > li strong { color: var(--ink); }
.cb .page--shop .hub__links { margin-top: 20px; }
.cb .page--shop .narrow + .wall--two { margin-top: 32px; }
@media (max-width: 640px) { .cb .page--shop .rows > li { grid-template-columns: 1fr; } }
.cb .page--shop .woocommerce-result-count { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }

/* hub, SAGE review 1 (26 Oct): setups table by setup, split band with a vertical chain, products higher on phones */
.cb .table--setups th[scope="row"] { white-space: nowrap; }
@media (min-width: 641px) {
  /* one row per setup in the HTML; the grid flows them into columns so it reads as the brief's table */
  .cb .table--setups { display: grid; grid-template-columns: max-content repeat(var(--cols, 3), 1fr); grid-template-rows: repeat(var(--rows, 6), auto); grid-auto-flow: column; }
  .cb .table--setups :is(thead, tbody, tr) { display: contents; }
  .cb .table--setups thead td { background: var(--olive-soft); }
  .cb .table--setups thead th { padding: 16px 20px; background: none; border-top: 1px solid rgba(43, 36, 32, .1); font: 700 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
}
@media (max-width: 640px) {
  .cb .page--shop .tablewrap { background: none; border-radius: 0; overflow: visible; }
  .cb .table--setups tr { margin-top: 12px; padding: 4px 0 10px; border: 0; border-radius: 20px; background: var(--cream); }
  .cb .table--setups tr:first-child { margin-top: 0; }
  .cb .table--setups th[scope="row"] { display: block; padding: 16px 20px 4px; background: none; font: 800 20px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
  .cb .table--setups td:first-of-type { padding-top: 6px; }
  .cb .table--setups td:first-of-type::before { display: block; }
}
.cb .page--shop .band__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.cb .page--shop .band__main, .cb .page--shop .band__side { display: grid; gap: 16px; }
.cb .page--shop .band__main .head { margin-bottom: 0; }
.cb .page--shop .band__side { padding-top: clamp(0px, 6vw, 96px); }
.cb .page--shop .sec--band .head .lede { font: 600 clamp(20px, 2vw, 26px)/1.3 var(--serif); }
.cb .page--dna .chainline--v { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.cb .page--dna .chainline--v li + li::before { content: "↓"; display: block; margin: 0 0 4px; color: #9fe3bf; }
@media (max-width: 860px) { .cb .page--shop .band__grid { grid-template-columns: 1fr; } .cb .page--shop .band__side { padding-top: 0; } }
@media (max-width: 600px) {
  .cb .page--shop .hero__grid { gap: 20px; }
  .cb .page--shop .hero__photo { aspect-ratio: auto; height: 180px; max-width: 100%; border-radius: 24px; }
  .cb .page--shop .hero__photo img { object-position: 50% 62%; }
  .cb .page--shop .trustrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
  .cb .page--shop .trustrow li { align-items: flex-start; }
  .cb .page--shop .trustrow b { flex: none; width: 22px; height: 22px; font-size: 11px; }
  .cb .page--shop .sec--setups { padding-top: 16px; }
  .cb .setupcards { gap: 10px; }
  .cb .setupcard { grid-template-columns: 1fr auto; grid-template-rows: auto; gap: 2px 12px; padding: 14px 16px; border-radius: 18px; }
  .cb .setupcard__name { grid-column: 1; font-size: 20px; }
  .cb .setupcard__price { grid-column: 1; }
  .cb .setupcard__spec { grid-column: 1; margin-top: 4px !important; padding-top: 0; border: 0; font-size: 13px; }
  .cb .setupcard__desc { display: none; }
  .cb .setupcard .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; min-height: 44px; padding: 0 16px; font-size: 14px; }
  .cb .page--shop .sec--shop { padding-top: 32px; }
}
@media (max-width: 600px) { .cb .page--shop .hero__photo { display: none; } } /* SAGE 26 Oct: products first on phones; the 400w file is only 17 KB if a browser still fetches it */
.cb .table--setups thead td { border-top: 0; }
.cb .page--shop .sec--shop .wrap > div.woocommerce { flex-basis: 100%; } /* the [products] shortcode wraps its list on normal pages */
.cb .page--shop .wall--one { columns: auto; display: grid; max-width: 820px; }
.cb .page--shop .wall--one .quote { margin: 0; }

/* batch 4 shop pages: a setup chain inside a tick row, narrow blocks inside a section */
.cb .stack-rows .chainline { margin: 10px 0 0; padding: 10px 0 0; border-bottom: 0; }
.cb .page--shop .wrap > div.narrow { display: grid; gap: 16px; justify-items: start; }
.cb .page--shop .wrap > div.narrow > * { margin-top: 0; }
.cb .page--shop .narrow + .wall { margin-top: 32px; }
.cb .page--dna .sec--band .quote { background: rgba(255, 255, 255, .1); }
.cb .page--dna .sec--band .quote blockquote { color: #fff; }
.cb .page--dna .sec--band .quote p span { color: #9fe3bf; }
@media (max-width: 640px) {
  /* short 3-column tables (sizes, weights) fit a phone as a real table: no stacking */
  .cb .table.table--compact { display: table; font-size: 14px; }
  .cb .table--compact thead { display: table-header-group; }
  .cb .table--compact tbody { display: table-row-group; }
  .cb .table--compact tr { display: table-row; padding: 0; border: 0; }
  .cb .table--compact :is(th, td) { display: table-cell; padding: 10px 12px; }
  /* 0.10.4: a cat-page size like "28 x 28mm" or a weight stays on one line; the shape name column takes the wrap */
  .cb.mtd-page--cat-id-tags .table--compact td + td { white-space: nowrap; }
  .cb .table--compact td { border-top: 1px solid rgba(43, 36, 32, .1); }
  .cb .table--compact td::before { display: none; }
  .cb .table--compact td:first-child { white-space: normal; }
}
@media (max-width: 360px) {
  .cb.mtd-page--cat-id-tags .table--compact :is(th, td) { padding-left: 8px; padding-right: 8px; }
}

/* batch 4: a photo in the dark band's left column, a reversed split, the customer video */
.cb .page--shop .band__photo { max-width: 420px; margin-top: 24px; }
@media (min-width: 861px) { .cb .split--rev .split__photo { order: 2; } }
.cb .page--shop .sec--video .wrap { display: grid; justify-items: center; }
.cb .vidfig { display: grid; gap: 12px; justify-items: center; margin: 0; width: min(360px, 100%); }
.cb .vidfig video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--r); background: var(--sand); box-shadow: 0 40px 80px -40px rgba(43, 36, 32, .45); }
.cb .vidfig figcaption { font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }

/* 0.10.6 Never-Fall page: buttons under the hero intro; the ring video right after the intro, beside its caption;
   numbered parts list */
.cb .page--shop .hero__actions { margin-top: 22px; }
.cb .page--shop .sec--vidintro { padding-top: 0; }
.cb .page--shop .vidintro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.cb .page--shop .vidintro__fig { width: 100%; }
.cb .page--shop .vidintro__text { max-width: 46ch; margin: 0; font: 600 clamp(18px, 1.6vw, 21px)/1.55 var(--sans); color: var(--ink); }
@media (max-width: 700px) {
  .cb .page--shop .vidintro { grid-template-columns: 1fr; justify-items: center; }
  .cb .page--shop .vidintro__fig { width: min(280px, 100%); }
  .cb .page--shop .vidintro__text { font-size: 17px; }
}
.cb .page--dna .numlist { display: grid; gap: 0; margin: 18px 0; padding: 0; list-style: none; counter-reset: num; }
.cb .page--dna .numlist > li { position: relative; padding: 14px 0 14px 46px; border-top: 1px solid rgba(43, 36, 32, .1); counter-increment: num; }
.cb .page--dna .numlist > li:last-child { border-bottom: 1px solid rgba(43, 36, 32, .1); }
.cb .page--dna .numlist > li::before { content: counter(num); position: absolute; left: 0; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font: 800 14px/1 var(--sans); }

/* a video in a dark band's left column (heavy duty, hub) */
.cb .page--shop .band__media { margin-top: 24px; }
.cb .page--shop .band__media .vidfig { justify-items: start; width: min(320px, 100%); }
.cb .page--dna .sec--band .vidfig figcaption { color: #dff3e7; text-align: left; }
.cb .page--dna .sec--band .vidfig video { background: rgba(255, 255, 255, .08); }

/* three quotes in a row; a customer's own small photo on a quote card */
.cb .wall--three { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cb .wall--three .quote { margin: 0; }
.cb .quote__photo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
@media (max-width: 860px) { .cb .wall--three { grid-template-columns: 1fr; } }
/* four quotes (Never-Fall page, 0.10.6): 2 x 2 on desktop, one column on phones */
.cb .wall--four { columns: auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
.cb .wall--four .quote { margin: 0; }
@media (min-width: 861px) { .cb .wall--four { grid-template-columns: repeat(2, 1fr); } }
/* WooCommerce sale badge on shop cards: a pill on the photo (it is a <span> inside the card link) */
.cb .page.page--shop ul.products > li.product .onsale { position: absolute; top: 12px; left: 12px; z-index: 2; min-height: 0; min-width: 0; margin: 0; padding: 6px 11px; border-radius: 999px; background: var(--olive); color: #fff; font: 800 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
/* the sale pill sits at the bottom-left of the square photo, clear of text printed at the top of product photos */
.cb .page.page--shop ul.products > li.product { container-type: inline-size; }
.cb .page.page--shop ul.products > li.product .onsale { top: calc(100cqw - 38px); }

/* shop-card button (26 Oct, Wilson's phone screenshot): "Select options →" split into two shapes on 2-column phone grids.
   Now one centred pill: no wrap where it fits; on narrow cards it takes the card width, the arrow is hidden and, only at
   very large text sizes, the label wraps INSIDE the same pill (centred) instead of pushing the arrow out. */
.cb .page.page--shop ul.products > li.product a.button { max-width: 100%; justify-content: center; text-align: center; white-space: nowrap; line-height: 1.15; }
@media (max-width: 480px) {
  .cb .page.page--shop ul.products > li.product .product-action-wrap { width: 100%; }
  .cb .page.page--shop ul.products > li.product a.button { display: flex; width: 100%; min-height: 42px; padding: 9px 10px; gap: 0; font-size: 13px; white-space: normal; border-radius: 22px; }
  .cb .page.page--shop ul.products > li.product a.button .kadence-svg-iconset, .cb .page.page--shop ul.products > li.product a.button .kadence-svg-iconset:first-of-type { display: none; }
}