/* RevoHub — generated data tiles, structural rhythm sections, card instruments.
   Added 2026-08-12 in response to the design assessment.

   Kept in its own file for the same reason wordpress.css is: futuristic.css
   and components.css are byte-identical to the block build and are the design
   source of truth. Everything new since the assessment lives here, so it is
   one file to read and one file to delete.

   Colour discipline: no new hues. Every value below is an existing
   --wp--preset--color--green-* step, the hud-panel, or the mint focus colour.

   Mark contrast, measured (the tiles are aria-hidden and every value they draw
   is also printed as text, so WCAG 1.4.11 does not strictly bind — these clear
   3:1 anyway):
     green-700 mark on green-200 track ... 3.84:1
     green-700 mark on green-50 surface .. 4.72:1
     green-800 label on green-50 ......... 6.82:1
     green-800 label on white ............ 7.20:1
   Deliberately NOT green-500 for tile marks: green-500 on white is 2.12:1 and
   would make the sparklines mush. Green-500 stays where design.md reserves it
   — logo, icons, borders, grid lines, meter fills on tinted panels.
   ========================================================================= */

/* =========================================================================
   1. The tile shell
   ========================================================================= */

.rh-tile{
  display:block;position:relative;width:100%;overflow:hidden;
  border:1px solid var(--wp--preset--color--green-200);
  border-radius:var(--wp--custom--radius--image);
  background:
    linear-gradient(160deg,
      var(--wp--preset--color--surface) 0%,
      var(--wp--preset--color--green-50) 58%,
      var(--wp--preset--color--green-100) 100%);
  /* The 44px technical grid, at tile scale. Same idea as .rh-grid, drawn here
     so it clips to the tile's rounded corners. */
  background-image:
    linear-gradient(to right, var(--wp--custom--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wp--custom--grid-line) 1px, transparent 1px),
    linear-gradient(160deg,
      var(--wp--preset--color--surface) 0%,
      var(--wp--preset--color--green-50) 58%,
      var(--wp--preset--color--green-100) 100%);
  background-size:22px 22px, 22px 22px, 100% 100%;
}
.rh-tile__svg{display:block;width:100%;height:100%}

/* Portrait and avatar slots are circular in the existing components CSS; the
   tile has to follow the frame it is dropped into. */
.rh-quote__avatar.rh-tile,
.rh-advisor__portrait.rh-tile{border-radius:50%}

/* .rh-team__portrait sets object-fit and display:block for a real <img>;
   neither applies to a span, but the border treatment must survive. */
.rh-team__portrait.rh-tile{border-radius:var(--wp--custom--radius--image)}

/* Lift with the card, like a photograph would. */
.rh-card:hover .rh-tile,
.rh-flip:hover .rh-tile{border-color:var(--wp--preset--color--green-400)}

/* =========================================================================
   2. Tile marks
   ========================================================================= */

.rh-tile__label{
  font-family:var(--wp--preset--font-family--mono);
  font-size:10px;font-weight:600;letter-spacing:.1em;
  fill:var(--wp--preset--color--green-800);
}
.rh-tile__value{
  font-family:var(--wp--preset--font-family--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  fill:var(--wp--preset--color--heading-strong);
}
.rh-tile__initials{
  font-family:var(--wp--preset--font-family--mono);
  font-size:30px;font-weight:700;letter-spacing:.04em;
  fill:var(--wp--preset--color--green-800);
}
.rh-team__portrait.rh-tile .rh-tile__initials{font-size:24px}

/* Line: 2px, round join and cap, per the mark spec. */
.rh-tile__line{
  fill:none;stroke:var(--wp--preset--color--green-700);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Area: a wash, never a saturated block. */
.rh-tile__area{fill:var(--wp--preset--color--green-500);fill-opacity:.18;stroke:none}

/* End marker: >=8px across, with a 2px surface ring so it stays legible
   wherever it lands on the line. */
.rh-tile__dot{
  fill:var(--wp--preset--color--green-700);
  stroke:var(--wp--preset--color--surface);stroke-width:2;
}

/* Gridlines and axes: hairline, solid, one step off the surface, recessive. */
.rh-tile__rule{stroke:var(--wp--preset--color--green-200);stroke-width:1}
.rh-tile__tickmark{stroke:var(--wp--preset--color--green-700);stroke-width:1.5;stroke-linecap:round}
.rh-tile__tick{fill:none;stroke:var(--wp--preset--color--green-400);stroke-width:1.25}

/* Track and fill, matching .rh-meter's proportions so the tiles and the hero
   Role Readiness card read as one instrument family. */
.rh-tile__track{fill:var(--wp--preset--color--green-200)}
.rh-tile__fill{fill:var(--wp--preset--color--green-600)}
.rh-tile__fill--strong{fill:var(--wp--preset--color--green-700)}

.rh-tile__arc-track{fill:none;stroke:var(--wp--preset--color--green-200);stroke-linecap:round}
.rh-tile__arc{fill:none;stroke:var(--wp--preset--color--green-700);stroke-linecap:round}
.rh-tile__pip{fill:var(--wp--preset--color--green-600)}
.rh-tile__hub-ring{fill:none;stroke:var(--wp--preset--color--green-200);stroke-width:2}

/* Meters printed as spans inside a flip-card back need explicit block display. */
.rh-cardmeter .rh-meter,.rh-cardmeter .rh-meter__fill{display:block}

.rh-tile__ring-track{fill:none;stroke:var(--wp--preset--color--green-200);stroke-width:3}
.rh-tile__ring{fill:none;stroke:var(--wp--preset--color--green-700);stroke-width:3;stroke-linecap:round}
.rh-tile__node{fill:var(--wp--preset--color--green-700)}
.rh-tile__node--hub{fill:var(--wp--preset--color--green-700)}

/* The signal edges reuse the site's .rh-signal__line, including its draw-on-
   reveal transition. Only the stroke colour is stepped down the ramp: the
   green-500 signal core measures 2.12:1 on a light tile and the thin edges
   disappear. The halo is kept. */
.rh-tile .rh-signal__line{stroke:var(--wp--preset--color--green-700);stroke-width:1.75}
.rh-tile .rh-signal__node{fill:var(--wp--preset--color--green-700)}

/* pathLength="600" is set on every edge in PHP, so one dasharray value draws
   edges of any real length correctly. */
.rh-tile__edge{stroke-dasharray:600;stroke-dashoffset:600}
.is-revealed .rh-tile__edge{
  transition:stroke-dashoffset var(--wp--custom--duration--draw) var(--wp--custom--easing--out);
  stroke-dashoffset:0;
}
/* If the tile is never inside a revealed section — the Elementor editor
   preview, or JS off — the edges must still be drawn. */
.no-js .rh-tile__edge{stroke-dashoffset:0}

/* =========================================================================
   3. Card instruments — the Role Readiness vocabulary, repeated
   Pathway card backs currently state timeline and demand as plain text. They
   keep the text and gain the picture.
   ========================================================================= */

.rh-cardmeter{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rh-cardmeter__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rh-cardmeter__head .rh-mono{color:var(--wp--preset--color--green-800)}
.rh-cardmeter__value{
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px;font-weight:700;color:var(--wp--preset--color--heading-strong);
}
/* The back face is green-50, so the standard green-200 track is nearly
   invisible there — step the track down and the fill up. */
.rh-flip__face--back .rh-cardmeter .rh-meter{background:var(--wp--preset--color--green-200);height:8px}
.rh-flip__face--back .rh-cardmeter .rh-meter__fill{background:var(--wp--preset--color--green-700)}

/* Demand as a signal indicator: three rising bars, filled to the level.
   Never colour alone — the level word is printed beside it. */
.rh-demand{display:inline-flex;align-items:center;gap:8px}
.rh-demand__bars{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.rh-demand__bars i{
  display:block;width:4px;border-radius:2px;
  background:var(--wp--preset--color--green-200);
}
.rh-demand__bars i:nth-child(1){height:6px}
.rh-demand__bars i:nth-child(2){height:10px}
.rh-demand__bars i:nth-child(3){height:14px}
.rh-demand__bars i.is-on{background:var(--wp--preset--color--green-700)}
.rh-demand__label{
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--wp--preset--color--green-800);
}

/* A signal rule that can sit between any two sections, not just the pillars.
   Same drawing as the footer's top edge. */
.rh-rule{display:block;width:100%;height:2px;margin:0}
.rh-rule svg{display:block;width:100%;height:100%;overflow:visible}

/* =========================================================================
   4. Rhythm break A — the full-bleed dark HUD band
   The dark panel is the best surface in the system and appeared exactly once,
   in the footer. One band per page, mid-page, anchors the middle.
   ========================================================================= */

.rh-band{
  position:relative;overflow:hidden;
  background:var(--wp--preset--color--hud-panel);
  color:var(--wp--preset--color--surface);
  border-block:0;
}
.rh-band__signal{position:absolute;top:0;left:0;width:100%;height:4px;overflow:visible}
.rh-band .rh-layer.rh-grid{
  /* Grid lines are tuned for light surfaces; on the HUD panel they need to be
     light-on-dark instead. */
  background-image:
    linear-gradient(to right, rgba(131,195,84,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(131,195,84,.10) 1px, transparent 1px);
}
.rh-band__inner{position:relative;display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media (min-width:1024px){.rh-band__inner{grid-template-columns:1.1fr .9fr;gap:64px}}
/* Readout hidden: one column, not a half-empty two. */
.rh-band__inner--solo{grid-template-columns:1fr}
@media (min-width:1024px){.rh-band__inner--solo{grid-template-columns:1fr}}
.rh-band__inner--solo .rh-band__copy{max-width:820px}
.rh-band__copy{display:flex;flex-direction:column;gap:20px;max-width:640px}

/* Contrast on hud-panel #0E1A12, measured:
     white ........ 17.87:1
     green-100 .... 15.69:1
     green-400 .....9.77:1  <- the emphasis tail
     green-500 .....8.42:1  <- mono eyebrows, as the footer already does
   green-700, the light-surface emphasis colour, is unreadable here and must
   never be inherited into this section. */
.rh-band h2,.rh-band h3{color:var(--wp--preset--color--surface)}
.rh-band .rh-em{color:var(--wp--preset--color--green-400);text-shadow:none}
.rh-band .rh-mono{color:var(--wp--preset--color--green-500)}
.rh-band p{color:rgba(255,255,255,.78)}
.rh-band .rh-lead{color:rgba(255,255,255,.86)}
.rh-band .rh-underline::after{background:var(--wp--preset--color--green-500)}
.rh-band .rh-checks li{color:rgba(255,255,255,.86)}
.rh-band .rh-btn--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(155,206,118,.45);
  color:var(--wp--preset--color--surface);
}
.rh-band .rh-btn--ghost:hover{
  background:rgba(131,195,84,.14);
  border-color:var(--wp--preset--color--green-400);
  color:var(--wp--preset--color--surface);
}
/* Focus stays visible and switches to mint, as futuristic.css already does
   for .rh-panel-dark. */
.rh-band :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--mint);outline-offset:2px;
}

/* The readout card. .rh-glass is a white 62% fill — wrong on a dark panel, so
   the dark equivalent is declared rather than inherited. */
.rh-band__card{
  display:flex;flex-direction:column;gap:18px;padding:28px;
  width:100%;max-width:460px;justify-self:end;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(131,195,84,.30);
  border-radius:var(--wp--custom--radius--hud);
  box-shadow:0 0 0 1px rgba(131,195,84,.10), 0 18px 48px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rh-band__card{background:rgba(255,255,255,.08)}
}
.rh-band__card.rh-hud::before,.rh-band__card.rh-hud::after{border-color:var(--wp--preset--color--green-500)}
.rh-band__readout{display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.rh-band__row{display:flex;flex-direction:column;gap:7px}
.rh-band__rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* Scoped with .rh-band deliberately: these are <p> elements, and the bare
   class (0,1,0) loses to `.rh-band p` (0,1,1) above, which was quietly
   repainting the green mono labels white. Measured after the fix:
   green-500 on hud-panel = 8.42:1. */
.rh-band .rh-band__rowlabel{
  font-family:var(--wp--preset--font-family--mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wp--preset--color--green-500);margin:0;
}
.rh-band .rh-band__rowvalue{
  font-family:var(--wp--preset--font-family--mono);
  font-size:13px;font-weight:700;color:var(--wp--preset--color--surface);margin:0;
}
.rh-band__row .rh-meter{background:rgba(255,255,255,.14)}
.rh-band__row .rh-meter__fill{background:var(--wp--preset--color--green-500)}
.rh-band__foot{
  padding-top:16px;border-top:1px solid rgba(210,233,193,.20);
  display:flex;flex-direction:column;gap:6px;
}

/* =========================================================================
   5. Rhythm break B — the editorial two-column moment
   No cards, no grid. Statement type on the left, detail on the right.
   ========================================================================= */

.rh-editorial{position:relative}
.rh-editorial__inner{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .rh-editorial__inner{grid-template-columns:1.05fr .95fr;gap:64px}
  .rh-editorial__detail{
    padding-left:64px;
    border-left:1px solid var(--wp--preset--color--green-200);
  }
}
.rh-editorial__lead{display:flex;flex-direction:column;gap:16px}
.rh-editorial__statement{
  font-size:clamp(1.75rem, 4vw, 2.75rem);
  line-height:1.12;font-weight:800;
  color:var(--wp--preset--color--heading-strong);
  text-wrap:balance;margin:0;
}
.rh-editorial__detail{display:flex;flex-direction:column;gap:20px}
.rh-editorial__detail p{line-height:1.7;max-width:60ch}
.rh-editorial__facts{
  display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;
  border-top:1px solid var(--wp--preset--color--green-200);
}
.rh-editorial__fact{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--wp--preset--color--green-200);
}
.rh-editorial__fact dt{
  font-family:var(--wp--preset--font-family--mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wp--preset--color--green-800);margin:0;
}
.rh-editorial__fact dd{
  margin:0;font-size:15px;font-weight:600;text-align:right;
  color:var(--wp--preset--color--heading);
}
.rh-editorial .rh-btn{align-self:flex-start}

/* =========================================================================
   6. prefers-reduced-motion — the contract extends to everything above
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  .rh-tile__edge{stroke-dashoffset:0 !important;transition:none !important}
  .is-revealed .rh-tile__edge{transition:none !important}
}

/* Forced colours: keep the instruments legible when the OS repaints them. */
@media (forced-colors:active){
  .rh-tile{border-color:CanvasText}
  .rh-tile__line,.rh-tile__arc,.rh-tile__ring{stroke:CanvasText}
  .rh-tile__fill,.rh-tile__fill--strong,.rh-tile__dot,.rh-tile__node{fill:CanvasText}
  .rh-demand__bars i.is-on{background:CanvasText}
}

/* =========================================================================
   7. Problem statement — sourced third-party figures
   The one place on the site where a graphic carries a number, because the
   number is Statistics Canada's and is attributed on screen. Everything about
   this section is built to keep that distinction visible: the mono sub-head
   names the survey above the charts, and the source line sits directly under
   them and cannot be hidden.
   ========================================================================= */

.rh-problem__head{display:flex;flex-direction:column;gap:16px;max-width:820px}
.rh-problem__kicker{
  margin-top:56px;text-align:center;
  color:var(--wp--preset--color--green-800);
}
.rh-problem__grid{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;gap:32px;grid-template-columns:1fr;
}
@media (min-width:768px){.rh-problem__grid{grid-template-columns:repeat(3,1fr);gap:40px}}
.rh-problem__item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}

.rh-gauge{position:relative;width:100%;max-width:240px}
.rh-gauge__svg{display:block;width:100%;height:auto;overflow:visible}
.rh-gauge__track{
  fill:none;stroke:var(--wp--preset--color--green-200);
  stroke-width:18;stroke-linecap:butt;
}
/* green-700 on green-200 measures 3.84:1 — the fill is not the only carrier of
   the value (the figure is printed as text below it), but it clears the
   graphical-object threshold anyway. */
.rh-gauge__fill{
  fill:none;stroke:var(--wp--preset--color--green-700);
  stroke-width:18;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.is-revealed .rh-gauge__fill{
  transition:stroke-dashoffset var(--wp--custom--duration--draw) var(--wp--custom--easing--out);
  stroke-dashoffset:0;
}
.no-js .rh-gauge__fill{stroke-dashoffset:0}

/* Sits inside the arc. The dial is 200x112 in user units, so the number is
   centred on the 100,100 origin and lifted clear of the stroke. */
.rh-gauge__value{
  position:absolute;left:0;right:0;bottom:6%;
  margin:0;text-align:center;
  font-size:clamp(1.75rem, 4vw, 2.25rem);
  font-weight:800;line-height:1;
  color:var(--wp--preset--color--green-800);
}
.rh-gauge__caption{
  margin:0;max-width:34ch;
  font-size:15px;line-height:1.55;
  color:var(--wp--preset--color--body);
}

.rh-problem__source{
  margin:40px auto 0;max-width:80ch;text-align:center;
  font-size:13px;line-height:1.6;
  color:var(--wp--preset--color--body);
}
.rh-problem__source a{
  white-space:nowrap;font-weight:600;
  color:var(--wp--preset--color--green-700);
  text-decoration:underline;text-underline-offset:2px;
}
.rh-problem__source a:hover{color:var(--wp--preset--color--green-800)}

@media (prefers-reduced-motion:reduce){
  .rh-gauge__fill{stroke-dashoffset:0 !important;transition:none !important}
  .is-revealed .rh-gauge__fill{transition:none !important}
}
@media (forced-colors:active){
  .rh-gauge__fill{stroke:CanvasText}
}

/* =========================================================================
   8. Contact
   ========================================================================= */

/* The footer grid was 2fr 1fr 1fr for three columns; a fourth needs its own
   track or the brand column crushes the rest. */
@media (min-width:768px){
  .rh-footer__inner{grid-template-columns:1.6fr 1fr 1.1fr 1fr}
}
.rh-footer__contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rh-footer__contact li{display:flex;flex-direction:column;gap:1px}
.rh-footer__contact-label{
  font-family:var(--wp--preset--font-family--mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wp--preset--color--green-500);
}
.rh-footer__contact a{
  min-height:0;font-size:14px;
  color:rgba(255,255,255,.86);text-decoration:none;word-break:break-word;
}
.rh-footer__contact a:hover{color:#fff;text-decoration:underline}
.rh-footer__contact-phone{margin:0}
.rh-footer .rh-small{color:rgba(255,255,255,.6);font-size:13px}

/* Contact routes block, used on the Contact page. */
.rh-routes{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:768px){.rh-routes{grid-template-columns:repeat(3,1fr)}}
.rh-route{display:flex;flex-direction:column;gap:10px;padding:28px;height:100%}
.rh-route__label{margin:0}
.rh-route__name{
  margin:0;font-size:var(--wp--preset--font-size--h3);font-weight:700;
  line-height:1.25;color:var(--wp--preset--color--heading);
}
.rh-route__note{margin:0;font-size:15px;line-height:1.6;color:var(--wp--preset--color--body)}
.rh-route__email{
  margin:auto 0 0;font-family:var(--wp--preset--font-family--mono);
  font-size:14px;font-weight:600;word-break:break-word;
}
.rh-route__email a{
  color:var(--wp--preset--color--green-700);
  text-decoration:underline;text-underline-offset:3px;
}
.rh-route__email a:hover{color:var(--wp--preset--color--green-800)}
.rh-contact__foot{margin:32px 0 0;font-size:14px;color:var(--wp--preset--color--body)}

/* =========================================================================
   9. AI agent grid
   ========================================================================= */

.rh-agents__grid{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:768px){.rh-agents__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rh-agents__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.rh-agents__grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rh-agents__grid--2{grid-template-columns:repeat(2,1fr)}}
.rh-agents__grid > li{display:flex}
.rh-agent{display:flex;flex-direction:column;gap:10px;padding:28px;width:100%}
.rh-agent__label{margin:0}
.rh-agent__name{margin:0;font-size:var(--wp--preset--font-size--h3);font-weight:700;
  line-height:1.25;color:var(--wp--preset--color--heading)}
.rh-agent__body{margin:0;font-size:15px;line-height:1.6;color:var(--wp--preset--color--body)}
.rh-agent__price{
  margin:auto 0 0;padding-top:16px;
  border-top:1px solid var(--wp--preset--color--green-100);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.rh-agent__amount{
  font-family:var(--wp--preset--font-family--mono);
  font-size:19px;font-weight:700;color:var(--wp--preset--color--green-800);
}
.rh-agent__pricenote{font-size:13px;color:var(--wp--preset--color--body)}
.rh-agents__foot{margin:28px 0 0;max-width:70ch;font-size:14px;line-height:1.6;
  color:var(--wp--preset--color--body)}

/* =========================================================================
   10. Consultation form
   ========================================================================= */

.rh-consult{position:relative;overflow:hidden}
.rh-consult__inner{position:relative;display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.rh-consult__inner{grid-template-columns:1fr 1fr;gap:64px}}
.rh-consult__copy{display:flex;flex-direction:column;gap:20px;max-width:560px}
.rh-consult__form{width:100%}
.rh-consult__form label{font-weight:600}

/* The honeypot must be invisible to people and to screen readers, but still
   submitted by anything that fills forms automatically. display:none would be
   skipped by some bots; this is off-screen instead. */
.rh-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.rh-status{padding:12px 16px;border-radius:var(--wp--custom--radius--input);font-size:14px}
.rh-status--sent{background:var(--wp--preset--color--green-50);
  border:1px solid var(--wp--preset--color--green-400);color:var(--wp--preset--color--green-800)}
/* Warning and error states use the reserved status colours from tokens.css,
   never a green, and each carries its own wording so colour is not the signal. */
.rh-status--invalid{background:#FEF6E7;border:1px solid var(--wp--preset--color--warning);color:#7A4405}
.rh-status--error{background:#FDECEC;border:1px solid var(--wp--preset--color--error);color:#8C1A1A}