@import url("chrome.css"); /* LOCAL DESIGN PASS 5: the shared header + footer */
/* =====================================================================
   THE OHS public site — "System" pass (LOCAL DESIGN PASS)
   Loaded LAST on the public home page, after its own inline styles and
   the six hero/pathway/footer sheets. Palette, fonts, logo, flag bar,
   photographs and the red/gold/black identity are untouched; this file
   only aligns the site with the application: 8 / 12 px radii, one
   hairline, one soft shadow, flat buttons, quiet tables, no glass,
   no pulsing decorations.
   ===================================================================== */
:root {
  /* Brand: THE OHS logo red on black; the gold and blue secondary accents are retired. */
  --red: #b32025; --red-dk: #8c1a1e; --gold: #b32025; --sea: #16130f;
  --r: 8px;
  --shadow: 0 1px 2px rgba(22, 19, 15, .05);
  --shadow-lg: 0 12px 32px -16px rgba(22, 19, 15, .22);
}

/* Surfaces */
.card, .lane, .hw-card, .steps, .qs-panel, .lic-card, .heroimg .ph { border-radius: 12px; }
.card, .lane, .hw-card { box-shadow: var(--shadow); }
.hw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hw-card__num::after { content: none; animation: none; }
.lane.hot, .lane.cool { border-top-width: 3px; }
.alertcard { border-left-width: 3px; }
.lic-card { box-shadow: var(--shadow-lg); }

/* Buttons — 40 px, flat */
.btn { min-height: 40px; padding: 9px 18px; border-radius: var(--r); transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--paper); border-color: var(--ink-3); }
.btn.pri { background: var(--red); border-color: var(--red); }
.btn.pri:hover { background: var(--red-dk); border-color: var(--red-dk); }
.btn.sm { min-height: 32px; padding: 5px 12px; }
.vstrip input { border-radius: var(--r) 0 0 var(--r); }
.vstrip button { border-radius: 0 var(--r) var(--r) 0; }

/* Tables */
th { border-bottom: 1px solid var(--line); background: var(--paper); font-size: 10.5px; letter-spacing: .5px; font-weight: 600; }
td { padding: 11px 16px; }
tbody tr:hover { background: var(--paper); }

/* The five-step pathway strip sits on the dark band: the frosted glass
   goes, the cards stay dark and flat so the white type keeps its contrast. */
.eu-dark .step.step, .eu-onink .step.step {
  background: rgba(255, 255, 255, .06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: none !important; border-radius: 12px !important;
}
.eu-dark .step.step:hover, .eu-onink .step.step:hover { transform: none !important; box-shadow: none !important; }
.eu-light .step.step { background: #fff !important; backdrop-filter: none !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; }

/* Quick-search button: no breathing ring, softer shadow. */
.qs-fab { box-shadow: 0 8px 20px -8px rgba(179, 32, 37, .5); }
.qs-fab::after { content: none; animation: none; }
.qs-fab:hover { transform: none; }
.qs-item.on { outline-offset: -2px; }

/* Pills */
.pill { padding: 3px 9px; }

/* No badges: status pills read as plain coloured text. */
.pill, .qs-item__b, .lic-card .body .pill { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }

/* Brand red only: no red→gold gradient rule on the pathway cards, no gold tagline. */
.eu-dark .step.step::after, .eu-onink .step.step::after, .eu-light .step.step::after { background: var(--red) !important; }
.hero .tet { color: var(--red); opacity: 1; }
.tl .it::before { background: var(--red); }
.step::before { -webkit-text-stroke: 1px var(--red); }

/* No eyebrows / kickers: the small uppercase red label above headings goes. */
.eyebrow, .kicker { display: none !important; }

/* ---------------------------------------------------------------------
   PHONE LAYER (≤767px) — references: Mercury / Udemy stacked hero and
   entry cards, HBO Max step list, Udemy 2x2 stats. 56px masthead, 16px
   gutters, 44px targets, floating buttons kept out of the way.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  body { padding-bottom: 72px; }
  .govbar .in { padding: 6px 16px; gap: 8px; }
  .govbar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; display: inline-block; vertical-align: bottom; }
  .mast .in { padding: 8px 16px !important; gap: 10px !important; min-height: 56px; }
  .logo-main { height: 24px !important; }
  .brand .s { display: none; }
  .burger { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .mast .btn.iconbtn { width: 44px; height: 44px; }
  .wrap { padding: 0 16px; }
  section { padding: 40px 0; }
  .hero .in { padding: 32px 16px 40px; gap: 24px; }
  h1.d { font-size: 32px; }
  h2.d { font-size: 26px; }
  .lead { font-size: 16px; }
  .hero .ctas { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .hero .ctas .btn { justify-content: center; min-height: 48px; width: 100%; }
  .hero .proof, .hero .proof--live { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-top: 24px; }
  .hero .proof div b { font-size: 26px; }
  .heroimg .lic-card { left: 12px; right: 12px; width: auto; bottom: -18px; transform: none; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .vstrip .in { padding: 20px 16px; }
  .vstrip .box { width: 100%; margin-left: 0; }
  .vstrip input { flex: 1 1 auto; min-width: 0; width: 100%; font-size: 16px; min-height: 44px; }
  .vstrip button { min-height: 44px; }
  .grid2, .grid3, .news { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { border-left: 0; border-top: 1px solid var(--line-2); padding: 16px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .step:first-child { border-top: 0; }
  .step::before { font-size: 22px; margin: 0; grid-row: 1 / span 2; }
  .hw { grid-template-columns: 1fr; gap: 12px; }
  .hw-card__ph { height: 140px; }
  .qs-fab { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  .qs-fab svg { width: 20px; height: 20px; }
  .qs-panel { right: 12px; left: 12px; bottom: 64px; width: auto; }
  .wa { left: 12px !important; bottom: 12px !important; }
  table { font-size: 13px; }
  th, td { padding: 10px 12px; }
}

/* ---------------------------------------------------------------------
   Audit fixes — the euler-theme layer (splash, 999px pill buttons with a
   shine, card lifts, cool palette, kickers, reveal animations, frosted
   masthead, glass tiles on dark bands) is neutralised here; the tokens
   it reads are re-keyed to the brand. Then controls, chips, hero dots,
   footer and the in-page verify band.
   --------------------------------------------------------------------- */
html:root { --eu-ink: #16130f; --eu-ink-2: #1f1b16; --eu-line-d: rgba(255,255,255,.12); --eu-paper: #f6f2ea; --eu-paper-2: #fff; --eu-line-l: #e2dccd; --eu-accent-lt: #e5141e; }
#eu-intro, #eu-progress { display: none !important; }
html body .btn, html body .lms-btn, html body .vk-search__go { border-radius: var(--r) !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease !important; }
.btn::after, .lms-btn::after { content: none !important; }
.btn:active, .btn.pri:active { transform: none !important; }
html body .btn.pri, html body .btn.pri:hover { box-shadow: none !important; }
html body .btn.pri:hover { background: var(--red-dk) !important; border-color: var(--red-dk) !important; }
html body .card, html body .vk-tile, html body .lms-card { border-radius: 12px !important; transition: border-color .15s ease !important; }
.card:hover, .eu-dark .card:hover, .ctile:hover, .xtile.is-link:hover, .hw-card:hover, footer a.partner:hover { transform: none !important; box-shadow: var(--shadow) !important; }
.hw-card:hover .hw-card__ph img, .hw-card:hover .hw-card__ph svg { transform: none !important; }
.eu-h2rule::after { content: none !important; }
.eu-num, .eu-label { display: none !important; }
.rv, .eu-rv, .eu-enter { opacity: 1 !important; transform: none !important; transition: none !important; }
html body .hero { --red: #b32025 !important; background: var(--paper) !important; color: var(--ink); }
html body .hero::before { content: none !important; animation: none !important; }
html body .hero::after { height: 3px !important; background: var(--red) !important; }
html body .hero .lic-card .head { background: var(--red) !important; color: #fff !important; }
html body .hero .in > * > p, html body .hero .in > * > .lead, html body .hero .in > * > ul, html body .hero .in > * > li { color: var(--ink-2); }
html body .hero .in > * > h1, html body .hero .in > * > h2 { color: var(--ink); }
html body .hero .in > * > .mut { color: var(--ink-3); }
html body .eu-dark table th, html body .eu-onink table th { color: #a39b8c !important; }
html body .eu-dark table td, html body .eu-onink table td { color: #e8e2d6; }
html body .eu-dark .ctile, html body .eu-dark .xtile, html body .eu-onink .ctile, html body .eu-onink .xtile, html body .ctile, html body .xtile { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
html body .ctile::before, html body .xtile::before { width: 3px !important; background: var(--red) !important; }
html body .ctile__ic { background: var(--red) !important; }
.door .ph { background: var(--paper-3) !important; background-image: none !important; }
.hv-band { background: var(--ink) !important; }
.hv-band::after { display: none !important; }
.hv-card { border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.hv-go { box-shadow: none !important; }
.qs-panel, .wa-panel { box-shadow: var(--shadow-lg) !important; border-radius: 12px !important; }
@media (max-width: 1499px) { .cobrand-mast { display: none; } }
.btn.sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.chip { min-height: 36px; border-radius: var(--r); }
.hero-dot { width: 24px; height: 24px; background: none; position: relative; transition: none; }
.hero-dot::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }
.hero-dot.on { width: 24px; border-radius: 50%; }
.hero-dot.on::before { background: #fff; }
.vstrip .s { font-size: 13px; }
footer .in { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .burger { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  nav.main.open a, nav.main.open button { min-height: 44px; }
}
@media (max-width: 767px) {
  .brand { flex: 0 1 auto; min-width: 0; }
  header.mast { overflow-x: clip; }
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px -16px; padding: 0 16px; scrollbar-width: none; }
  .chip { flex: none; min-height: 44px; }
  footer .in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 36px 16px 24px; }
  .card > table thead { display: none; }
  .card > table, .card > table tbody, .card > table tr, .card > table td { display: block; width: 100%; }
  .card > table tr { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
  .card > table td { padding: 3px 0; border: 0; }
}
/* masthead above positioned content (euler makes headings position:relative); brand tagline one line; WhatsApp button in ink */
html body .wa-btn, html body .wa-btn:hover, html body .wa-btn:focus-visible { background: var(--ohs-black) !important; color: #fff !important; animation: none !important; transform: none !important; box-shadow: var(--shadow) !important; }
html body .wa-btn::before, html body .wa-btn::after { content: none !important; }
html body .wa-btn svg { color: #fff; }
@media (max-width: 767px) {
}
@media (max-width: 767px) {
  html body .btn.sm { min-height: 44px; }
  footer .in a:not(.partner) { display: inline-block; padding: 9px 0; }
}

/* ---------------------------------------------------------------------
   Pass 5 — no black inside the page: only the header and the footer are
   black. Bands, the verify strip, the CTA band and panel heads are paper.
   --------------------------------------------------------------------- */
html body .eu-dark, html body .eu-onink { background: var(--paper) !important; color: var(--ink) !important; }
html body .hero .proof--live { border-top-color: var(--line); }
html body .hero .proof div span { color: var(--ink-3); }
html body .hero-dot::before { background: rgba(22, 19, 15, .35); }
html body .hero-dot.on::before { background: var(--red); }
html body .vstrip { background: var(--paper-2) !important; color: var(--ink) !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html body .vstrip .s { color: var(--ink-3); }
html body .vstrip input { background: #fff; border: 1px solid var(--line); color: var(--ink); }
html body .vstrip input::placeholder { color: var(--ink-3); }
html body .hv-band { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px; }
html body .hv-band__t { color: var(--ink); }
html body .hv-band__d { color: var(--ink-2); }
html body .hv-band__ic { background: var(--tint, rgba(179, 32, 37, .07)); color: var(--red); }
html body .qs-head { background: var(--paper-2) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); }
html body .qs-head span { color: var(--ink-3); }
html body .chip.on { background: var(--red); border-color: var(--red); color: #fff; }
html body .lic-card .head { background: var(--red); }

/* ---------------------------------------------------------------------
   Pass 6 — every band and the header/footer sit in one 80rem (7xl)
   container; sections, grids and copy get more room to breathe.
   --------------------------------------------------------------------- */
html:root { --max: 80rem; }
html body :is(.wrap, .hero .in, .vstrip .in) { max-width: var(--ohs-max); margin-left: auto; margin-right: auto; padding-left: var(--ohs-gutter); padding-right: var(--ohs-gutter); box-sizing: border-box; }
html body section { padding: 104px 0; }
html body section.tight { padding: 80px 0; }
html body .hero .in { padding-top: 96px; padding-bottom: 112px; gap: 72px; }
html body .vstrip .in { padding-top: 36px; padding-bottom: 36px; gap: 28px; }
html body :is(.grid2, .grid3, .grid4) { gap: 32px; }
html body h2.d { margin-bottom: 16px; }
html body :is(.lead, section p) { line-height: 1.7; }
html body .hero .ctas { margin-top: 8px; gap: 14px; }
html body .hero .proof { margin-top: 44px; gap: 36px; }
@media (max-width: 767px) {
  html body section { padding: 64px 0; }
  html body section.tight { padding: 52px 0; }
  html body .hero .in { padding-top: 48px; padding-bottom: 64px; gap: 40px; }
  html body :is(.grid2, .grid3, .grid4) { gap: 20px; }
  html body .hero .proof { margin-top: 32px; gap: 20px; }
}

/* =====================================================================
   Pass 7 · six-colour palette: charcoal header, white page, white footer
   ===================================================================== */
html:root {
  --ink: #2f2d2a; --ink-2: #2f2d2a; --ink-3: #6b665f;
  --paper: #ffffff; --paper-2: #ffffff; --paper-3: #edeae4;
  --line: #edeae4; --line-2: #edeae4;
  --red: #b32025; --red-dk: #931a1e; --gold: #b32025; --sea: #2f2d2a;
  --ok: #1b6f35; --ok-bg: rgba(27, 111, 53, .08); --warn: #2f2d2a; --warn-bg: #edeae4; --bad: #b32025; --bad-bg: rgba(179, 32, 37, .08);
  --eu-ink: #2f2d2a; --eu-ink-2: #2f2d2a; --eu-paper: #ffffff; --eu-paper-2: #ffffff; --eu-line-l: #edeae4;
  --eu-accent: #b32025; --eu-accent-lt: #b32025; --eu-gold: #b32025;
}
html body { background: #ffffff; color: #2f2d2a; }
html body .eu-light, html body section { background-color: #ffffff; }
html body .vstrip, html body .hv-band { background: #edeae4 !important; border-color: #edeae4 !important; }
html body .hv-band__ic { background: #ffffff; }
html body :is(.vstrip input, input[type=text], input[type=search], input[type=email], input:not([type]), select, textarea) { border-color: #6b665f; }
html body :is(input, select, textarea)::placeholder { color: #6b665f; opacity: 1; }
html body :is(.btn.ghost, .btn:not(.pri), .chip) { border-color: #6b665f; color: #2f2d2a; }
html body .chip.on { background: #b32025; border-color: #b32025; color: #ffffff; }
html body .btn.pri, html body .btn.pri:hover { color: #ffffff; }
html body .btn.pri:hover { background: #931a1e !important; border-color: #931a1e !important; }
html body .door .ph { background: #edeae4 !important; }

html body .hv-band__k { display: none !important; } /* pass 7: gold kicker label, fails contrast and is an eyebrow */

/* ---------------------------------------------------------------------
   Pass 9 · no red accent lines, whole numbers, no red tags
   --------------------------------------------------------------------- */
html body :is(.step, .eu-dark .step, .eu-light .step, .eu-onink .step)::after,
html body :is(.ctile, .xtile, .hero, .hw-card__num)::after,
html body :is(.ctile, .xtile)::before { content: none !important; display: none !important; }
/* step numbers: solid whole numbers (1, 2, 3), not outlined 01, 02, 03 */
html body .step::before { content: counter(st) !important; color: var(--red) !important; -webkit-text-stroke: 0 !important; }
html body .hw-card__num { background: #ffffff !important; color: var(--red) !important; border: 1px solid var(--line) !important; box-shadow: none !important; font-size: 17px !important; }
/* cards, lanes, notices and bands: one hairline, no red top or left edge */
html body :is(.card, .lane, .alertcard, .notice, .hv-band, .vstrip, .hw-card) { border-top-width: 1px !important; border-left-width: 1px !important; border-top-color: var(--line) !important; border-left-color: var(--line) !important; }
html body :is(.card, .lane, .alertcard, .notice) { border-style: solid; }
html body :is(.ph, .hw-card__ph, .door .ph) { border-bottom: 0 !important; }
/* photo captions and the red label tags on pictures are gone */
html body :is(.cap, #heroCap, .flip__cap, .ph .cap) { display: none !important; }
html body .lic-card .head { background: #2f2d2a !important; color: #ffffff !important; }

html body .hero .lic-card .head, html body .lic-card .head { background: #2f2d2a !important; color: #ffffff !important; } /* pass 9: no red header tag on the licence mock */
/* pass 9: phone and tablet menu drawer uses the charcoal chrome and loses the 3px red top line */
@media (max-width: 1024px) {
  html body nav.main#nav { background: #2f2d2a !important; border-top: 1px solid rgba(237, 234, 228, .14) !important; }
}
/* pass 9: the door-card kickers ("I need a licence" and the rest) are charcoal text, not red tags */
html body .door .k { color: var(--ink) !important; }
/* pass 12 undone (1 Oct 2026): the "Delivered with licensing.tl" co-brand shows on the front site again,
   on wide screens (it still hides below 1500px, where the menu needs the room). */
html body header.mast .cobrand-mast__logo { filter: brightness(0) invert(1); opacity: .92; } /* dark logo → white on the charcoal header */
/* pass 15: the hero photo sits inside the 80rem container (its right edge lines up with the header's sign-in
   icon; a wide-screen rule had set the right gutter to 0), and the slider dots are gone (slides still rotate) */
@media (min-width: 1100px) {
  html body .hero .in { padding-right: var(--ohs-gutter) !important; }
}
html body .hero-dots { display: none !important; }

/* pass 40: the Verify page (#verify) returns to its original design, as drawn in home.php: the dark band with the
   gold "National OHS Licence Register" label and a soft ring, rounded cards with their shadow, the red Verify
   button with its glow and the coloured icon tiles (the red caption tag on the card stays hidden, like every
   red tag on pictures). The three trust pills are gone
   for good (home.php). chrome.css exempts .hv-grid from the sharp-corner rule. */
html body .hv-grid > .card { border-radius: 6px !important; box-shadow: var(--shadow) !important; border: 1px solid var(--line) !important; }
html body .hv-grid .hv-card { border-radius: 18px !important; box-shadow: 0 1px 2px rgba(20, 27, 36, .05), 0 18px 40px -26px rgba(20, 27, 36, .45) !important; }
html body .hv-grid .hv-band {
  background: radial-gradient(120% 140% at 100% 0%, rgba(212, 160, 23, .35) 0%, rgba(212, 160, 23, 0) 45%), linear-gradient(135deg, #141b24 0%, #1f2a37 55%, #7a0d13 140%) !important;
  color: #ffffff !important; border: 0 !important; border-radius: 0 !important;
}
html body .hv-grid .hv-band::after { display: block !important; border-radius: 50% !important; }
html body .hv-grid .hv-band__k { display: block !important; color: #f3c85a !important; }
html body .hv-grid .hv-band__t { color: #ffffff !important; }
html body .hv-grid .hv-band__d { color: rgba(255, 255, 255, .72) !important; }
html body .hv-grid .hv-band__ic { background: rgba(255, 255, 255, .1) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 16px !important; }
html body .hv-grid .hv-field { border-radius: 12px !important; }
html body .hv-grid .hv-go { border-radius: 12px !important; box-shadow: 0 10px 22px -12px rgba(179, 32, 37, .9) !important; }
html body .hv-grid .hv-info__ic { border-radius: 11px !important; }

/* pass 40: notices open with the word "Note:" instead of a § or i glyph */
html body .notice .notice__k { flex: none; font-weight: 700; color: var(--ink); }

/* pass 41: the Contact page (#contact) is four office cards: the photo on top (Magnific stock, no licence cards
   shown, the red caption tag hidden like on every picture), what to ask each office about, how to reach it with
   line icons, and one next step at the foot of the card. Two columns, one on phones. */
html body .ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
html body .ct-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
html body .ct-card__ph { height: 200px; flex: none; overflow: hidden; border-bottom: 1px solid var(--line); }
html body .ct-card__ph .ph { height: 100% !important; border-radius: 0 !important; }
html body .ct-card__ph .cap { display: none !important; }
html body .ct-card > .b { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
html body .ct-card h3 { margin: 0; }
html body .ct-card__d { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; }
html body .ct-reach { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
html body .ct-org { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
html body .ct-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
html body .ct-rows li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
html body .ct-rows a { color: var(--ink); overflow-wrap: anywhere; }
html body .ct-rows a:hover { color: var(--red); }
html body .ct-ic { width: 16px; height: 16px; flex: none; }
html body .ct-rows .ct-ic { margin-top: 2px; color: var(--red); }
html body .ct-card__foot { margin-top: auto; padding-top: 20px; }
html body .ct-card__foot .ct-ic { width: 15px; height: 15px; }
@media (max-width: 760px) {
  html body .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body .ct-card__ph { height: 180px; }
  html body .ct-card > .b { padding: 18px 18px 20px; }
}

/* pass 42: Licence classes (#classes). A group opens in place: its classes appear in a panel under the row of the
   card that was clicked, a notch pointing at that card, and the page does not move (home.php, clsOpen). The open
   card is outlined in red and its arrow turns up. Every group uses the site red instead of its own hue. */
html body .ctile { --hue: var(--red); transition: border-color .16s ease, box-shadow .16s ease; }
html body .ctile:hover { border-color: var(--ink-3); }
html body .ctile__n { color: var(--red); }
html body .ctile__n svg { transition: transform .22s ease; }
html body .ctile.is-on { border-color: var(--red) !important; box-shadow: inset 0 0 0 1px var(--red) !important; }
html body .ctile.is-on .ctile__n svg { transform: rotate(180deg); }
html body .cls-panel {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-rows: 0fr; opacity: 0; margin: 2px 0 4px;
  transition: grid-template-rows .32s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
}
html body .cls-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
html body .cls-panel--every { margin: 0 0 20px; }
html body .cls-panel::before {
  content: ""; position: absolute; z-index: 1; top: -7px; left: calc(var(--notch-x, 48px) - 7px); width: 14px; height: 14px;
  background: #f6f4f1; border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg);
}
html body .cls-panel__in { min-height: 0; overflow: hidden; }
html body .cls-panel__box { background: #f6f4f1; border: 1px solid var(--line); padding: 22px 24px 22px; }
html body .cls-panel__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
html body .cls-panel__hd { flex: 1; min-width: 0; }
html body .cls-panel__t { margin: 0; font: 700 20px/1.25 var(--fb); letter-spacing: -.01em; color: var(--ink); }
html body .cls-panel__b { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
html body .cls-panel__n { display: inline-block; margin-top: 8px; font: 700 12px var(--fb); color: var(--red); }
html body .cls-panel__x {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: #ffffff; border: 1px solid var(--line); color: var(--ink);
}
html body .cls-panel__x:hover { border-color: var(--ink-3); }
html body .cls-panel__x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
html body .cls-panel__x svg { width: 18px; height: 18px; }
html body .cls-panel .xtile-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
html body .cls-panel__g { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 12px; font: 700 15px var(--fb); color: var(--ink); }
html body .cls-panel__head + .cls-panel__g { margin-top: 4px; }
html body .cls-panel__g span { font-size: 12px; color: var(--red); }
html body .cls-panel__foot { display: flex; justify-content: center; margin-top: 20px; }
html body .cls-panel__foot svg { width: 15px; height: 15px; }
html body .xtile.is-found { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px) {
  html body .cls-panel__box { padding: 16px 14px 18px; }
  html body .cls-panel__t { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cls-panel, html body .ctile__n svg { transition: none; }
}
html body .cls-panel.is-instant { transition: none; }
/* pass 42: on phones the panel opens right under its card, which already shows the name and sentence, so the
   panel keeps only the count and the close button (the heading still names the panel for screen readers) */
@media (max-width: 640px) {
  html body .cls-panel:not(.cls-panel--every) :is(.cls-panel__t, .cls-panel__b) { display: none; }
  html body .cls-panel:not(.cls-panel--every) .cls-panel__head { align-items: center; margin-bottom: 14px; }
  html body .cls-panel:not(.cls-panel--every) .cls-panel__n { margin-top: 0; }
}

/* pass 43: "Browse all 58 classes" is a small red link at the right end of the "Choose the group" line (it drops
   under the heading on narrow screens); the whole register opens under that line, above the cards */
html body .cls-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
html body .cls-bar .cls-lead { margin-bottom: 0; }
html body .cls-all {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: 700 12.5px var(--fb); color: var(--red); white-space: nowrap;
}
html body .cls-all:hover span { text-decoration: underline; }
html body .cls-all:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
html body .cls-all svg { width: 14px; height: 14px; transition: transform .22s ease; }
html body .cls-all.is-on svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { html body .cls-all svg { transition: none; } }

/* pass 44: the life cycle on "How licensing works" (#how) is a band with a timeline (the figures on it), then
   renewal's two pathways and the two rules that apply at any time. Phone: one column, the timeline turns vertical.
   (The steps are the original photo cards again, pass 47.) */
/* the life cycle */
html body .hwl { padding: 72px 0; background: #f6f4f1 !important; border-top: 1px solid var(--line); } /* !important: the theme paints .eu-light sections */
html body .hwl .hwl-lead { margin-top: 10px; }
html body .lc { display: grid; grid-template-columns: 5fr 2.4fr 1.9fr 2.1fr; gap: 0 6px; margin: 36px 0 0; padding: 0; list-style: none; }
html body .lc li { display: flex; flex-direction: column; min-width: 0; }
html body .lc__at { display: flex; align-items: flex-end; min-height: 32px; margin-bottom: 10px; padding-right: 8px; font: 700 12px/1.35 var(--fb); color: var(--ink-3); } /* two lines kept free so longer labels (Portuguese) wrap and the bars stay level */
html body .lc__bar { height: 14px; margin-bottom: 16px; background: rgba(47, 45, 42, .16); }
html body .lc--renew .lc__bar { background: #b32025; }
html body .lc--late .lc__bar { background: rgba(179, 32, 37, .38); }
html body .lc--retrain .lc__bar { background: #2f2d2a; }
html body .lc__fig { font: 800 28px/1.1 var(--fd); letter-spacing: -.01em; color: var(--ink); }
html body .lc--renew .lc__fig { color: var(--red); }
html body .lc__t { margin-top: 6px; font: 700 14.5px/1.35 var(--fb); color: var(--ink); }
html body .lc__d { margin-top: 4px; padding-right: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) {
  html body .hwl { padding: 48px 0; }
  /* the timeline turns vertical: a rail on the left, one phase per row */
  html body .lc { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  html body .lc li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
  html body .lc__bar { grid-column: 1; grid-row: 1 / span 4; width: 8px; height: auto; margin: 0; }
  html body .lc li > :not(.lc__bar) { grid-column: 2; }
  html body .lc li:last-child { padding-bottom: 0; }
  html body .lc__at { display: block; min-height: 0; margin-bottom: 4px; }
  html body .lc__fig { font-size: 24px; }
}

/* pass 48: the three notes under the life-cycle timeline (renewal pathways, VOC, penalty points) are plain columns
   with a rule above each: no boxes inside boxes, no chips. One column on phones. */
html body .lcg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
html body .lcg-col { min-width: 0; padding-top: 20px; border-top: 1px solid rgba(47, 45, 42, .22); }
html body .lcg-col h3 { margin: 0 0 10px; font: 700 16px/1.3 var(--fb); color: var(--ink); }
html body .lcg-col p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
html body .lcg-col p + p { margin-top: 8px; }
html body .lcg-col b { font-weight: 700; color: var(--ink); }
@media (max-width: 760px) {
  html body .lcg { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
}