/* BackBy Outdoors: token and imagery overrides layered on the copied styles.css.
   Hero framing keeps photographs visible beside copy and above mobile copy.
   System font stack only. No third-party assets. */

:root {
  --ink: #14211f;          /* deep pine ink */
  --ink-soft: #4b5a55;     /* slate green */
  --paper: #f4efe6;        /* warm stone */
  --paper-warm: #eae2d3;   /* darker stone */
  --white: #fdfbf6;
  --indigo: #a8421a;       /* ember: eyebrows, primary buttons, story numbers */
  --indigo-dark: #7e2f10;  /* deep ember: links, hover */
  --indigo-soft: #f6e2d4;  /* ochre wash */
  --pine: #1e6a4b;
  --pine-soft: #dcebe1;
  --amber: #935505;
  --amber-soft: #faedd2;
  --coral: #b03a2c;
  --coral-soft: #fbe3dd;
  --line: #d9d0c1;
  --line-dark: #c3b8a5;
  --shadow: 0 24px 70px rgba(20, 33, 31, 0.14);
  /* Outdoors-only tokens */
  --od-slate: #24383f;       /* dusk slate for dark panels */
  --od-slate-deep: #182a30;
  --od-sand: #f2c69c;        /* eyebrow color on dark panels */
  --od-slate-text: #cfdad8;  /* secondary text on dark panels */
  --od-contours: url("topo-terrain.jpg");
}

/* Header and brand */
.site-header { border-bottom-color: rgba(20, 33, 31, 0.12); background: rgba(244, 239, 230, 0.94); }
.brand-icon { box-shadow: 0 4px 12px rgba(168, 66, 26, 0.22); }
.brand .brand-variant {
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.mobile-menu-panel { box-shadow: 0 18px 30px rgba(20, 33, 31, 0.1); }

/* Hero: warm trail companions. White copy sits over the left third. */
.hero-photo {
  background-color: #152424;
  background-image: linear-gradient(90deg, rgba(15, 29, 26, 0.86) 0%, rgba(15, 29, 26, 0.66) 36%, rgba(15, 29, 26, 0.08) 72%), url("hero-community.jpg");
  background-position: center;
  background-size: cover;
}
.hero-photo .eyebrow { color: var(--od-sand); }
.hero-photo { padding: 56px 48px; }
.hero-copy { max-width: 48%; }
.hero-copy h1 { font-size: clamp(2.8rem, 4.2vw, 3.75rem); line-height: 1.06; }
.hero-photo .hero-lead { font-size: 1.1rem; line-height: 1.55; }
.hero-photo .hero-assurances li::before { color: #9fd9bd; }
.hero-photo .btn.primary { background: var(--indigo); color: white; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); }
.hero-photo .btn.primary:hover { background: var(--indigo-dark); }
.hero-plan { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28); }

/* Product story stages: muted stone, sage, and dusk rose */
.stage-indigo { background: #e6d5c0; }
.stage-pine { background: #cfdcd0; }
.stage-coral { background: #e4cfc6; }
.device-stage::before { border-color: rgba(255, 255, 255, 0.62); }
.app-shot, .phone-demo { box-shadow: 0 30px 65px rgba(20, 33, 31, 0.24); }

/* Dark panels: dusk slate instead of indigo, ember-sand eyebrows */
.state-demo { background: var(--od-slate-deep); }
.state-demo .eyebrow { color: var(--od-sand); }
.state-copy p:last-child { color: var(--od-slate-text); }
.state-rail::before { background: #4a5f63; }
.rail-dot { border-color: var(--od-slate-deep); }
.state-rail small { color: #aebfbc; }

.planner-card { background: var(--od-slate); }
.planner-card .role-summary { color: var(--od-slate-text); }
.planner-ui small { color: #c9d8dc; }
.planner-ui .role-action { color: var(--indigo-dark); }
.backer-card { border-color: #b7d3c4; }

.org-card, .page-cta, .org-responsibility-flow { background: var(--od-slate); }
.org-card .eyebrow { color: var(--od-sand); }
.org-card p:last-child, .page-cta p { color: var(--od-slate-text); }
.org-codesign .page-cta { box-shadow: 0 24px 60px rgba(20, 33, 31, 0.35); }
.org-flow-arrow span { background: #7d9a98; }
.org-flow-arrow em { color: var(--od-slate-text); }
.org-flow-arrow b { color: #a9bfbc; }
.person-arrow { color: #9fb5b2; }
.org-flow-boundary { color: #eef2f0; }
.org-flow-boundary > span { color: var(--od-sand); }

/* Warm and green accents */
.privacy-flow { background: #dfe9e0; }
.readiness-card { border-color: #dcc08a; }
.practice-warning { border-left-color: var(--amber); }
.org-practice-visual figcaption { box-shadow: 0 12px 30px rgba(30, 106, 75, 0.26); }
.org-photo-note { box-shadow: 0 16px 36px rgba(20, 33, 31, 0.2); }

/* One subdued terrain texture across every contour-backed surface.
   Multiply preserves each surface color; the center fades behind the copy. */
.scenarios-section { background: var(--paper-warm); position: relative; }
.access-card { position: relative; overflow: hidden; }
.scenarios-section, .access-card { isolation: isolate; }
.scenarios-section::before, .access-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--od-contours) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 20%, #000 85%);
  pointer-events: none;
}
.scenarios-section > .container, .access-card > * { position: relative; }
.scenarios-section .eyebrow, .access-card .eyebrow { color: var(--indigo-dark); }
.access-card > p:not(.eyebrow) { color: #3b4a44; }

@media (max-width: 760px) {
  .hero-photo {
    background-image: none;
    padding: calc(clamp(220px, 56vw, 400px) + 28px) 24px 150px;
  }
  .hero-photo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(220px, 56vw, 400px);
    background: url("hero-community.jpg") 75% center / cover no-repeat;
  }
  .hero-copy { max-width: 100%; }
  .hero-copy h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); }
}

@media (max-width: 390px) {
  .brand .brand-variant { font-size: 0.6rem; letter-spacing: 0.1em; }
}