/* Approved marketing palette. Loaded after legacy route styles.
   White canvas with restrained taupe and deep burnt-orange actions.
   No font, copy, layout, motion, source screenshot or chrome material changes. */
html:root {
  --palette-white: #fff;
  --palette-taupe: #b9aaa0;
  --palette-taupe-deep: #a79488;
  --palette-orange: #97331b;
  --palette-orange-hover: #762513;
  --palette-coffee: #302620;
  --palette-mustard: #c49a35;
  --paper: #fff;
  --paper-2: #fff;
  --cream: #fff;
  --cream-2: #fff;
  --cream-bg: #fff;
  --porcelain: #fff;
  --wash: #fff;
  --card-bg: #fff;
  --card-2bg: #fff;
  --oat: #fff;
  --sand: #b9aaa0;
  --ink: #302620;
  --ink-soft: #51443c;
  --muted: #51443c;
  --line: #d9d0ca;
  --line-soft: #30262024;
  --espresso: #302620;
  --darker: #221a12;
  --cta: #97331b;
  --orange: #97331b;
  --orange-deep: #762513;
  --accent: #97331b;
  --gold: #c49a35;
  --mustard: #c49a35;
}

/* Primary canvas; white here is deliberate, never tinted cream. */
html
  :is(
    body,
    .hero,
    .rhero,
    .ehero,
    .aahero,
    .wfhero,
    .pr-hero,
    .rt-page,
    .rt-hero,
    .bl,
    .cs,
    .nf,
    .res-sec,
    .bd-form,
    .rt-row,
    .pay-detail,
    .pay-related,
    .jy-railwrap,
    .jy-shot figcaption,
    .pay-shot figcaption,
    .chrome,
    .cmp thead th,
    .cmp tbody th,
    .cmp td:first-of-type,
    .qa[open],
    .hero-float.prod .pimg,
    .si-hero__button--secondary:hover,
    .nav.solid .aud-switch,
    .aud-switch
  ) {
  background: var(--palette-white);
}

/* Inline section backgrounds on home and product pages override normal CSS.
   Do not target arbitrary style attributes: screenshot UI remains untouched. */
html .sec[style*="background"] {
  background: var(--palette-white) !important;
}
html .prompt-sec {
  background: var(--palette-taupe) !important;
}
html :is(.prompt-box, .qpill) {
  background: var(--palette-white);
}

/* Brandwall: exact current parent is index.vue:394, #eae0cd.
   Solid taupe grounds the white packshots and white card footers. */
html .sec:has(> .brandwall) {
  background: var(--palette-taupe) !important;
}
html .brandwall .bwc {
  --tint: #fff !important;
  background: var(--palette-white);
  border-color: #30262024;
}
html .brandwall :is(.bwc-imgs, .bwc-foot) {
  background: var(--palette-white);
}

/* Home feature colour variables are inline; change the variables, not content. */
html .feat { --fc1: #fff !important; --fc2: #fff !important; }
html .feat:nth-child(1) { --fc1: #ddba53 !important; --fc2: #d4ac3f !important; }
html .feat:nth-child(2) { --fc1: #c4dceb !important; --fc2: #a9c9df !important; }
html .feat:nth-child(3) { --fc1: #c6d9c9 !important; --fc2: #a9c7b1 !important; }
html .feat:nth-child(4) { --fc1: #efd1dd !important; --fc2: #e1b2c5 !important; }
html .feat:nth-child(5) { --fc1: #c2b3a9 !important; --fc2: #b9aaa0 !important; }
html .feat:nth-child(6) { --fc1: #fff !important; --fc2: #fff !important; }
html .feat-tag {
  background: var(--palette-coffee) !important;
  color: #fff !important;
}
html :is(.statcard, .m-card) {
  --tint: #fff !important;
  background: #fff;
  border-color: #d9d0ca;
}
html .statcard.big {
  --tint: #b9aaa0 !important;
  background: var(--palette-white);
  --muted: #302620;
}
html .statcard [style*="background-color"] {
  background-color: #fff !important;
}
html :is(.pcard.c-blush, .pcard.c-sage, .pcard.c-ochre, .pcard.c-clay) {
  background: #fff;
}
html :is(.pillar.t-blush, .pillar.t-sage, .pillar.t-ochre) {
  background: #fff;
  --muted: #302620;
}

/* Marketing panels and section transitions. Keep actual screenshots unchanged. */
html
  :is(
    .rqfig,
    .rlfig,
    .rcsfig,
    .photo,
    .pill-wrap.panel,
    .aacircle,
    .aavis,
    .fnvis,
    .wvis,
    .sgpvis,
    .wfvis,
    .fntpic,
    .abvc.c1,
    .abvc.c2,
    .abp,
    .tcar,
    .rcs,
    .tb-sec,
    .fcta,
    .rclose,
    .eclose,
    .aaclose,
    .fnclose,
    .wclose,
    .sgclose,
    .wfclose,
    .pr-close,
    .rt-soft,
    .rt-visual,
    .rt-visual.rt-yellow,
    .rt-visual.rt-peach,
    .rt-visual.rt-sage,
    .rt-close-inner,
    .pay-peach,
    .pay-sand
  ) {
  background: var(--palette-white);
  --muted: #302620;
}
html
  :is(
    .rcasecard.warm,
    .rcasecard.sage,
    .rmod.warm,
    .rmod.sage,
    .bento .big,
    .bento .warm,
    .bento .sage,
    .cxrow.me,
    .rt-benefit,
    .rt-benefit:nth-child(2),
    .rt-benefit:nth-child(3),
    .rt-case,
    .rt-case:nth-child(2),
    .rt-stage-label,
    .oc-topic,
    .oc-topic:nth-child(2),
    .oc-topic:nth-child(3)
  ) {
  background: #fff;
  border-color: #d9d0ca;
}
html :is(.rt-stage-main, .rt-stage-inset) {
  border-color: #fff;
}
html .rx {
  --card: #fff;
}
html :is(.rx .hfig .pin, .vc-play) {
  background: #fff;
}
html :is(.widestage .facepanel, .facewrap)::before {
  background: none;
}

/* Reviews has a late colour layer; neutralise that layer explicitly. */
html .or-page {
  --or-paper: #fff;
  --or-yellow: #fff;
  --or-green: #fff;
  --or-orange: #97331b;
  --or-mustard: #c49a35;
  --or-muted: #51443c;
  --or-line: #d9d0ca;
  background: #fff;
}
html .or-business-card {
  --or-card-tint: #fff !important;
  background: #fff !important;
}
html
  :is(
    .or-business-body,
    .or-review-card,
    .or-review-card:nth-child(n),
    .or-device-review,
    .or-search,
    .or-sort select,
    .or-rating-input label,
    .or-filter-row button,
    .or-filter-row button:nth-child(n),
    .or-notice,
    .or-avatar,
    .or-review-stars,
    .or-icon-button
  ) {
  --or-card-tint: #fff;
  background: #fff;
}
html :is(.or-summary, .or-closing-inner) {
  background: #fff;
  border-color: #a79488;
}
html .or-filter-row button[aria-pressed="true"] {
  background: #302620;
  color: #fff;
}
html .or-rating-bar .or-bar-track {
  background: #fff;
}
html .or-rating-bar .or-bar-fill {
  background: #97331b;
}

/* Rich burnt-orange actions. Secondary coffee and mustard remain intentional. */
html
  :is(
    .btn-cta,
    .nav-right .btn-gold,
    .oy-widget-retry,
    .si-hero__button--primary,
    .or-primary,
    .or-closing-inner .or-button
  ) {
  background: #97331b;
  border-color: #97331b;
  color: #fff;
}
html
  :is(
    .btn-cta,
    .nav-right .btn-gold,
    .oy-widget-retry,
    .si-hero__button--primary,
    .or-primary,
    .or-closing-inner .or-button
  ):hover {
  background: #762513;
  border-color: #762513;
  color: #fff;
}
html .nav-right .btn-cta {
  background: #302620;
  border-color: #302620;
}
html .btn-gold {
  background: #c49a35;
  color: #302620;
}
html :is(.palette-small-badge) {
  background: #c49a35;
  color: #302620;
}
html :focus-visible {
  outline-color: #97331b;
}

/* Chrome wordmarks, hardware renders, image pixels, product UI, semantic
   success/error colours, borders/shadows and all text/layout untouched. */

/* Taupe section copy needs coffee contrast; old muted brown is only 3.76:1. */
html
  :is(
    .sec:has(> .brandwall),
    .feat:nth-child(3n + 2),
    .statcard.big,
    .pillar.t-blush,
    .pillar.t-sage,
    .pillar.t-ochre,
    .prompt-sec,
    .fcta,
    .rclose,
    .eclose,
    .aaclose,
    .fnclose,
    .wclose,
    .sgclose,
    .wfclose,
    .pr-close,
    .rt-close-inner,
    .or-summary,
    .or-closing-inner
  )
  :is(p, small, .eyebrow, .sec-sub) {
  color: #302620;
}

/* Taupe is reserved for these few anchors rather than every feature surface. */
html .sec:has(> .brandwall) {
  background: #b9aaa0 !important;
}
html .prompt-sec {
  background: #fff !important;
}
html .statcard.big {
  --tint: #b9aaa0 !important;
  background: #b9aaa0;
}
html .or-summary {
  background: #b9aaa0;
}
html:root {
  --on: #fff;
  --on-mut: #fff;
  --blush: #b9aaa0;
  --clay: #b9aaa0;
  --sage: #b9aaa0;
  --olive: #51443c;
  --ochre: #c49a35;
  --mustard-soft: #fff;
}
html .rx {
  --tp: #fff;
  --tp2: #b9aaa0;
  --tp3: #fff;
  --card: #fff;
  --mut: #51443c;
}
html
  :is(
    .pay-hero,
    .pay-hero-shot,
    .pay-mint,
    .hero-float.prod .ppill,
    .cx-tabs,
    .cx-widget-screens,
    .cx-existing-screen,
    .cx-widget-strip,
    .bento .sage .ic,
    .bento .warm .ic,
    .bento .big .ic,
    .rmod.sage .ic,
    .rmod.warm .ic,
    .abvc.c3,
    .or-house-rules,
    .or-score-paper,
    .or-note,
    .or-draft-box
  ) {
  background: #fff;
}
html .cx-panel:nth-child(n) .cx-existing-screen {
  background: #fff;
}
html .pay-hero-shot {
  border-color: #d9d0ca;
}
html :is(.pay-hero h1 span, .rt-hero h1 em) {
  color: #97331b;
}
html
  :is(
    .rt-page p,
    .rt-visual small,
    .rt-stage-label span,
    .rt-kicker,
    .rt-number,
    .rt-benefit p,
    .rt-case p,
    .rt-link,
    .rt-pills span
  ) {
  color: #51443c;
}
html :is(.rt-stage-label, .rt-benefit, .rt-case) {
  border-color: #d9d0ca;
}
html .btn[style*="background: #efe7da"] {
  background: #fff !important;
  border-color: #d9d0ca;
}
html
  .or-page
  :is(
    .or-house-rules p,
    .or-kicker,
    .or-text-link,
    .or-intro,
    .or-business-by span,
    .or-business > .or-small,
    .or-review-card time,
    .or-author small
  ) {
  color: #51443c;
}
html .or-primary,
html .or-closing-inner .or-button {
  background: #97331b;
  border-color: #97331b;
  color: #fff;
}
html .or-primary:hover,
html .or-closing-inner .or-button:hover {
  background: #762513;
  border-color: #762513;
  color: #fff;
}
html .or-summary p {
  color: #302620;
}
html .or-closing-inner::after {
  border-color: #b9aaa033;
}
html .or-device-stage::before {
  background: radial-gradient(ellipse at 50% 60%, #97331b30, transparent 65%);
}
html :is(.tabs-row, .tab-stage, .hw-ico, .or-icon-button:hover) {
  background: #fff;
}
html .or-button:not(.or-primary):hover {
  background: #fff;
}
html .or-closing-inner .or-button:hover {
  background: #762513;
}

/* Product-story sections use .sefeat/.rcases rather than .sec. */
html section[style*="background: #ede0cd"] {
  background: #fff !important;
}
/* Serialized inline style spacing varies between source and generated HTML. */
html section[style*="#ede0cd" i],
html .sefeat[style*="background"] {
  background: #fff !important;
}
html .btn[style*="#efe7da" i] {
  background: #fff !important;
  border-color: #d9d0ca;
}
html .bd .rt,
html .rt {
  --rt-bg: #fff !important;
  background: #fff;
}