/* Shared colour roles: original Botify palette, sand-first surfaces. */
:root {
  --paper: #f8f4e8;
  --white: #fffefa;
  --ink: #0a1b3a;
  --copy: var(--ink);
  --blue: #3768b9;
  --teal: #25b99c;
  --orange: #f39a3f;
  --line: rgba(10, 27, 58, 0.14);
}

body,
.hero-tail,
.feature-story.website,
.feature-story.assistant,
.feature-story.care,
.business-journeys,
.brand-chapter,
.process,
.closing,
.journey {
  background: var(--paper);
  color: var(--ink);
}

.hero-tail,
.business-journeys,
.brand-chapter,
.closing {
  border-top: 1px solid var(--line);
}
.hero-tail {
  border-bottom: 1px solid var(--line);
}
.opening-atmosphere,
.opening-editorial .opening-atmosphere,
.page-hero,
.hero {
  background: var(--paper);
}
.closing::before {
  background: none;
}

/* White text from the former dark chapters must not survive on sand. */
.assistant .kicker,
.assistant .intro,
.assistant .text-link,
.assistant figcaption,
.journey-heading .kicker,
.journey-heading .intro,
.journey-type,
.journey-copy > p,
.journey-copy .text-link,
.route-heading,
.customer-route figcaption,
.closing p,
.closing .text-link,
.journey .kicker,
.journey .intro,
.journey .text-link,
.journey-card p {
  color: var(--ink);
}
.journey-copy .text-link,
.journey-card,
.closing .text-link,
.route-stops li {
  border-color: var(--line);
}

/* One warm card surface replaces blue, mint, and peach panels. */
.service-summary,
.service-summary.summary-ai,
.service-summary.summary-care,
.price-card,
.price-card.blue,
.workflow-step,
.brand-board,
.brand-browser,
.hero-website,
.hero-enquiry,
.route-ticket,
.brief-form,
.feature-frame,
.page-illustration,
.support-layout > img,
.journey-visual,
.service-card.featured,
.service-card.ai,
.service-card.care,
.business-panel,
.business-panel.active,
.business-panel:nth-child(2),
.business-panel:nth-child(3) {
  background: var(--white);
  color: var(--ink);
}
.price-card.blue,
.route-ticket,
.brand-board {
  border: 1px solid var(--line);
}
.price-card.blue > p,
.blue .price-value span {
  color: var(--ink);
}
.check-list li::before,
.blue .check-list li::before {
  color: var(--blue);
}
.blue .check-list {
  border-color: var(--line);
}
.price-card.blue .plan-name {
  color: var(--blue);
}

/* Keep all action fills on the exact original blue, including hover. */
.button.primary,
.button.dark-button,
.closing .button.light-button,
.price-card.blue .button.light-button {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.button.primary:hover,
.button.dark-button:hover,
.closing .button.light-button:hover,
.price-card.blue .button.light-button:hover {
  background: var(--blue);
  color: var(--white);
}
.button.secondary,
.button.light-button,
.button.secondary:hover {
  background: var(--white);
  color: var(--ink);
}
.closing .button.light-button svg,
.price-card.blue .button.light-button svg {
  background: transparent;
}
.button svg,
.button:hover svg,
.button.secondary svg,
.button.secondary:hover svg,
.button.light-button svg,
.button.light-button:hover svg {
  background: transparent;
}

/* Business selection: blue shows state, not a full blue section. */
.journey-controls button {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.journey-controls button:hover {
  border-color: var(--blue);
}
.journey-controls button[aria-selected="true"] {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.route-heading svg,
.route-stops li svg,
.assistant .feature-list li::before {
  stroke: var(--blue);
  border-color: var(--blue);
}
.route-stops::before {
  background: var(--line);
}
.route-stops li i {
  background: var(--blue);
}

/* Vignette and icon surfaces use sand instead of new blue tints. */
.hero-web-emblem,
.hero-chat-symbol,
.hero-question,
.hero-reply,
.brand-mini-layout span,
.brand-mini-layout span:nth-child(2),
.brand-mini-layout span:nth-child(3),
.workflow-symbol,
.stage-layout b,
.stage-layout span {
  background: var(--paper);
  color: var(--ink);
}
.hero-web-lines span {
  background: var(--line);
}
.hero-reply {
  border: 1px solid var(--line);
}
.hero-chat-symbol {
  color: var(--blue);
}
.workflow-step.is-current .workflow-symbol {
  background: var(--blue);
  color: var(--white);
}
.workflow-step summary:hover {
  background: var(--paper);
}
.workflow-rail {
  background: var(--line);
}
.workflow-step::before {
  background: var(--paper);
  border-color: var(--paper);
  box-shadow: 0 0 0 3px var(--paper);
}
.workflow-step.is-current::before {
  background: var(--blue);
}
.hero-orbit,
.hero-orbit path:nth-child(2),
.hero-orbit path:last-child,
.opening-atmosphere span,
.opening-atmosphere span:last-child {
  stroke: var(--line);
  border-color: var(--line);
}
.brand-principles > div {
  border-color: var(--line);
}
::selection {
  background: var(--blue);
  color: var(--white);
}