/* The ready-mix side of CrusherOS. Same layout language as the crusher site, a
   different colour: concrete plants are green here, with the stripe bands used on
   batching plant signage. Every pair below is checked by the contrast test. */
:root{
  /* --rmc and --rmc-ink come from the shared palette in brand.css. They used to
     be redefined here, and because this sheet loads after brand.css on this page
     only, the RMC green differed between the two pages. Only the two tokens this
     page alone needs are declared here, and both point at the same palette. */
  --rmc-2:var(--g-700);--rmc-soft:var(--g-50);
}
body.rmc h2 em,body.rmc h1 em{color:var(--rmc-ink)}
/* On the dark hero the deep green disappears, so the bright green is used there. */
body.rmc .hero-band h1 em,body.rmc .hero-band h2 em,body.rmc .band--cta h2 em{color:#4ade80}
body.rmc .btn.solid{background:var(--rmc-ink);color:#fff;box-shadow:0 10px 26px rgba(11,98,49,.28)}
body.rmc .hero-band .btn.solid{background:#4ade80;color:#06301a;box-shadow:0 10px 26px rgba(61,220,132,.25)}
body.rmc .hero-band .btn.solid:hover{background:#7ff0b0;color:#06301a}
body.rmc .band--cta .btn.solid{background:transparent}
body.rmc .btn.solid:hover{background:var(--rmc-2)}
body.rmc a:focus-visible,body.rmc button:focus-visible,body.rmc input:focus-visible{outline-color:var(--rmc)}
body.rmc .skip{background:var(--rmc-ink);color:#fff}
.stripe-band{background-image:repeating-linear-gradient(135deg,rgba(15,122,61,.12) 0,rgba(15,122,61,.12) 10px,transparent 10px,transparent 20px)}
.rmc-hero{position:relative;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem) clamp(2.5rem,5vw,4rem);background:var(--rmc-soft);color:var(--ink);overflow:hidden}
.rmc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(135deg,rgba(15,122,61,.10) 0,rgba(15,122,61,.10) 12px,transparent 12px,transparent 26px)}
.rmc-hero>*{position:relative;z-index:1}
.rmc-hero .tag{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-weight:700;color:var(--rmc-ink);background:#fff;padding:.4rem .9rem;border-radius:999px}
.rmc-hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.01em}
.rmc-hero .script{font-size:1.2rem;color:var(--rmc-ink);font-weight:700;margin:.6rem 0 0}
.rmc-hero .lead{max-width:56ch;margin:1rem 0 1.6rem;color:var(--ink-3)}
.rmc-wrap{max-width:1120px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem)}
.rmc-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.8rem}
.rmc-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--rmc);border-radius:14px;padding:1.3rem}
.rmc-card h3{font-size:1.1rem;margin-bottom:.45rem;color:var(--ink)}
.rmc-card p{margin:0;color:var(--ink-3);font-size:.97rem}
.rmc-steps{counter-reset:step;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.8rem}
.rmc-step{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.2rem 1.2rem 3.2rem;position:relative}
.rmc-step::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1.1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--rmc-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.rmc-step strong{display:block;margin-bottom:.3rem}
.rmc-step p{margin:0;color:var(--ink-3);font-size:.95rem}
.rmc-trial{background:var(--ink);color:#fff;border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.2rem;align-items:center;grid-template-columns:minmax(260px,1.4fr) auto}
.rmc-trial h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem)}
.rmc-trial p{margin:.6rem 0 0;color:var(--muted-light);max-width:52ch}
.rmc-compare{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.96rem}
.rmc-compare th,.rmc-compare td{border:1px solid var(--line);padding:.75rem .9rem;text-align:left;vertical-align:top}
.rmc-compare thead th{background:var(--rmc-soft);color:var(--rmc-ink);font-weight:800}
.rmc-compare caption{text-align:left;color:var(--muted);padding-bottom:.6rem}
@media (max-width:760px){.rmc-trial{grid-template-columns:1fr}}

/* The hero sits on light green, so a white-outlined button would vanish on it. */
body.rmc .rmc-hero .btn.ghost-light{border-color:var(--rmc-ink);color:var(--rmc-ink);background:#fff}
body.rmc .rmc-hero .btn.ghost-light:hover{background:var(--rmc-soft)}
/* .lead is written for dark panels; on these white sections it needs dark ink. */
body.rmc .rmc-wrap .lead,body.rmc .rmc-hero .lead{color:var(--ink-3);max-width:60ch}
body.rmc .rmc-trial p{color:#e7e5e0}

/* ── The cubic-metre card: the one number an RMC owner argues about ───────── */
.meter-band{background:linear-gradient(180deg,#0b1116,#12201a);color:#fff;padding:clamp(2rem,4vw,3.4rem) clamp(1rem,4vw,3rem)}
.meter-wrap{max-width:1500px;margin:0 auto;display:grid;gap:clamp(1.4rem,3vw,2.6rem);grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}
.meter-band .kicker{margin:0 0 .6rem;font-size:.76rem;letter-spacing:.16em;font-weight:800;color:#4ade80}
.meter-band h2{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1;text-transform:uppercase}
.meter-band h2 em{font-style:normal;display:block;color:#4ade80}
.meter-band .lead.dark-text{color:#dbe7e1}
.muted-note{margin:1rem 0 0;font-size:.82rem;color:#9cb0b8;max-width:54ch}
.meter-card{margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:1.3rem;backdrop-filter:blur(3px)}
.meter-card figcaption{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#9cb0b8;margin-bottom:.9rem}
.meter-rows{display:grid;gap:.5rem;margin-bottom:1rem}
.meter-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem .7rem;border-radius:10px;background:rgba(255,255,255,.05);font-size:.92rem}
.meter-rows b{font-family:var(--display);font-size:1.15rem}
.meter-rows .minus b{color:#e0a32e}
.meter-rows .total{background:rgba(61,220,132,.16);border:1px solid rgba(61,220,132,.4)}
.meter-rows .total b{color:#4ade80;font-size:1.35rem}
.meter-head{margin:0 0 .5rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#9cb0b8}
.meter-split ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.meter-split li{display:flex;justify-content:space-between;font-size:.86rem;color:#dbe7e1;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:.3rem}
.meter-split b{font-variant-numeric:tabular-nums}
.meter-foot{margin:1rem 0 0;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem;color:#dbe7e1}
.meter-foot b{font-family:var(--display);font-size:1.25rem;color:#fff}
.flow-wrap.single{grid-template-columns:minmax(0,1fr);max-width:1100px}
body.rmc .rmc-wrap h2 em{display:block;color:var(--rmc-ink);font-style:normal}
body.rmc .rmc-wrap h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
@media (max-width:900px){.meter-wrap{grid-template-columns:1fr}}