/* ==========================================================================
   marketingagency.css — page-scoped overrides for marketingagency.html
   Loaded AFTER styles.css. Everything is scoped under body.ma so the shared
   design system (and the index) is untouched. Two jobs:
     1. A distinct dark hero with a live staff-readiness board.
     2. A reordered colour journey so the page reads as its own thing.
   Reuses the existing tokens in styles.css — no new fonts, no inline CSS.
   ========================================================================== */

/* -- Hero: dark plum instead of the index's light paper hero ------------- */
.ma .hero{
  background:linear-gradient(140deg,#2C1F4E 0%,#1E1733 52%,#151024 100%);
  border-bottom:var(--bd);
}
.ma .hero h1{color:#fff}
.ma .hero p.sub{color:rgba(255,255,255,.82)}
.ma .hero .trusted{border-top-color:rgba(255,255,255,.22)}
.ma .hero .trusted .lab{color:rgba(255,255,255,.6)}

/* -- Readiness board: the hero's right-hand visual ----------------------- */
.rb-stage{position:relative;display:grid;place-items:center;min-height:560px}
.rb{
  width:380px;max-width:100%;background:#fff;border:var(--bd);border-radius:22px;
  box-shadow:var(--sh-lg);padding:20px;transform:rotate(-1deg)
}
.rb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rb-ttl{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.02em}
.rb-live{background:var(--coral);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:7px;border:1.5px solid var(--ink)}
.rb-meta{font-size:12px;font-weight:700;color:var(--g400)}

.rb-meter{background:var(--paper);border:var(--bd);border-radius:14px;padding:13px 14px;margin-bottom:16px}
.rb-meter-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.rb-meter-row b{font-family:var(--disp);font-size:15px;font-weight:800}
.rb-meter-row span{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--coral)}
.rb-bar{height:9px;background:#fff;border:var(--bd);border-radius:6px;overflow:hidden}
.rb-bar i{display:block;height:100%;background:var(--lime)}

.rb-list{display:flex;flex-direction:column;gap:9px}
.rb-row{display:flex;align-items:center;gap:11px;background:#fff;border:var(--bd);border-radius:13px;padding:9px 11px;box-shadow:var(--sh-sm)}
.rb-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink);flex:none}
.rb-id{flex:1;min-width:0}
.rb-id b{font-size:13.5px;font-weight:800;display:block;line-height:1.15}
.rb-id small{font-size:11px;color:var(--g400);font-weight:700}
.rb-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 9px;border-radius:20px;border:1.5px solid var(--ink);flex:none;white-space:nowrap}
.rb-chip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rb-chip.ok{background:var(--lime);color:var(--ink)}
.rb-chip.mid{background:#FFD66B;color:var(--ink)}
.rb-chip.off{background:var(--paper2);color:var(--g500)}

.rb-tag{
  position:absolute;bottom:4px;right:-10px;display:inline-flex;align-items:center;gap:7px;
  background:var(--lime);border:var(--bd);border-radius:12px;padding:9px 13px;
  font-weight:800;font-size:12.5px;box-shadow:var(--sh);transform:rotate(3deg);z-index:4
}
.rb-tag svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* -- Reordered colour journey -------------------------------------------
   Index runs pink → plum → coral → lime → ink → coral.
   This page runs lavender → teal → plum → peach → ink → plum, so a scroll
   never lines up with the index. Light bands stay light and dark bands stay
   dark, so every text/contrast rule in styles.css still holds. Uses
   background-image (not the `background` shorthand) to preserve the
   background-size/gdrift animation defined in styles.css. */
.ma .risk-bg{background-image:linear-gradient(125deg,#D8CCF2 0%,#C5B4EA 55%,#B7A4E2 100%)}
.ma .vs-bg{background-image:linear-gradient(125deg,#13384A 0%,#0F2D3C 55%,#0A222E 100%)}
.ma .feat-bg{background-image:linear-gradient(125deg,#4A3680 0%,#3B2A66 55%,#2B1E4B 100%)}
.ma .trust-bg{background-image:linear-gradient(125deg,#FFCDBE 0%,#FFB6A0 55%,#FFA388 100%)}
.ma .cta-box{background-image:linear-gradient(125deg,#4A3680 0%,#3B2A66 52%,#2B1E4B 100%)}

/* -- Responsive: board collapses like the index phone-stage did ---------- */
@media(max-width:880px){
  .rb-stage{min-height:0;margin-top:36px}
  .rb{width:100%;transform:none}
  .rb-tag{right:6px;bottom:-14px}
}