/* ============================================================================
 * wereno-renobot.css — everything /renobot needs that wereno-products.css
 * does not already provide. Loads AFTER wereno-products.css.
 *
 * Namespace: every rule is scoped under `.rb` and every class this file owns
 * is prefixed `rb-`. The only unprefixed classes referenced here are the ones
 * the base sheet owns (.wr-inner .wr-card .wr-btn .wr-link .wr-pill .wr-chip
 * .wr-band .wr-field .wr-eyebrow .wr-hand .wr-micro .wr-ex .wr-ex-badge
 * .wr-mark .wr-split .wr-real-label), and they are only ever *positioned* or
 * *contextually corrected* here, never redefined.
 *
 * Renobot's identity, held in this file:
 *   texture  = the amber field, hard rules, and TABLES
 *   micro    = Outfit 11px uppercase / .08em (the base sheet's .wr-micro)
 *   shapes   = the open-loops ledger, the decision log, the schedule bar
 *   memory   = evidentiary — why, who approved, which document says so
 *   ornaments= none, anywhere
 *   robot    = twice only (hero card corner, §11)
 *   dark     = twice only (§7 console band, §14 early-access band)
 *
 * Three theme fights recur below and are commented where they happen:
 *   a) `.rb p` (base sheet, 0-1-1) forces 18/1.8 — any 16px or 11px block must
 *      be a <div>/<span>, or a <p> carrying a (0,2,0) class of its own.
 *   b) `.wr-band p / .wr-band .wr-micro` paint text cream — a WHITE card
 *      sitting on a dark band has to claw its ink back at (0,3,0).
 *   c) normalize's `button{border:none}` and `ul[class]{list-style:none}`.
 * ========================================================================== */

/* --------------------------------------------------------- page furniture -- */
/* The wrapper paints the ground too, and it is INSIDE .content-area, so it was
   putting WeReno's green back over the product ground on every Capital page.
   Renobot escaped this only because it does not load this stylesheet. */
.rb{background:var(--wr-prod-ground)}
.rb .rb-sec--white{background:#fff}

/* Section header block. --wide caps the measure so a 48px h2 breaks well;
   --center is the counter-row band. */
.rb .rb-head{margin:0 0 40px}
.rb .rb-head--wide{max-width:760px}
.rb .rb-head--center{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.rb .rb-head__sub{max-width:620px}

/* 16px caption register. A bare <p> would inherit 18px from the base sheet. */
.rb .rb-note{font-size:16px;line-height:1.7;color:var(--wr-body)}

/* Persistent 11px label with the amber rule under it (§4). */
.rb .rb-label{padding-bottom:10px;border-bottom:3px solid var(--rb-amber);margin:0 0 24px}

@media(max-width:1024px){.rb .rb-head{margin-bottom:32px}}
@media(max-width:767px){
  .rb .rb-head{margin-bottom:24px}
  .rb .rb-note{font-size:15px}
}


/* =========================================================== §1 · HERO ==== */
.rb .rb-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center}
.rb .rb-hero__copy .wr-pill{margin:0 0 20px}
/* The highlighted-text wrapper is the theme's own widget class, and it is the
   only theme class in this markup. It carries no element id, no entrance
   animation and no stroke animator, so the SVG path paints at full length with
   zero JavaScript — but the class itself is still required, because every
   positioning rule in highlighted-text.css is scoped to it. */
.rb .rb-h1{margin:0}
.rb .rb-hero__sub{max-width:54ch}
.rb .rb-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}

/* --- the escalation card: the Human attention screen, rebuilt --------------
   ONE component, two skins. The hero carries it in charcoal on the amber field;
   §7 carries the full version in white on the dark band. The dark one is a
   modifier, never a second copy — they drifted apart the moment they were two
   blocks of CSS. */
.rb .rb-attn{
  position:relative;background:#fff;color:var(--wr-ink);
  border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow);overflow:hidden}
/* The badge is three words longer than "Example" was, so every fielded header
   in this sheet stops short of it rather than running underneath. */
.rb .rb-attn__head{
  padding:14px 212px 14px 24px;background:var(--wr-dark);color:var(--wr-cream);
  border-bottom:3px solid var(--wr-line)}
.rb .rb-attn__body{padding:20px 24px 24px}

.rb .rb-attn__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.rb .rb-attn__no{color:var(--wr-body)}
.rb .rb-attn__flag{
  display:inline-block;color:var(--wr-ink);background:var(--rb-amber);
  border:2px solid var(--wr-line);border-radius:6px;padding:4px 8px}
.rb .rb-attn__when{color:var(--wr-body)}
.rb .rb-attn__t{
  font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.018em;
  color:var(--wr-ink)}
.rb .rb-attn__sub{font-size:15px;line-height:1.55;color:var(--wr-body);margin-top:6px}

.rb .rb-attn__blk{margin-top:22px}
/* (0,2,0) and this sheet loads second, so these beat `.wr-band .wr-micro` —
   which is what keeps the §7 card readable as the light surface it is. */
.rb .rb-attn__h{
  padding-bottom:8px;margin-bottom:12px;color:var(--wr-body);
  border-bottom:1px solid rgba(20,20,20,.2)}
.rb .rb-attn__quote + .rb-attn__h{margin-top:20px}
.rb .rb-attn__line{font-size:15px;line-height:1.6;color:var(--wr-ink)}
.rb .rb-attn__stop{font-size:16px;line-height:1.55;font-weight:500;color:var(--wr-ink)}
.rb .rb-attn__quote{
  margin:12px 0 0;padding:2px 0 2px 16px;border-left:3px solid var(--rb-amber);
  font-size:15px;line-height:1.65;color:var(--wr-body)}

/* Numbered tool calls. The verbs are the product's own identifiers, so they sit
   in a code face — in Outfit they read as prose and stop being evidence. */
.rb .rb-calls{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px;
  counter-reset:rb-call}
.rb .rb-calls__i{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 10px;
  counter-increment:rb-call}
.rb .rb-calls__i::before{
  content:counter(rb-call);grid-column:1;grid-row:1 / span 2;
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:500;line-height:2;
  letter-spacing:.08em;color:var(--wr-body)}
.rb .rb-calls__i .rb-tool{grid-column:2;grid-row:1;justify-self:start}
.rb .rb-calls__a{grid-column:2;grid-row:2;font-size:13px;line-height:1.5;color:var(--wr-body)}
.rb .rb-tool{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.5;color:var(--wr-ink);background:rgba(20,20,20,.07);
  border-radius:4px;padding:1px 6px}

/* Evidence: the source table it was read from, then the row, then the time.
   Source rows are <span>, never links — a link out of a recreation is the one
   thing that would make it read as the live app. */
.rb .rb-ev{list-style:none;margin:0;padding:0}
.rb .rb-ev__row{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:6px 16px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(20,20,20,.12)}
.rb .rb-ev__row:last-child{border-bottom:0}
.rb .rb-ev__k{
  justify-self:start;color:var(--wr-ink);background:rgba(20,20,20,.07);
  border-radius:4px;padding:3px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:0;text-transform:none}
.rb .rb-ev__v{font-size:14px;line-height:1.5;color:var(--wr-body)}
.rb .rb-ev--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.rb .rb-ev--2 .rb-ev__row{border-bottom:0;padding:8px 0}

/* "Your call" is two literal buttons on the real screen, so it is two literal
   buttons here. They do nothing: this is a recreation, not a console. */
.rb .rb-attn__blk--call{margin-top:24px}
.rb .rb-call{display:flex;flex-wrap:wrap;gap:12px}
.rb .rb-call__b{
  font-family:"Outfit",sans-serif;font-size:15px;font-weight:500;line-height:1.4;
  text-align:left;color:var(--wr-ink);background:#fff;
  border:3px solid var(--wr-line);border-radius:12px;padding:11px 16px;
  box-shadow:var(--wr-shadow-sm);cursor:default}

/* --- dark skin: the hero's copy, charcoal on the amber field --------------- */
.rb .rb-attn--dark{background:var(--wr-dark);color:var(--wr-cream);overflow:visible}
.rb .rb-attn--dark .rb-attn__head{
  background:transparent;border-bottom:1px solid rgba(251,246,239,.28);
  padding:14px 150px 14px 48px}
.rb .rb-attn--dark .rb-attn__body{padding:18px 20px 20px}
.rb .rb-attn--dark .rb-attn__t{font-size:19px;color:var(--wr-cream)}
.rb .rb-attn--dark .rb-attn__line,
.rb .rb-attn--dark .rb-attn__stop{color:var(--wr-cream)}
.rb .rb-attn--dark .rb-attn__sub,
.rb .rb-attn--dark .rb-attn__no,
.rb .rb-attn--dark .rb-attn__when,
.rb .rb-attn--dark .rb-attn__h,
.rb .rb-attn--dark .rb-calls__i::before,
.rb .rb-attn--dark .rb-calls__a,
.rb .rb-attn--dark .rb-ev__v{color:rgba(251,246,239,.75)}
.rb .rb-attn--dark .rb-attn__h{border-bottom-color:rgba(251,246,239,.26)}
.rb .rb-attn--dark .rb-ev__row{border-bottom-color:rgba(251,246,239,.18)}
.rb .rb-attn--dark .rb-tool,
.rb .rb-attn--dark .rb-ev__k{color:var(--wr-cream);background:rgba(251,246,239,.14)}
.rb .rb-attn--dark .rb-call__b{background:var(--wr-cream);border-color:var(--wr-cream)}
/* The page's one piece of character, and one of only two robots on it. */
.rb .rb-attn__bot{
  position:absolute;top:-22px;left:-28px;z-index:2;
  width:56px;height:56px;display:block}

@media(max-width:1024px){
  .rb .rb-hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .rb .rb-hero__sub{max-width:62ch}
  /* Single column below 1024, so the card spans the container and the gutter is
     only ~19px at 768 — a 28px negative offset put the robot past the viewport
     edge and widened the document. 12px keeps the overlap without that. */
  .rb .rb-attn__bot{top:-18px;left:-12px}
  .rb .rb-attn--dark .rb-attn__head{padding:13px 150px 13px 44px}
}
@media(max-width:767px){
  .rb .rb-hero__grid{gap:32px}
  /* At 390px the 95% container leaves ~10px of gutter, so the robot cannot hang
     outside without widening the document — it sits inside instead. */
  .rb .rb-attn__bot{top:-20px;left:12px;width:48px;height:48px}
  /* The robot takes the left of this strip and the badge takes the right, so the
   header text is given what is left rather than running underneath either. */
  .rb .rb-attn--dark .rb-attn__head{padding:12px 140px 12px 68px}
  .rb .rb-hero__cta{gap:14px 20px;margin-top:24px}
}


/* ==================================================== §2 · STATUS BAND ==== */
/* A label on the page, not a section of it: 48px rhythm, 6px amber top rule,
   no imagery. */
.rb .rb-status{position:relative;text-align:center;border-top:6px solid var(--rb-amber)}
.rb .rb-status p{max-width:72ch;margin-inline:auto}
/* The one figure that will get misquoted, and what it counts, in the same
   breath as the claim. */
.rb .rb-status__note{margin-top:16px}
.rb .rb-status__note strong{font-weight:500;color:var(--wr-ink)}


/* ===================================================== §3 · PROVENANCE ==== */
.rb .rb-prov__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;align-items:start}
.rb .rb-prov__media{display:flex;flex-direction:column;gap:16px}

/* Real, published work. No Example badge — that absence is the whole point,
   so this card shape is deliberately NOT the shape of any fenced surface. */
.rb .rb-case{
  display:grid;grid-template-columns:104px minmax(0,1fr);
  background:#fff;border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow);overflow:hidden;text-decoration:none}
.rb .rb-case img{
  display:block;width:104px;height:100%;min-height:92px;object-fit:cover;
  border-right:3px solid var(--wr-line)}
.rb .rb-case__b{display:block;padding:14px 18px;min-width:0}
.rb .rb-case__tag{
  display:inline-block;font-family:"Outfit",sans-serif;font-size:11px;
  font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.08em;
  color:var(--wr-ink);background:var(--rb-amber);border-radius:4px;
  padding:4px 7px;margin-bottom:9px;transition:background-color .2s ease}
.rb .rb-case__n{
  display:block;font-size:18px;font-weight:500;line-height:1.35;
  letter-spacing:-.015em;color:var(--wr-ink)}
/* Links hover. Cards do not — so the hover lives on the tag, not the frame. */
.rb .rb-case:hover .rb-case__tag,
.rb .rb-case:focus-visible .rb-case__tag{background:var(--rb-deep)}

.rb .rb-fact{color:var(--wr-ink);margin-top:8px}
.rb .rb-prov__copy .wr-link{margin-top:20px}

@media(max-width:1024px){
  .rb .rb-prov__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  /* Copy first once it stacks: the argument, then the evidence. */
  .rb .rb-prov__media{order:2}
  .rb .rb-prov__copy{order:1}
}
@media(max-width:767px){
  .rb .rb-case{grid-template-columns:84px minmax(0,1fr)}
  .rb .rb-case img{width:84px;min-height:84px}
  .rb .rb-case__b{padding:12px 14px}
  .rb .rb-case__n{font-size:16px}
}


/* ============================================ §4 · WHAT IT'S BUILT TO DO == */
.rb .rb-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rb .rb-fcard{display:flex;flex-direction:column;padding:28px 24px 26px}
.rb .rb-fcard__t{margin:20px 0 12px}
.rb .rb-fcard p{font-size:16px;line-height:1.7}
.rb .rb-more{margin-top:auto;padding-top:20px;font-size:14px;align-self:flex-start}

/* 56px amber tile + a flat charcoal line icon. Never a tick: a tick is the
   universal "included" and these are intentions, not features. */
.rb .rb-tile{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:56px;height:56px;background:var(--rb-amber);
  border:3px solid var(--wr-line);border-radius:12px}
.rb .rb-tile svg{
  width:28px;height:28px;fill:none;stroke:var(--wr-ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1024px){
  .rb .rb-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media(max-width:767px){
  .rb .rb-grid4{grid-template-columns:minmax(0,1fr);gap:16px}
  .rb .rb-fcard{padding:22px 20px 20px}
  .rb .rb-tile{width:48px;height:48px;border-radius:10px}
  .rb .rb-tile svg{width:24px;height:24px}
  .rb .rb-fcard__t{margin:16px 0 10px}
  .rb .rb-fcard p{font-size:15px}
}


/* ================================================= §5 · PROJECT INTAKE ==== */
/* The real channel list. A <div>, because `.rb p` would force it to 18px. */
.rb .rb-chan{
  display:inline-block;margin-top:24px;padding-top:14px;
  border-top:3px solid var(--rb-amber);color:var(--wr-ink)}
/* The page's diagram. Right angles only — no curves, no glow, no gradient. */
.rb .rb-diag{
  display:grid;grid-template-columns:minmax(0,1.12fr) 64px minmax(0,.88fr);
  align-items:stretch}
.rb .rb-diag__tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;gap:12px}
.rb .rb-src{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--wr-line);border-radius:12px;
  box-shadow:var(--wr-shadow-sm);padding:12px 14px;
  font-size:14px;font-weight:500;line-height:1.35;letter-spacing:-.01em;
  color:var(--wr-ink)}
.rb .rb-src__i{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;background:var(--rb-amber);border-radius:6px}
.rb .rb-src__i svg{
  width:17px;height:17px;fill:none;stroke:var(--wr-ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Flat 2px amber connectors: three stubs into a spine, one stub out. */
.rb .rb-wire{position:relative}
.rb .rb-wire i{position:absolute;display:block;background:var(--rb-amber)}
.rb .rb-wire__v{left:50%;margin-left:-1px;width:2px;top:16.66%;bottom:16.66%}
.rb .rb-wire__h{left:0;width:50%;height:2px}
.rb .rb-wire__h--a{top:16.66%}
.rb .rb-wire__h--b{top:50%}
.rb .rb-wire__h--c{top:83.33%}
.rb .rb-wire__out{left:50%;width:50%;height:2px;top:50%}

.rb .rb-record{
  align-self:center;background:var(--wr-dark);color:var(--wr-cream);
  border:3px solid var(--wr-line);border-radius:16px;box-shadow:var(--wr-shadow)}
.rb .rb-record__h{
  color:var(--rb-amber);padding:14px 108px 14px 20px;
  border-bottom:1px solid rgba(251,246,239,.28)}
.rb .rb-record__list{margin:0;padding:6px 20px 18px}
.rb .rb-record__row{padding:11px 0;border-bottom:1px solid rgba(251,246,239,.16)}
.rb .rb-record__row:last-child{border-bottom:0}
.rb .rb-record__row dt{color:rgba(251,246,239,.6);margin:0 0 4px}
.rb .rb-record__row dd{
  margin:0;font-size:15px;line-height:1.45;font-weight:500;color:var(--wr-cream)}

@media(max-width:1024px){
  .rb .rb-diag{grid-template-columns:minmax(0,1fr)}
  .rb .rb-diag__tiles{grid-auto-rows:auto}
  /* The connectors become one short vertical amber rule between the two
     halves once the diagram stacks. */
  .rb .rb-wire{height:44px}
  .rb .rb-wire__v{left:50%;top:0;bottom:0;margin-left:-1px}
  .rb .rb-wire__h,.rb .rb-wire__out{display:none}
  .rb .rb-record{align-self:stretch}
}
@media(max-width:767px){
  .rb .rb-diag__tiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .rb .rb-src{padding:10px 12px;font-size:13px}
  .rb .rb-record__h{padding:12px 96px 12px 16px}
  .rb .rb-record__list{padding:4px 16px 14px}
}


/* ===================================================== §6 · WORK LOG ====== */
/* Cards clip to their own radius. Everything wide inside them lives in a
   .wr-scroll-x, so nothing is ever cropped without a way to reach it. */
.rb .rb-wl,.rb .rb-dlog,.rb .rb-cl,.rb .rb-wf,.rb .rb-move,.rb .rb-meas{overflow:hidden}
/* Card header strip, shared by every fielded surface on the page. */
.rb .rb-card__h{
  padding:14px 212px 14px 20px;background:rgba(20,20,20,.05);
  border-bottom:3px solid var(--wr-line)}

/* --- the figure strip ------------------------------------------------------
   Every number carries its own denominator on the line underneath it. That is
   the product's own rule, and it is the only reason these figures may ship. */
.rb .rb-kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:3px solid var(--wr-line)}
.rb .rb-kpis--4{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:0}
.rb .rb-kpi{padding:20px;border-right:1px solid rgba(20,20,20,.18)}
.rb .rb-kpi:last-child{border-right:0}
.rb .rb-kpi__l{color:var(--wr-body)}
.rb .rb-kpi__n{
  font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-.027em;
  color:var(--wr-ink);margin:8px 0 6px}
.rb .rb-kpi__d{font-size:13px;line-height:1.5;color:var(--wr-body)}
/* The caveat the product prints against its own headline. */
.rb .rb-wl__caveat{
  padding:16px 20px;font-size:14px;line-height:1.6;color:var(--wr-body);
  border-bottom:3px solid var(--wr-line)}
.rb .rb-cl__foot,.rb .rb-wf__note{
  padding:16px 20px;font-size:14px;line-height:1.6;color:var(--wr-body);
  border-top:3px solid var(--wr-line)}

/* --- the table, which IS Renobot's signature shape ------------------------ */
.rb .rb-tbl{width:100%;border-collapse:collapse;table-layout:auto}
.rb .rb-tbl th{
  text-align:left;padding:14px 16px;vertical-align:bottom;
  color:var(--wr-body);border-bottom:2px solid var(--wr-line);white-space:nowrap}
.rb .rb-tbl td{
  padding:14px 16px;vertical-align:top;font-size:15px;line-height:1.5;
  color:var(--wr-ink);border-bottom:1px solid rgba(20,20,20,.12)}
.rb .rb-tbl tbody tr:last-child td{border-bottom:0}
.rb .rb-tbl td:first-child{font-weight:500}
/* Who decided it sits in a pill: amber for a model run, field for a rule, white
   for a person. Three states, because the log has exactly three. */
.rb .rb-stat{
  display:inline-block;font-family:"Outfit",sans-serif;font-size:12px;
  font-weight:500;line-height:1.2;letter-spacing:.01em;color:var(--wr-ink);
  background:var(--rb-amber);border:2px solid var(--wr-line);border-radius:8px;
  padding:4px 9px;white-space:nowrap}
.rb .rb-stat--plain{background:var(--rb-field)}
.rb .rb-stat--person{background:#fff}
.rb .rb-wl__legend{
  display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 20px;
  border-top:3px solid var(--wr-line)}
.rb .rb-wl__legend .wr-micro{color:var(--wr-body)}

/* --- the two ledger entries ------------------------------------------------
   The same shape, the same detail, side by side. One of them nobody asked for,
   and that footer is the whole product. */
.rb .rb-log__h3{margin:56px 0 24px;max-width:840px}
.rb .rb-moves{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:24px;align-items:start}
.rb .rb-move__b{padding:20px}
.rb .rb-move__t{font-size:15px;line-height:1.6;color:var(--wr-ink)}
.rb .rb-move__t strong{font-size:18px;font-weight:500}
.rb .rb-move__d{font-size:13px;color:var(--wr-body)}
.rb .rb-move__p{font-size:15px;line-height:1.7;color:var(--wr-body);margin:14px 0 0}
.rb .rb-move__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rb .rb-lot{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;color:var(--wr-ink);background:rgba(20,20,20,.07);
  border-radius:4px;padding:2px 7px}
.rb .rb-lot--ok{background:var(--rb-field);box-shadow:inset 0 0 0 1px var(--wr-line)}
.rb .rb-move__foot{
  margin-top:18px;padding-top:14px;line-height:1.8;color:var(--wr-body);
  border-top:1px solid rgba(20,20,20,.2)}
.rb .rb-move__foot--agent{border-top:3px solid var(--rb-amber);color:var(--wr-ink)}
.rb .rb-moves__note{margin-top:24px;max-width:780px}

@media(max-width:1024px){
  .rb .rb-kpis--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb .rb-kpi{padding:16px}
  .rb .rb-kpi__n{font-size:28px}
  .rb .rb-moves{grid-template-columns:minmax(0,1fr)}
  .rb .rb-tbl th,.rb .rb-tbl td{padding:12px 14px}
}
/* Below 768 a four-column table cannot be read, and a min-width table inside a
   scroller would still be an element wider than the viewport. So each row
   becomes a fielded block, keeping the label/value pairing intact. */
@media(max-width:767px){
  .rb .rb-tbl,.rb .rb-tbl tbody,.rb .rb-tbl tr,.rb .rb-tbl td{display:block;width:100%}
  /* The base sheet gives every table in a .wr-scroll-x a 520px min-width so a
     five-column table keeps its structure and the reader swipes it. Once the
     rows ARE blocks that min-width is the opposite of the intent — it makes a
     stacked, readable row scroll sideways for no reason. (0,3,0) beats the base
     rule's (0,2,1). */
  .rb .wr-scroll-x .rb-tbl{min-width:0}
  /* display:none rather than a visually-hidden clip: a clipped <th> still
     reports a bounding rect wider than a 390px viewport. Each cell carries its
     own label via data-l, so nothing is lost. */
  .rb .rb-tbl thead{display:none}
  .rb .rb-tbl tr{padding:6px 16px 14px;border-bottom:3px solid var(--wr-line)}
  .rb .rb-tbl tbody tr:last-child{border-bottom:0}
  .rb .rb-tbl td{
    padding:8px 0 0;border-bottom:0;
    display:grid;grid-template-columns:minmax(0,94px) minmax(0,1fr);
    gap:12px;align-items:baseline}
  .rb .rb-tbl td::before{
    content:attr(data-l);font-family:"Outfit",sans-serif;font-size:11px;
    font-weight:500;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;
    color:var(--wr-body)}
  .rb .rb-tbl td:first-child{padding-top:10px}
  /* A grid cell stretches its child; a status pill that fills the column reads
     as a button. */
  .rb .rb-tbl td .rb-stat,.rb .rb-tbl td .rb-tool{justify-self:start}
  .rb .rb-kpis,.rb .rb-kpis--4{grid-template-columns:minmax(0,1fr)}
  .rb .rb-kpi{border-right:0;border-bottom:1px solid rgba(20,20,20,.18)}
  .rb .rb-kpi:last-child{border-bottom:0}
  .rb .rb-log__h3{margin:40px 0 20px}
  .rb .rb-move__b{padding:16px}
}


/* ================================================ §6b · MINTING GUARD ===== */
.rb .rb-mint__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;align-items:start}
.rb .rb-mint__row{
  display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:8px 18px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(20,20,20,.18)}
.rb .rb-mint__row:first-child{border-top:3px solid var(--wr-line)}
.rb .rb-mint__v{
  justify-self:start;color:var(--wr-ink);background:#fff;
  border:2px solid var(--wr-line);border-radius:6px;padding:4px 8px}
.rb .rb-mint__row--yes .rb-mint__v{background:var(--rb-amber)}
.rb .rb-mint__q{font-size:16px;line-height:1.6;color:var(--wr-ink)}
/* The strike is the product's own device — it strikes the superseded programme
   through and keeps it on the page. Here it means the guard threw the sentence
   away, which is exactly what a strike should mean. */
.rb .rb-mint__row--no .rb-mint__q{
  color:var(--wr-body);text-decoration:line-through;text-decoration-thickness:1px}
.rb .rb-mint__fail{font-size:16px;line-height:1.7;color:var(--wr-body);margin:24px 0 0}

.rb .rb-mint__sh{color:var(--wr-body);padding-bottom:10px;border-bottom:3px solid var(--rb-amber)}
.rb .rb-mint__lead{font-size:16px;line-height:1.7;margin:16px 0 20px}
/* The pair the product prints side by side: an estimate that says it is one,
   and a measurement that says what it was measured on. */
.rb .rb-meas{padding-top:24px}
.rb .rb-meas__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rb .rb-meas__c{padding:16px 18px;border-right:1px solid rgba(20,20,20,.18)}
.rb .rb-meas__c:last-child{border-right:0}
.rb .rb-meas__l{color:var(--wr-body)}
.rb .rb-meas__n{
  font-size:30px;font-weight:500;line-height:1.15;letter-spacing:-.027em;
  color:var(--wr-ink);margin:8px 0 8px}
.rb .rb-meas__d{font-size:13px;line-height:1.5;color:var(--wr-body)}
/* Amber type on white is unreadable, so the flag is a field block, not a colour. */
.rb .rb-meas__d--warn{
  display:inline-block;color:var(--wr-ink);background:var(--rb-field);
  border-radius:4px;padding:3px 7px}
.rb .rb-meas__foot{
  padding:16px 18px;border-top:2px solid var(--wr-line);
  font-size:14px;line-height:1.65;color:var(--wr-body)}

@media(max-width:1024px){
  .rb .rb-mint__grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:767px){
  .rb .rb-mint__row{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 0}
  .rb .rb-meas__pair{grid-template-columns:minmax(0,1fr)}
  .rb .rb-meas__c{border-right:0;border-bottom:1px solid rgba(20,20,20,.18)}
  .rb .rb-meas__c:last-child{border-bottom:0}
}


/* ============================== §7 · WHAT NEEDS A PERSON (dark band) ====== */
.rb .rb-ask__grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:48px;align-items:start}
.rb .rb-ask__copy p{max-width:46ch}
.rb .rb-ask__note{color:rgba(251,246,239,.72);margin-top:18px}
.rb .rb-ask__cta{margin-top:26px}
/* The card straddles the band's top seam — the theme's own device, and the
   replacement for the hazard stripe that was cut. */
/* Same straddle as the early-access card below, and the same treatment:
   the section above reserves the room rather than the pull being shrunk
   to fit, so both straddles on this page read at the same depth. */
.rb .rb-ask .rb-attn{margin-top:-136px}
/* The room a straddling panel needs is reserved on whatever section happens
   to be above it, not on a section named by hand: rb-mint used to sit there
   and now lives on another route, which left rb-attn landing on the card
   above it. :has keeps the reservation attached to the straddle. */
@media(min-width:1025px){
  .rb section:has(+ .rb-ask){padding-bottom:150px}
  .rb section:has(+ .rb-ea){padding-bottom:190px}
}
/* The five queue tabs, in the product's own order, with the product's own
   counts. Chip geometry, not pills: that substitution is what keeps this off
   the generic-SaaS pile. They do not switch anything — there is one escalation
   card on this page and inventing four more would be inventing data. */
.rb .rb-tabs{
  display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px;
  background:rgba(20,20,20,.05);border-bottom:3px solid var(--wr-line)}
.rb .rb-tab{font-size:12px;padding:5px 11px;border-width:2px;box-shadow:none}
.rb .rb-tab b{font-weight:500;color:var(--wr-body);margin-left:5px}
.rb .rb-tab.is-active{background:var(--rb-amber)}
.rb .rb-tab.is-active b{color:var(--wr-ink)}
.rb .rb-attn__cols{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:28px}

@media(max-width:1024px){
  .rb .rb-ask__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .rb .rb-ask__copy p{max-width:64ch}
  /* No straddle once it stacks — the card returns to the flow. */
  .rb .rb-ask .rb-attn{margin-top:0}
  .rb .rb-attn__cols{grid-template-columns:minmax(0,1fr);gap:0}
  .rb .rb-ev--2{grid-template-columns:minmax(0,1fr)}
  .rb .rb-attn__head{padding:13px 200px 13px 20px}
  .rb .rb-attn__body{padding:20px}
}
@media(max-width:767px){
  .rb .rb-attn__body{padding:16px}
  .rb .rb-attn__t{font-size:17px}
  .rb .rb-attn__when{margin-left:0}
  .rb .rb-ev__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .rb .rb-ev--2 .rb-ev__row{padding:6px 0}
  .rb .rb-call__b{width:100%;font-size:14px}
  .rb .rb-tabs{padding:12px 16px;gap:6px}
  .rb .rb-tab{font-size:11px;padding:4px 9px}
}


/* ========================================== §8 · OWNERSHIP VISIBILITY ===== */
.rb .rb-own__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:24px;align-items:start}
.rb .rb-upd{overflow:hidden}
.rb .rb-upd__b{padding:4px 20px 18px}
.rb .rb-upd__blk{padding:18px 0;border-bottom:1px solid rgba(20,20,20,.12)}
.rb .rb-upd__blk:last-child{border-bottom:0}
.rb .rb-upd__blk .wr-micro{display:block;color:var(--wr-body);margin-bottom:8px}
.rb .rb-upd__blk p{font-size:16px;line-height:1.7;color:var(--wr-ink)}

@media(max-width:1024px){
  .rb .rb-own__grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
  .rb .rb-upd__b{padding:2px 16px 14px}
  .rb .rb-upd__blk p{font-size:15px}
}


/* ================================ §9 · DELIVERED VS SUPERSEDED =========== */
/* The footnote sits ABOVE the cards: what the comparison is measured against is
   the first thing a reader needs, not a correction after the fact. */
.rb .rb-then__note{
  max-width:860px;margin:0 auto 32px;text-align:center}
.rb .rb-then__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rb .rb-comp{
  padding:32px 30px;border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow)}
.rb .rb-comp--dark{background:var(--wr-dark)}
.rb .rb-comp--amber{background:var(--rb-amber)}
.rb .rb-comp__tag{
  display:inline-block;font-family:"Outfit",sans-serif;font-size:11px;
  font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.08em;
  color:var(--wr-ink);background:#fff;border:2px solid var(--wr-line);
  border-radius:6px;padding:6px 10px;box-shadow:var(--wr-shadow-sm)}
.rb .rb-comp__n{
  font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.027em;
  margin:20px 0 18px}
.rb .rb-comp--dark .rb-comp__n{color:var(--wr-cream)}
.rb .rb-comp--amber .rb-comp__n{color:var(--wr-ink)}
.rb .rb-comp__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.rb .rb-comp__list li{position:relative;padding-left:26px;font-size:17px;line-height:1.6}
.rb .rb-comp__list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px}
/* Nothing crossed out, nothing red: the superseded plan is kept on the page
   because the comparison is the point, not because it was a failure. */
.rb .rb-comp--dark .rb-comp__list li{color:var(--wr-cream)}
.rb .rb-comp--dark .rb-comp__list li::before{
  border:2px solid var(--wr-cream);background:transparent}
/* A 10px square, never a tick — a tick is the universal "included". */
.rb .rb-comp--amber .rb-comp__list li{color:var(--wr-ink)}
.rb .rb-comp--amber .rb-comp__list li::before{background:var(--wr-ink)}
.rb .rb-wf{margin-top:24px}

@media(max-width:1024px){
  .rb .rb-comp{padding:26px 24px}
  .rb .rb-comp__n{font-size:34px}
  .rb .rb-comp__list li{font-size:16px}
}
@media(max-width:767px){
  .rb .rb-then__note{margin-bottom:24px;text-align:left}
  /* The superseded plan stacks first, so the reader meets the old world before
     the new one. */
  .rb .rb-then__grid{grid-template-columns:minmax(0,1fr)}
  .rb .rb-comp{padding:22px 20px}
  .rb .rb-comp__n{font-size:30px;margin:16px 0 14px}
  .rb .rb-comp__list{gap:12px}
}


/* ====================================================== §9b · CASELOAD ==== */
.rb .rb-bench{padding:20px;border-top:3px solid var(--wr-line)}
.rb .rb-bench__h{color:var(--wr-body);margin-bottom:14px}
.rb .rb-bench__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.rb .rb-bench__who{font-size:15px;line-height:1.5;color:var(--wr-ink)}
/* "Nothing assigned" is the point of the whole screen, so it gets the pill. */
.rb .rb-bench__state{
  font-family:"Outfit",sans-serif;font-size:12px;font-weight:500;line-height:1.2;
  color:var(--wr-ink);background:var(--rb-field);border:2px solid var(--wr-line);
  border-radius:8px;padding:5px 10px}
.rb .rb-load__after{margin-top:28px;max-width:780px}
.rb .rb-load .wr-link{margin-top:14px}


/* =============================================== §10 · AUTHORITY LADDER === */
/* Four rungs. The last two are charcoal because they are not yours to set —
   the product refuses them at every autonomy setting, and the page should look
   like it means it. */
.rb .rb-rungs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rb .rb-rung{
  background:#fff;border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow);padding:26px 22px}
.rb .rb-rung__n{
  display:block;color:var(--wr-body);padding-bottom:12px;margin-bottom:16px;
  border-bottom:3px solid var(--rb-amber)}
.rb .rb-rung__t{font-size:21px;margin:0 0 10px}
.rb .rb-rung p{font-size:15px;line-height:1.65}
.rb .rb-rung--locked{background:var(--wr-dark)}
.rb .rb-rung--locked .rb-rung__n{
  color:var(--rb-amber);border-bottom-color:rgba(251,246,239,.3)}
.rb .rb-rung--locked .rb-rung__t{color:var(--wr-cream)}
.rb .rb-rung--locked p{color:rgba(251,246,239,.78)}
.rb .rb-ladder__note{margin-top:32px;max-width:840px}

@media(max-width:1024px){
  .rb .rb-rungs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb .rb-rung{padding:22px 20px}
}
@media(max-width:767px){
  .rb .rb-rungs{grid-template-columns:minmax(0,1fr);gap:16px}
  .rb .rb-rung__t{font-size:19px}
  .rb .rb-ladder__note{margin-top:24px}
}


/* ------------------------------------------------------------- the badge -- */
/* CONTEXTUAL CORRECTION, not a redefinition: the base sheet's badge was sized
   for "Example". "From the product · names changed" is four times longer, so it
   is given a measure to wrap inside and every fielded header in this sheet
   reserves room for it. Below 768 it shrinks rather than eating the header. */
.rb .wr-ex-badge{max-width:min(58%,240px);text-align:right;line-height:1.45}
@media(max-width:767px){
  .rb .wr-ex-badge{font-size:10px;padding:3px 6px;letter-spacing:.06em;max-width:44%}
  .rb .rb-card__h,.rb .rb-attn__head{padding:12px 16px;padding-right:48%}
}


/* ========================================== §11 · HUMAN IN THE LOOP ====== */
/* .wr-split (base sheet) already draws the vertical 3px amber rule. */
.rb .rb-people__mark{
  display:block;width:56px;height:56px;margin:0 0 20px;object-fit:contain}
/* The robot's only other appearance on this page. */
.rb .rb-people__mark--photo{
  object-fit:cover;border:3px solid var(--wr-line);border-radius:12px}
@media(max-width:767px){
  .rb .rb-people__mark{width:48px;height:48px;margin-bottom:16px}
}


/* =========================================== §12 · LIFECYCLE HANDOFF ===== */
.rb .rb-hand__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);
  align-items:stretch}
.rb .rb-hand__tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:14px;padding:34px 32px;border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow)}
.rb .rb-hand__tile--rb{background:var(--rb-amber)}
/* The handover tile is the owner's record, not another product, so it carries
   Capital's own pale field. It was named --hm back when it previewed Handyman
   and carried Handyman's wordmark and highlight; the copy moved on, the class
   name did not, and a comment claiming this was "the only place Handyman's
   colour appears" sat directly above a rule setting Capital's. */
.rb .rb-hand__tile--record{background:var(--rb-field)}
/* These tiles are ~500px wide. A 28px mark, most of which is the robot glyph so
   the lettering is around half that, read as a caption rather than as the
   identity the tile exists to show.

   The two tiles hold different KINDS of mark: the left is an <img> wordmark and
   the right is the typeset .wr-capmark lockup. The size override was written
   for the <img> only, so the lockup fell through to the generic
   `.rb .wr-capmark{--h:42px}` in wereno-products.css and the pair sat 20px
   apart. Both are now driven off the same three numbers. All three breakpoints
   have to be written: (0,3,0) outranks the generic (0,2,0) at every width, but
   only where a rule exists to do the outranking. */
/* The two marks are matched by AREA, not by height. The left one is a logo
   image at 1.78:1; the right is typeset from --h, and every glyph, the rule and
   the tracking scale off that one number, so it runs about 4:1. Setting both to
   the same height made the right-hand lockup 344x84 against the wordmark's
   149x84 -- the same number, 2.3x the ink. 84 and 56 measure 12,500 and
   12,800 square pixels, which is what actually reads as a pair. */
.rb .rb-hand__tile .wr-mark{height:84px}
.rb .rb-hand__tile .wr-capmark{--h:56px}
@media(max-width:1024px){
  .rb .rb-hand__tile .wr-mark{height:70px}
  .rb .rb-hand__tile .wr-capmark{--h:48px}}
@media(max-width:767px){
  .rb .rb-hand__tile .wr-mark{height:60px}
  .rb .rb-hand__tile .wr-capmark{--h:42px}}
.rb .rb-hand__role{display:block;color:var(--wr-ink)}
/* The handwriting caption. Both tiles carry one: a tile with a mark, a role and
   a caption against one with a mark and a role read as two different designs
   rather than as the two ends of one handover. */
.rb .rb-hand__cap{display:block;color:rgba(20,20,20,.78)}
.rb .rb-hand__arrow{display:flex;align-items:center;justify-content:center}
.rb .rb-hand__arrow svg{
  width:72px;height:24px;fill:none;stroke:var(--wr-ink);stroke-width:3;
  stroke-linecap:square;stroke-linejoin:miter}
/* One flat timeline rule under both tiles. */
.rb .rb-hand__rail{position:relative;height:3px;background:var(--wr-ink);margin-top:30px}
.rb .rb-hand__rail i{position:absolute;top:-5px;width:13px;height:13px;background:var(--wr-ink)}
.rb .rb-hand__rail i:first-child{left:0}
.rb .rb-hand__rail i:last-child{right:0}
.rb .rb-hand__note{margin:26px 0 18px}

@media(max-width:1024px){
  .rb .rb-hand__grid{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
  .rb .rb-hand__tile{padding:28px 24px}
  .rb .rb-hand__arrow svg{width:56px}
}
@media(max-width:767px){
  .rb .rb-hand__grid{grid-template-columns:minmax(0,1fr)}
  .rb .rb-hand__arrow{height:56px}
  .rb .rb-hand__arrow svg{width:24px;height:52px}
  .rb .rb-hand__tile{padding:24px 20px}
  .rb .rb-hand__rail{margin-top:22px}
}


/* ============================================= §13 · STRAIGHT ANSWERS ==== */
/* Plain accordion: hard 1px row dividers, amber plus/minus markers, no card
   shadows, no imagery. Restful after the console and the comparison.
   Native <details> rather than the theme's bdt-accordion, because bdt needs
   bdt-uikit to boot and its class names are not in this file's namespace —
   with <details> the failure mode is "every answer is visible", not "no
   answers are visible". */
.rb .rb-faq__list{max-width:900px;border-top:1px solid var(--wr-line)}
.rb .rb-faq__i{border-bottom:1px solid var(--wr-line)}
.rb .rb-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:"Outfit",sans-serif;font-size:20px;font-weight:500;line-height:1.45;
  letter-spacing:-.018em;color:var(--wr-ink);
  transition:color .2s ease}
.rb .rb-faq__q::-webkit-details-marker{display:none}
.rb .rb-faq__q:hover,.rb .rb-faq__q:focus-visible{color:var(--rb-deep)}
.rb .rb-faq__q:focus-visible{outline:3px solid var(--rb-amber);outline-offset:4px}
.rb .rb-faq__m{
  position:relative;flex:0 0 auto;width:24px;height:24px;
  background:var(--rb-amber);border:2px solid var(--wr-line);border-radius:4px}
.rb .rb-faq__m::before,.rb .rb-faq__m::after{content:"";position:absolute;background:var(--wr-ink)}
.rb .rb-faq__m::before{left:4px;right:4px;top:9px;height:2px}
.rb .rb-faq__m::after{top:4px;bottom:4px;left:9px;width:2px}
.rb .rb-faq__i[open] .rb-faq__m::after{display:none}
.rb .rb-faq__a{padding:0 56px 26px 0;max-width:72ch}

@media(max-width:767px){
  .rb .rb-faq__q{font-size:17px;gap:16px;padding:18px 0}
  .rb .rb-faq__a{padding:0 0 20px}
}


/* ========================================= §14 · EARLY ACCESS (dark) ===== */
.rb .rb-ea__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:48px;align-items:start}
.rb .rb-ea__copy p{max-width:46ch}
/* The card straddles the band's top seam, closing the page against the
   footer — the theme's own device, and the replacement for the killed stripe. */
/* Straddles up into the FAQ section, so that section has to reserve the
   room, the way Handyman's FAQ does. Shrinking the pull instead left a
   straddle too small to read as one, and it still clipped an open answer:
   the last FAQ item is open by default and its text reaches down here. */
.rb .rb-ea__card{position:relative;z-index:2;margin-top:-136px;padding:28px}

.rb .rb-ea__card .wr-micro{color:var(--wr-ink)}
.rb .rb-ea__f{display:grid;gap:12px}
.rb .rb-ea__l{display:block}
.rb .rb-ea__in{
  width:100%;font-family:"Outfit",sans-serif;font-size:16px;line-height:1.4;
  color:var(--wr-ink);background:#fff;border:2px solid var(--wr-line);
  border-radius:8px;padding:14px 16px}
.rb .rb-ea__in::placeholder{color:var(--wr-body);opacity:1}
.rb .rb-ea__in:focus{outline:3px solid var(--rb-amber);outline-offset:2px}
body.elementor-kit-8 .rb .rb-ea__f .wr-btn{width:100%}
/* (b) this <p> is inside a white card that sits on a dark band. */
.rb .rb-ea__help{font-size:14px;line-height:1.6;color:var(--wr-body);margin:14px 0 0}
.rb .rb-ea__after{color:rgba(251,246,239,.7);margin:26px 0 16px}

@media(max-width:1024px){
  .rb .rb-ea__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .rb .rb-ea__copy p{max-width:64ch}
  .rb .rb-ea__card{margin-top:0}
  .rb .rb-ea__side{max-width:520px}
}
@media(max-width:767px){
  .rb .rb-ea__card{padding:22px 20px}
  .rb .rb-ea__help{font-size:13px}
  .rb .rb-ea__after{margin:22px 0 14px}
}


/* ---- the Rolodex (§9c) ------------------------------------------------- */
/* A footnote that belongs INSIDE the card, under the table — it explains what
   the Outreach column means, so it must not read as page copy. */
.rb .rb-tbl__note{
  margin:0;padding:14px 20px 18px;font-size:14px;line-height:1.6;
  color:rgba(20,20,20,.62);border-top:1px solid rgba(20,20,20,.1)}
/* A measured claim standing on the page below a card. Needs its own clearance —
   the card carries a hard offset shadow, so a normal margin sits under it. */
.rb .rb-measured{margin:26px 0 0;font-size:17px;line-height:1.7}
.rb .rb-measured strong{font-weight:600;color:var(--wr-ink)}
@media(max-width:767px){
  .rb .rb-tbl__note{padding:12px 16px 16px;font-size:13.5px}
  .rb .rb-measured{margin-top:20px;font-size:16px}
}

/* The band runs straight into the footer, which brings its own 66px of top
   spacing before its logo. The band's own 48px on top of that left a long
   run of flat colour between the CTA card and anything else. */
.rb .rb-ea{padding-bottom:20px}
@media(max-width:1024px){.rb .rb-ea{padding-bottom:16px}}
@media(max-width:767px){.rb .rb-ea{padding-bottom:14px}}

/* ---- the status band as a figure row -----------------------------------
   Four figures across the container, each one sitting over the sentence
   that says what it counts. Cards carry the page's own language: white,
   3px ink border, hard offset shadow. */
.rb .rb-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin:26px 0 24px;align-items:stretch}
.rb .rb-fig{min-width:0;display:flex;flex-direction:column;gap:10px;
  background:#fff;border:3px solid var(--wr-line);border-radius:16px;
  box-shadow:var(--wr-shadow);padding:22px 20px 24px}
.rb .rb-fig__n{font-family:"Outfit",sans-serif;font-size:clamp(30px,3vw,44px);
  font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--wr-ink);
  font-variant-numeric:tabular-nums}
.rb .rb-fig__s{margin:0;font-size:14.5px;line-height:1.55;color:var(--wr-body)}
/* the amber rule under the first figure ties the row to the product */
.rb .rb-fig::after{content:"";display:block;width:34px;height:4px;
  border-radius:2px;background:var(--rb-amber);margin-top:auto}

@media(max-width:1024px){
  .rb .rb-figs{grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 20px}
  .rb .rb-fig{padding:18px 16px 20px}
}
@media(max-width:560px){
  .rb .rb-figs{grid-template-columns:1fr}
}