/* CRITIQUE FIX 3 (Rob 11-13 sheet-wide rules R3-A, R3-B, R3-D, R3-E). Loaded LAST in every demo; kit file, same bytes everywhere.
   R3-A  no tinted hero / panel band: the page is white, colour only on actions, accents and photos.
   R3-B  at most one hairline per region: no stacked borders, no top accent rules on cards, no side rules; cards stand apart by space + soft shadow.
   R3-D  logo flush left on the content edge, legible, product name to its right.
   R3-E  language toggle is a short code (ES, AR) in the header style. Fonts untouched. */

/* ---------- R3-A: white, not tinted ---------- */
:root { --r3-shadow: 0 1px 2px rgba(16,20,24,.08), 0 4px 14px rgba(16,20,24,.07); }
html, body, main { background: #ffffff; }
html body.r3-white, html body.r3-white main, html body .r3-white { background-color: #ffffff !important; background-image: none !important; }
.band, .home-band, .headline, .hero-panel { background-color: #ffffff; }
.card, .tile, .task, .card.flat, .ask, .alert.info, .result { background: #ffffff !important; }

/* ---------- R3-B: one hairline max, space and shadow instead ---------- */
.card, .tile, .task, .card.flat, .gauge, .photo-card, .hero-panel, .result, details.coverage,
html body .card, html body .tile, html body .gauge {
  border: 0 !important; border-top: 0 !important; box-shadow: var(--r3-shadow) !important;
}
.task:hover, .tile:hover { box-shadow: 0 2px 4px rgba(16,20,24,.10), 0 8px 20px rgba(16,20,24,.10) !important; }
/* the header keeps its brand bar OR its hairline, never both */
.top { border-bottom: 0 !important; }
/* a hero or band is bare space: no rule round it */
section.hero.r3-white, .band, .home-band, .headline { border: 0 !important; box-shadow: none !important; }
/* no side rules on the page frame */
body, main, .top-in, .foot-in, .ph-screen, .wrap { border-inline: 0 !important; }
.alert.info { border-color: transparent !important; box-shadow: var(--r3-shadow); }

/* ---------- R3-D: logo on the content edge, legible, name beside it ---------- */
.top .brand { display: inline-flex; align-items: center; gap: .75rem; margin-inline-start: 0; padding-inline-start: 0; }
.top .logo-wrap, .top .brand > img { margin: 0; }
.top .logo { object-position: left center; display: block; }
@media (min-width: 62rem) { .top .logo { block-size: 44px; inline-size: auto; max-inline-size: 260px; } }
@media (max-width: 61.99rem) { .top .logo { block-size: 32px; inline-size: auto; max-inline-size: 150px; } }
.top .brand-t { display: inline-flex; align-items: center; }

/* ---------- R3-E: the language toggle is a short code, never a CTA ---------- */
#langBtn { min-inline-size: 2.5rem; padding-inline: .5rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; background: transparent; border-color: transparent; }