/* ============================================================
   ParkOS Lite — Clearfork RV Park (private demo)
   Shared design system: operational SaaS, West-Texas premium.
   ============================================================ */

:root {
  /* ── Brand palette (named roles, not raw hex everywhere) ── */
  --forest:        #1f3d2f;   /* deep forest green — primary */
  --forest-deep:   #15291f;   /* darker sections */
  --river:         #2f7da6;   /* river blue accent */
  --river-soft:    #e6f1f6;
  --gold:          #c79a3e;   /* revenue / opportunity highlight */
  --gold-soft:     #f6edd8;

  --bg:            #f4efe6;   /* warm tan background base */
  --bg-raised:     #faf6ee;   /* raised tan */
  --surface:       #ffffff;   /* dashboard cards */
  --ink:           #1c2722;   /* text primary */
  --muted:         #5d6b63;   /* text muted */
  --dim:           #8a958d;   /* text dim */
  --border:        #e4ddd0;   /* hairline */
  --border-strong: #d4ccbb;

  /* ── Status colors ── */
  --st-occupied:   #2f7da6;
  --st-available:  #2f8f5b;
  --st-pending:    #c79a3e;
  --st-maint:      #8a7a52;
  --st-paid:       #2f8f5b;
  --st-due:        #c0552f;
  --st-due-bg:     #fbe9e2;

  --shadow-sm: 0 1px 2px rgba(28,39,34,.06), 0 1px 3px rgba(28,39,34,.05);
  --shadow:    0 4px 14px rgba(28,39,34,.08), 0 2px 6px rgba(28,39,34,.05);
  --shadow-lg: 0 18px 48px rgba(28,39,34,.16);
  --radius:    16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* ── Guest-facing readability floor (design-system level) ──
   html sets the rem base at 18px so the whole type scale tracks it. */
html { scroll-behavior: smooth; font-size: 18px; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-size: 1rem; }
label { font-size: 1rem; font-weight: 600; }
p, li { font-size: 1.05rem; }
small, .text-xs, .text-sm { font-size: 0.95rem !important; }
h1, h2, h3, .serif { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.12; letter-spacing: -.01em; }
a { color: var(--river); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--tan   { background: var(--bg); }
.section--white { background: var(--bg-raised); }
.section--forest{ background: var(--forest-deep); color: #eef3ef; }
.section--forest h2, .section--forest h3 { color: #fff; }
.section--forest .muted { color: rgba(238,243,239,.7); }

.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.section--forest .eyebrow { color: var(--gold); }
.h-sec { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.12; margin: 0 0 14px; }
.lead  { font-size: 1.15rem; color: var(--muted); max-width: 70ch; margin: 0 0 28px; }
.section--forest .lead { color: rgba(238,243,239,.78); }
.muted { color: var(--muted); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; text-decoration: none; }
.btn--primary { background: var(--forest); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #244736; }
.btn--gold { background: var(--gold); color: #2a2410; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-sm); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--forest); background: rgba(31,61,47,.04); }
.btn--on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.btn--on-dark:hover { background: rgba(255,255,255,.18); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Cards ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card__num { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--gold); }
.card h3 { font-size: 19px; margin: 6px 0 8px; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── KPI cards ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.kpi__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.kpi__value { font-family: 'DM Serif Display', serif; font-size: 30px; margin-top: 4px; color: var(--ink); }
.kpi--revenue .kpi__value { color: var(--gold); }
.kpi--good .kpi__value { color: var(--st-available); }
.kpi--due .kpi__value { color: var(--st-due); }

/* ── Status badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--occupied  { color: var(--st-occupied); background: var(--river-soft); }
.badge--available { color: var(--st-available); background: #e3f3ea; }
.badge--pending   { color: var(--st-pending); background: var(--gold-soft); }
.badge--maint     { color: var(--st-maint); background: #efeadd; }
.badge--paid      { color: var(--st-paid); background: #e3f3ea; }
.badge--due       { color: var(--st-due); background: var(--st-due-bg); }
.badge--hold      { color: var(--st-maint); background: #efeadd; }
.badge--open      { color: var(--dim); background: #eee9de; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.t th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--bg-raised); white-space: nowrap; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
table.t tr:last-child td { border-bottom: none; }
table.t tbody tr:hover { background: rgba(47,125,166,.04); }
.t__action { color: var(--river); font-weight: 600; font-size: 13px; white-space: nowrap; }

/* Wide / mid table modifiers — many-column tables (waitlist, payments) need
   more room so the far-right Action column never clips. The .table-wrap card
   scrolls horizontally (desktop, tablet, mobile) instead of squeezing. */
table.t--wide, table.t--mid { min-width: 0; }  /* fill the container; no forced horizontal scroll on desktop/tablet */
.t--wide th, .t--mid th, .t--wide td, .t--mid td { padding: 11px 12px; font-size: 13.5px; }
.t--wide th:last-child, .t--wide td:last-child,
.t--mid th:last-child,  .t--mid td:last-child { min-width: 150px; white-space: nowrap; }

/* ── Rent roll backend dashboard ── */
.rr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rr-exports { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-exports .btn { font-size: 12.5px; padding: 9px 13px; }
[data-rr-panel] { margin-top: 2px; }
.section--forest .card h3 { color: var(--ink); }      /* card titles stay readable on dark sections */
.kpi--pending .kpi__value { color: var(--st-pending); }
.badge--vacant { color: var(--st-due); background: var(--st-due-bg); }
.rr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); background: var(--forest-deep); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 13.5px; max-width: 90vw; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 80; }
.rr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.report-card { display: flex; flex-direction: column; gap: 8px; }
.report-card .report-ico { font-size: 22px; }
@media (max-width: 700px) { .rr-head { align-items: flex-start; } .rr-exports { width: 100%; } }

/* ── Forecasting visuals ── */
.fc-rows { display: grid; gap: 14px; }
.fc-row__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; color: var(--ink); }
.fc-row__top b { font-family: 'DM Serif Display', serif; font-weight: 400; }
.fc-track { height: 11px; border-radius: 999px; background: #ece6d8; overflow: hidden; }
.fc-fill { height: 100%; border-radius: 999px; background: var(--gold); }
.fc-fill--river { background: var(--river); }
.fc-fill--good  { background: var(--st-available); }
.fc-fill--gold  { background: var(--gold); }
.fc-fill--due   { background: var(--st-due); }
/* 12-month seasonality bar chart */
.fc-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 210px; padding-top: 8px; }
.fc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.fc-col__bar { width: 100%; max-width: 30px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--gold), #a9802f); transition: filter .15s; }
.fc-col:hover .fc-col__bar { filter: brightness(1.08); }
.fc-col__m { font-size: 10px; font-weight: 600; color: var(--dim); margin-top: 7px; }
.fc-col__v { font-size: 9.5px; color: var(--dim); }
@media (max-width: 640px) { .fc-chart { height: 170px; gap: 3px; } .fc-col__v { display: none; } }

/* ── Forecast combo chart: gold occupancy bars + river-blue revenue line ── */
.fcx-svg { width: 100%; height: auto; display: block; }
.fcx-svg text { font-family: 'Inter', system-ui, sans-serif; }
.fcx-grid { stroke: rgba(28,39,34,.10); stroke-width: 1; }
.fcx-axis { stroke: rgba(28,39,34,.22); stroke-width: 1; }
.fcx-month { fill: var(--ink); font-size: 11px; font-weight: 700; }
.fcx-pct { fill: var(--muted); font-size: 9.5px; }
.fcx-revline { fill: none; stroke: var(--river); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fcx-dot { fill: #fff; stroke: var(--river); stroke-width: 2; }
.fcx-revlabel { fill: var(--ink); font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.fcx-legend { fill: var(--muted); font-size: 11px; font-weight: 600; }

/* ── Filter chips ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; transition: all .14s; }
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip.is-active { background: var(--forest); color: #fff; border-color: var(--forest); }

/* ── Pad grid ── */
.pad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pad { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 16px; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s; }
.pad:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pad__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pad__id { font-weight: 700; font-size: 15px; }
.pad__meta { font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.pad__meta b { color: var(--ink); font-weight: 600; }
.pad__rate { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--forest); }
.pad[hidden] { display: none; }
.pad--demand { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow-sm); }
.pad--demand .pad__rate { color: var(--gold); }
.pad__demand { display: inline-block; margin-left: 8px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #7a5e1f; background: var(--gold-soft); border: 1px solid #e7d6a8; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }

/* ── Hero (investor split-screen) ── */
.os-hero { background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%); color: #eef3ef; padding: 84px 0 72px; }
.os-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.os-hero h1 { font-size: clamp(30px, 4.6vw, 50px); color: #fff; margin: 0 0 18px; }
.os-hero p { color: rgba(238,243,239,.82); font-size: 17px; max-width: 52ch; }
.os-hero__note { font-size: 12.5px; color: rgba(238,243,239,.6); margin-top: 14px; max-width: 48ch; }
.os-hero .badge { background: rgba(255,255,255,.92); }

/* dashboard preview card on hero */
.dash-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px; color: var(--ink); }
.dash-card__bar { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.dash-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.dash-card__title { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dash-card .kpi-grid { grid-template-columns: repeat(2, 1fr); }
.dash-card .kpi { background: var(--bg-raised); }

/* ── Video hero (customer page) ── */
.v-hero { position: relative; min-height: 78vh; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--forest-deep); }
.v-hero__media, .v-hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.v-hero__fallback { background: linear-gradient(160deg, #2a3b2e, #16241b); }
.v-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,18,13,.55) 0%, rgba(10,18,13,.72) 100%); }
.v-hero__inner { position: relative; z-index: 2; padding: 90px 0; }
.v-hero h1 { font-size: clamp(32px, 5.4vw, 58px); margin: 0 0 16px; max-width: 16ch; }
.v-hero h1 .gold { color: var(--gold); }
.v-hero p { font-size: 18px; color: rgba(255,255,255,.86); max-width: 56ch; margin: 0 0 22px; }
.v-hero__bullets { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; max-width: 40ch; }
.v-hero__bullets li { position: relative; padding-left: 26px; font-size: 15px; color: rgba(255,255,255,.9); }
.v-hero__bullets li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.v-hero__urgency { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.78); max-width: 52ch; }

/* ── Cinematic CSS motion scene (golden-hour RV-park horizon) ── */
.v-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1a1230; }
.v-scene__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #241a3d 0%, #3d2a4e 24%, #8a4a5a 50%, #cf7d49 70%, #efb45a 86%, #f6d27a 100%);
  background-size: 100% 200%;
  animation: skyShift 26s ease-in-out infinite alternate;
}
.v-scene__sun {
  position: absolute; left: 50%; bottom: 30%; width: 360px; height: 360px; margin-left: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,178,.95) 0%, rgba(247,196,92,.75) 26%, rgba(226,126,58,.35) 48%, rgba(226,126,58,0) 70%);
  filter: blur(2px);
  animation: sunRise 30s ease-in-out infinite alternate;
}
.v-scene__haze {
  position: absolute; left: 0; right: 0; bottom: 22%; height: 40%;
  background: linear-gradient(180deg, rgba(247,196,120,0) 0%, rgba(240,170,96,.32) 60%, rgba(207,125,73,.5) 100%);
  mix-blend-mode: screen;
}
.v-scene__cloud {
  position: absolute; height: 26px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,224,186,.5), rgba(214,142,120,.28));
  filter: blur(7px); opacity: .7;
}
.v-scene__cloud--1 { top: 20%; width: 280px; animation: cloudDrift 48s linear infinite; }
.v-scene__cloud--2 { top: 32%; width: 200px; height: 18px; opacity: .55; animation: cloudDrift 66s linear infinite; animation-delay: -20s; }
.v-scene__cloud--3 { top: 14%; width: 160px; height: 14px; opacity: .45; animation: cloudDrift 80s linear infinite; animation-delay: -50s; }
.v-scene__mesa, .v-scene__ridge { position: absolute; left: 0; width: 100%; }
.v-scene__mesa  { bottom: 26%; height: 16%; }
.v-scene__mesa path  { fill: #5a3550; opacity: .7; }
.v-scene__ridge { bottom: 18%; height: 20%; }
.v-scene__ridge path { fill: #3a2238; }
.v-scene__park {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, #2a1b30 0%, #160e1f 100%);
}
.v-rv {
  position: absolute; bottom: 30%; width: 30px; height: 13px; border-radius: 3px 3px 1px 1px;
  background: #120b1a;
  box-shadow: 0 0 14px 2px rgba(247,196,92,.18);
}
.v-rv::after { /* lit window glow */
  content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 5px; border-radius: 1px;
  background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255,210,122,.85);
  animation: windowFlicker 7s ease-in-out infinite;
}
.v-rv--tall { height: 18px; bottom: 30%; }
.v-rv--tall::after { animation-delay: -3s; }

@keyframes skyShift { from { background-position: 0 0; } to { background-position: 0 38%; } }
@keyframes sunRise  { from { transform: translateY(26px) scale(.96); opacity: .92; } to { transform: translateY(-10px) scale(1.04); opacity: 1; } }
@keyframes cloudDrift { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 320px)); } }
@keyframes windowFlicker { 0%,100% { opacity: .9; } 45% { opacity: .55; } 70% { opacity: 1; } }

/* ── Reservation form ── */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { font: inherit; font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--river); outline-offset: 1px; border-color: var(--river); }

/* ── Match result ── */
.match-card { border: 2px solid var(--st-available); }
.match-score { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--st-available); }
.score-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 8px; }
.score-bar > span { display: block; height: 100%; background: var(--st-available); border-radius: 999px; }
.score-bar.is-low > span { background: var(--gold); }

/* ── Flow strip ── */
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.flow__step { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13.5px; font-weight: 600; color: var(--forest); display: flex; align-items: center; box-shadow: var(--shadow-sm); }
.flow__arrow { align-self: center; color: var(--gold); font-weight: 700; }

/* ── Compare columns ── */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.compare__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.compare__col--win { border: 2px solid var(--gold); box-shadow: var(--shadow); }
.compare__col h4 { margin: 0 0 12px; font-size: 16px; font-family: 'Inter', sans-serif; font-weight: 700; }
.compare__col ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.compare__col li { margin-bottom: 6px; }

/* ── Disclaimer + notes ── */
.disclaimer { background: var(--gold-soft); border: 1px solid #e7d6a8; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; color: #6b561f; margin: 16px 0; }
.note { font-size: 13px; color: var(--dim); }
.preview-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 3px 10px; }

/* ── Testimonials (SAMPLE / illustrative content) ── */
.tcard { display: flex; flex-direction: column; gap: 12px; }
.tcard__mark { font-family: 'DM Serif Display', serif; font-size: 44px; line-height: .4; color: var(--gold); height: 20px; }
.tcard__quote { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.tcard__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.tcard__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--forest); }
.tcard__name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.tcard__role { font-size: 12.5px; color: var(--muted); }

/* ── Trailing-12-month trend line chart (SAMPLE; lives on a forest section) ── */
.trend-svg { width: 100%; height: auto; display: block; }
.trend-svg text { font-family: 'Inter', system-ui, sans-serif; }
.trend-svg .trend-grid { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.trend-svg .trend-axis { fill: var(--muted); font-size: 12px; }
.trend-svg .trend-month { fill: var(--ink); font-size: 11.5px; font-weight: 700; }
.trend-svg .trend-area { fill: url(#trendFill); }
.trend-svg .trend-line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .trend-dot { fill: var(--forest); stroke: var(--gold); stroke-width: 2; }
.trend-svg .trend-dot--now { stroke-width: 2.5; }
.trend-svg .trend-now { fill: var(--ink); font-size: 13px; font-weight: 700; }
.trend-svg .trend-cap { fill: rgba(199,154,62,.85); font-size: 11px; }
.trend-wrap { position: relative; }
.trend-svg .trend-hit { fill: transparent; cursor: pointer; }
.trend-svg .trend-hit:focus { outline: none; }
.trend-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px 12px;
  font-size: 13px; line-height: 1.35; white-space: nowrap;
}
.trend-tip[hidden] { display: none; }
.trend-tip__sub { color: var(--muted); }
.trend-tip::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface);
}

/* ── Footer ── */
.foot { background: var(--forest-deep); color: rgba(238,243,239,.7); padding: 40px 0; font-size: 13.5px; }
.foot a { color: var(--gold); }

/* ── Sticky mobile CTA bar (customer page) ── */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(21,41,31,.97); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.1); }
.mbar .btn { padding: 12px 8px; font-size: 14px; }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .os-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .grid-2, .grid-3, .grid-4, .compare, .field-grid { grid-template-columns: 1fr; }
  .v-hero { min-height: auto; }
  .mbar { display: grid; }
  body { padding-bottom: 76px; }
  .section { padding: 52px 0; }
  .flow__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card--hover:hover, .pad:hover, .btn:hover { transform: none; }
  .v-scene__sky, .v-scene__sun, .v-scene__cloud, .v-rv::after { animation: none; }
  .v-scene__sun { transform: none; }
}