/* =====================================================================================================================
   Complaint History  -  THE DESIGN SYSTEM ("Civic Blue")

   A friendly city-services look (after the Towns-ville template): a blue top bar and a clean white header, deep navy
   heroes and bands, a confident pink accent, sky-blue and teal highlights, white cards with soft shadows and coloured
   top edges, and plain, readable type. Familjen Grotesk for headings, buttons and labels; Hanken Grotesk for everything
   you read. Numbers use tabular figures so columns line up.

   CHARTS: one measure, one hue - blue, with the item being looked at in full strength. Answer tones (good, open, bad,
   neutral) are only ever used with a word beside them. Light and dark themes: [data-theme] on <html>.

   Coded By Darko G.
   ===================================================================================================================== */

:root {
    --paper: #F4F7FA; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #EEF3F8;
    --ink: #043460; --ink-2: #3E5068; --muted: #5F6F82; --faint: #8D99A8;
    --rule: #E3E9F0; --rule-2: #CFD9E4;
    --blue: #1E76BB; --blue-ink: #155C93; --blue-soft: #E7F2FB; --link: #1A6AAB; --link-visited: #5A3F9E;
    --navy: #043460; --navy-2: #062B45; --navy-3: #022136; --on-navy: #FFFFFF; --on-navy-2: #B9C7D6;
    --pink: #EC466E; --pink-2: #D9335B; --pink-soft: #FDE9EE;
    --cyan: #29AAE1; --teal: #69D6CF; --purple: #544B9F; --green: #02A855;
    /* the old accent names, kept so every page's classes keep working: "gold" is now the pink call to action */
    --gold: #EC466E; --gold-2: #D9335B; --gold-ink: #FFFFFF;
    --good: #078A4C; --good-bg: #E2F5EA; --bad: #C8283F; --bad-bg: #FCE7EB; --open: #A35F00; --open-bg: #FDF1DC; --neutral: #44566E; --neutral-bg: #EAEFF5;
    --bar: #BCD6EC; --bar-on: #1E76BB; --bar-partial: #DCEAF6;
    --t0: #E8EEF4; --t1: #CFE2F2; --t2: #A2C9E8; --t3: #6AA7D7; --t4: #2F84C6; --t5: #135E9C;
    --ga: #078A4C; --gb: #4E9A2B; --gc: #C98A00; --gd: #E0691F; --gf: #D7334F;
    --shadow: 0 2px 4px rgba(4, 52, 96, .04), 0 10px 30px rgba(4, 52, 96, .07);
    --shadow-lg: 0 20px 50px rgba(4, 52, 96, .16);
    --radius: 8px; --radius-sm: 5px;
    --f-head: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --f-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --f-serif: var(--f-head);
    --f-mono: var(--f-sans);
    --f-code: ui-monospace, Consolas, "Cascadia Mono", "Courier New", monospace;
    --w: 1200px; --w-wide: 1320px; --w-mid: 860px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #061523; --surface: #0B2134; --surface-2: #0E273D; --surface-3: #123049;
    --ink: #EAF2FA; --ink-2: #C3D2E1; --muted: #93A7BC; --faint: #6B8197;
    --rule: #1A3851; --rule-2: #26496A;
    --blue: #5AB4EE; --blue-ink: #8ACBF5; --blue-soft: #10314D; --link: #74C1F2; --link-visited: #B9A3F5;
    --navy: #0A2740; --navy-2: #072238; --navy-3: #020E19; --on-navy: #FFFFFF; --on-navy-2: #A6B8CB;
    --pink: #FF5C82; --pink-2: #FF7896; --pink-soft: rgba(255, 92, 130, .14);
    --gold: #FF5C82; --gold-2: #FF7896; --gold-ink: #FFFFFF;
    --good: #4CD08F; --good-bg: rgba(76, 208, 143, .13); --bad: #FF7D8F; --bad-bg: rgba(255, 125, 143, .13); --open: #F4B556; --open-bg: rgba(244, 181, 86, .13); --neutral: #AEBDCF; --neutral-bg: rgba(174, 189, 207, .12);
    --bar: #24527A; --bar-on: #5AB4EE; --bar-partial: #173A58;
    --t0: #10283E; --t1: #15395A; --t2: #1E527F; --t3: #2C70A8; --t4: #4593D1; --t5: #6FB9F0;
    --ga: #4CD08F; --gb: #93CF5F; --gc: #F4B556; --gd: #F68B4E; --gf: #FF7D8F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 17px/1.65 var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: var(--f-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.02em; line-height: 1.12; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem); }
h3, .h3 { font-size: 1.32rem; }
h4, .h4 { font-size: 1.12rem; }
.h5 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .2s; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
code, .mono { font-family: var(--f-sans); font-variant-numeric: tabular-nums; }
code { font-family: var(--f-code); font-size: .88em; background: var(--surface-3); padding: .1em .35em; border-radius: 4px; }
pre.code, pre.log { background: var(--surface-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; font: 500 .85rem/1.55 var(--f-code); white-space: pre-wrap; }
pre.code code { background: none; padding: 0; }
pre.log { max-height: 260px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
::selection { background: var(--pink); color: #fff; }
strong, b { color: inherit; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pink); color: #fff; padding: 10px 16px; font-weight: 700; border-radius: 4px; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: .88rem; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.mt-2 { margin-top: 1rem; } .strong { font-weight: 700; } .inline { display: inline; }
.good { color: var(--good); } .bad { color: var(--bad); }
.yes { color: var(--good); font-weight: 600; } .no { color: var(--bad); font-weight: 600; }
.fa-regular, .fa-brands { line-height: 1; }
h1 .fa-regular, h2 .fa-regular, h3 .fa-regular, h4 .fa-regular, h5 .fa-regular { color: var(--pink); margin-right: .45em; font-size: .85em; }
h3.good .fa-regular, h4.good .fa-regular, h5.good .fa-regular { color: var(--good); } h3.bad .fa-regular, h4.bad .fa-regular, h5.bad .fa-regular { color: var(--bad); }

.container { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; }
.container-mid { max-width: var(--w-mid); }
#app { min-height: 60vh; padding-bottom: 64px; }
#page-home { margin-bottom: -64px; }

/* ---- buttons ------------------------------------------------------------------------------------------------- */

.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .78em 1.35em; border-radius: var(--radius-sm); border: 2px solid transparent;
       font: 600 .9rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: color .3s, background .3s, border-color .3s, box-shadow .3s, transform .12s; white-space: nowrap; color: inherit; background: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn::before { content: ""; position: absolute; inset: 0; width: 0; z-index: -1; transition: width .45s ease; }
.btn:hover::before { width: 100%; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary::before { background: var(--pink); }
.btn-primary:hover { color: #fff; }
:root[data-theme="dark"] .btn-primary { background: #2B8BD3; }
.btn-gold { background: var(--pink); color: #fff; }
.btn-gold::before { background: var(--navy); }
.btn-gold:hover { color: #fff; }
:root[data-theme="dark"] .btn-gold::before { background: #1E76BB; }
.btn-white { background: #fff; color: var(--pink); }
.btn-white::before { background: var(--navy); }
.btn-white:hover { color: #fff; }
.btn-ghost { border-color: var(--rule-2); color: var(--ink); background: var(--surface); }
.btn-ghost::before { background: var(--blue); }
.btn-ghost:hover { border-color: var(--blue); color: #fff; }
.btn-sm { padding: .5em .9em; font-size: .78rem; }
.btn-lg { padding: .95em 1.6em; font-size: .98rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: .5em .7em; }

/* ---- the top bar and the header ------------------------------------------------------------------------------ */

.banner { background: var(--blue); color: #fff; font-size: .86rem; }
:root[data-theme="dark"] .banner { background: #0D4C80; }
.banner-inner { display: flex; align-items: center; gap: 18px; min-height: 42px; }
.banner-facts { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; min-width: 0; }
.banner-facts li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.banner-facts .fa-regular { color: var(--teal); }
.banner-links { margin-left: auto; display: flex; gap: 22px; }
.banner-links a { color: #fff; text-decoration: none; font: 500 .86rem var(--f-head); opacity: .92; }
.banner-links a:hover { color: #fff; opacity: 1; text-decoration: underline; }

.site-nav { position: sticky; top: 0; z-index: 40; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule); transition: box-shadow .25s; }
.site-nav.is-scrolled { box-shadow: 0 8px 30px rgba(4, 52, 96, .1); }
.nav-inner { display: flex; align-items: center; gap: 26px; min-height: 84px; }
.nav-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.nav-logo:hover { color: var(--ink); }
.logo-mark { width: 44px; height: 40px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text small { font: 600 .62rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 5px; }
.logo-word { font: 600 1.45rem/1 var(--f-head); letter-spacing: -.01em; color: var(--ink); }
.logo-word b { color: var(--pink); font-weight: 600; }
.nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-links a { position: relative; color: var(--ink); text-decoration: none; font: 500 1.02rem var(--f-head); padding: 10px 11px; }
.nav-links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--pink); }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-search { position: relative; width: 42px; height: 42px; flex: none; }
.nav-search input { position: absolute; right: 0; top: 0; height: 42px; width: 42px; padding: 0; opacity: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 99px; font: 500 .95rem var(--f-sans); transition: width .3s ease, opacity .2s, padding .3s; }
.nav-search input::placeholder { color: var(--muted); }
.nav-search input:focus { outline: none; }
.nav-search:focus-within input, .nav-search.is-open input { width: 320px; padding: 0 46px 0 18px; opacity: 1; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 170, 225, .2), var(--shadow-lg); }
.nav-search button { position: absolute; right: 0; top: 0; z-index: 1; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--rule); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.nav-search button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.nav-search:focus-within button, .nav-search.is-open button { background: transparent; border-color: transparent; color: var(--blue); }
.nav-search .csearch-list { top: calc(100% + 8px); right: 0; left: auto; width: 340px; }
.theme-toggle { background: var(--surface-3); border: 1px solid var(--rule); color: var(--ink); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex: none; transition: background .2s, color .2s; }
.theme-toggle:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.nav-share { padding: .85em 1.25em; }
.nav-cta-short { display: none; }
.nav-burger { display: none; background: var(--navy); border: 0; color: #fff; width: 44px; height: 44px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; flex: none; }
:root[data-theme="dark"] .nav-burger { background: var(--surface-3); }

.mobile-menu { display: none; position: fixed; top: 126px; left: 0; right: 0; bottom: 0; z-index: 39; background: var(--surface); overflow-y: auto; padding: 18px 20px 40px; border-top: 3px solid var(--pink); }
.mobile-menu.is-open { display: block; animation: drop .25s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu > a { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font: 500 1.08rem var(--f-head); }
.mobile-menu > a:hover { color: var(--pink); }
.mobile-menu > a .fa-regular { width: 22px; color: var(--pink); }
.mobile-menu .btn { margin-top: 20px; border-bottom: 0; color: #fff; }
.mobile-menu .csearch { margin-bottom: 8px; }
.theme-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

/* ---- page titles, section titles, eyebrows, breadcrumbs ---------------------------------------------------- */

.eyebrow { display: inline-flex; align-items: center; gap: .55em; font: 600 .8rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--pink); margin: 0 0 .8rem; }
.eyebrow .fa-regular { font-size: .95em; }
.eyebrow-gold { color: var(--pink); }
.share-band .eyebrow-gold, .hero .eyebrow-gold { color: #fff; }
.lead { font-size: 1.14rem; line-height: 1.65; color: var(--ink-2); max-width: 780px; }
.h1-sub { display: block; font: 500 .48em/1.3 var(--f-sans); color: var(--muted); letter-spacing: 0; margin-top: .4em; }
.h-note { font: 600 .74rem var(--f-head); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-left: .5em; vertical-align: middle; }
.count { display: inline-block; font: 700 .72em/1 var(--f-sans); background: var(--pink-soft); color: var(--pink); border-radius: 99px; padding: .32em .62em; vertical-align: middle; }

/* The page-title band (like the template's inner-page header): the breadcrumbs, and the page head right after them,
   sit on a full-width navy band; a company's dossier or a case file overlaps its foot. */
.crumbs { position: relative; padding: 22px 0 6px; font-size: .9rem; background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax -2px); color: var(--on-navy-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--on-navy-2); }
.crumbs li + li::before { content: "\203A"; color: var(--pink); margin-right: 4px; font-weight: 700; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { color: var(--teal); text-decoration: underline; }
.crumbs { padding-bottom: 30px; margin-bottom: 28px; }
.crumbs:has(+ .page-head), .crumbs:has(+ div > .page-head:first-child) { padding-bottom: 0; margin-bottom: 0; }
.crumbs:has(+ .dossier) { padding-bottom: 86px; margin-bottom: 0; }
.page-head { padding: 28px 0 10px; }
.page-head .lead { margin-bottom: 1.2rem; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) { position: relative; padding: 16px 0 44px; margin-bottom: 30px; background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax -2px); color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child)::after { content: ""; position: absolute; right: -4%; bottom: -90px; width: 300px; height: 300px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .035); pointer-events: none; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) h1 { color: #fff; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .h1-sub { color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .lead { color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .lead strong { color: #fff; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) a { color: #fff; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) a:hover { color: var(--teal); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .eyebrow { color: var(--teal); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .muted, :is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .small { color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .btn-ghost:hover { border-color: var(--blue); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .chip b { color: #fff; }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .delta-flat, :is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) .delta-na { color: var(--on-navy-2); }
:is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) > *:last-child { margin-bottom: 0; }

.sec-title { max-width: 780px; margin-bottom: 34px; }
.sec-title h2 { margin: 0; font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); line-height: 1.2; }
.sec-title p { margin: 10px 0 0; color: var(--muted); }
.sec-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-title.light h2 { color: #fff; }
.sec-title.light p { color: var(--on-navy-2); }
.sec-title.light p a { color: #fff; }
.mk-head-row .sec-title { margin-bottom: 0; }
.link-more, .more-link a { display: inline-flex; align-items: center; gap: 8px; font: 600 .86rem var(--f-head); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.link-more .fa-regular, .more-link a .fa-regular { color: var(--pink); font-size: .8em; transition: transform .2s; }
.link-more:hover, .more-link a:hover { color: var(--pink); }
.link-more:hover .fa-regular, .more-link a:hover .fa-regular { transform: translateX(3px); }
.more-link { text-align: center; margin: 30px 0 0; }

/* ---- cards and layout ----------------------------------------------------------------------------------------- */

.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 24px 26px; }
.card-hover { transition: transform .25s, box-shadow .25s, border-color .25s; text-decoration: none; color: inherit; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; margin-top: 22px; align-items: start; }
.layout-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.layout-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 104px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.block { margin: 64px 0; }
.layout-main .block, .layout-main .section-list { margin: 0; }
.block-head, .mk-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 26px; flex-wrap: wrap; }
.block-head h2, .mk-head-row h2 { margin: 0; }
.mk-head { max-width: 760px; margin-bottom: 18px; }
.mk-head-row .mk-head { margin-bottom: 0; }
.mk-head.center { margin-left: auto; margin-right: auto; }
.section-list > h2 { margin-bottom: 14px; }
.empty { padding: 28px; border: 2px dashed var(--rule-2); border-radius: var(--radius); color: var(--muted); text-align: center; background: var(--surface-2); }
.empty-invite { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-invite > .fa-regular { font-size: 1.8rem; color: var(--pink); }
.empty-invite p { margin: 0 0 8px; color: var(--ink-2); max-width: 520px; }

.band { padding: 90px 0; position: relative; }
.band-navy { background: var(--navy); background-image: radial-gradient(circle at 85% 10%, rgba(41, 170, 225, .18), transparent 40%), radial-gradient(circle at 5% 95%, rgba(236, 70, 110, .14), transparent 35%); }
.band-grey { background: var(--surface-3); }
:root[data-theme="dark"] .band-grey { background: #08192A; }
.band-blue { background: linear-gradient(120deg, #29AAE1, #1E76BB) no-repeat; background-size: 100% 380px; padding-bottom: 20px; }
:root[data-theme="dark"] .band-blue { background-image: linear-gradient(120deg, #0F5F93, #0B3E66); }
.band-panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px; }
.band-panel .table-wrap { border: 0; }

/* ---- the hero ------------------------------------------------------------------------------------------------- */

.hero { position: relative; background: var(--navy); color: var(--on-navy); overflow: hidden; padding: 70px 0 150px; isolation: isolate;
        background-image: linear-gradient(115deg, #043460 0%, #054073 55%, #0A5C9B 100%); }
:root[data-theme="dark"] .hero { background-image: linear-gradient(115deg, #031627 0%, #052540 55%, #083A62 100%); }
.hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-deco i { position: absolute; display: block; border-radius: 50%; }
.hero-deco .hd-1 { width: 760px; height: 760px; right: -220px; top: -260px; border: 110px solid rgba(255, 255, 255, .035); }
.hero-deco .hd-2 { width: 520px; height: 520px; left: -200px; bottom: -300px; background: radial-gradient(circle, rgba(236, 70, 110, .35), transparent 65%); }
.hero-deco .hd-3 { width: 420px; height: 420px; right: 18%; bottom: -260px; background: radial-gradient(circle, rgba(105, 214, 207, .22), transparent 65%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(90deg, transparent 40%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%); }
.hero-inner { position: relative; }
.hero-copy, .hero-demo { min-width: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.06; margin-bottom: .45em; font-weight: 600; }
.hero h1 .h1-line2 { display: block; }
.hero h1 em { font-style: normal; color: var(--pink); }
:root[data-theme="dark"] .hero h1 em { color: #FF6E90; }
.hero .lead { color: #D1DCE8; font-size: 1.12rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 .82rem var(--f-head); color: #E2EAF2; text-transform: uppercase; letter-spacing: .08em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); padding: 7px 14px; border-radius: 99px; margin-bottom: 22px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: live 2s infinite; flex: none; display: inline-block; vertical-align: middle; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.hero-find { margin: 28px 0 24px; }
.hero-help { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font: 500 1rem/1.35 var(--f-head); }
.hero-help small { display: block; font: 400 .88rem var(--f-sans); color: var(--on-navy-2); }
.hero-help .fa-arrow-right { font-size: .8em; color: var(--teal); margin-left: 4px; transition: transform .2s; }
.hero-help:hover { color: var(--teal); }
.hero-help:hover .fa-arrow-right { transform: translateX(4px); }
.hero-help-icon { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--teal); display: inline-flex; align-items: center; justify-content: center; color: var(--teal); font-size: 1.1rem; flex: none; }
.hero-micro { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--on-navy-2); font-size: .88rem; }
.hero-micro li { display: inline-flex; align-items: center; gap: 8px; }
.hero-micro .fa-regular { color: var(--teal); }
.alert-banner { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--pink); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: .96rem; }
.alert-banner strong { color: var(--pink); white-space: nowrap; font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; }
.alert-banner span:not(.dot-live) { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-banner > .fa-regular { color: var(--pink); }
.alert-banner:hover { color: var(--ink); box-shadow: var(--shadow-lg); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in, html:not(.js) .reveal, html.is-ready .reveal { opacity: 1; transform: none; }
.rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.rise-d1 { animation-delay: .06s; } .rise-d2 { animation-delay: .12s; } .rise-d3 { animation-delay: .18s; } .rise-d4 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ---- the Record Check (the hero animation) --------------------------------------------------------------------- */

.rc { position: relative; }
.rc-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; justify-content: space-between; }
.rc-steps li { flex: 1; display: flex; align-items: center; gap: 9px; font: 500 .9rem/1.2 var(--f-head); color: var(--on-navy-2); padding: 8px 10px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .35s, color .35s, border-color .35s; white-space: nowrap; }
.rc-steps li b { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 .8rem var(--f-head); background: rgba(255, 255, 255, .12); color: #fff; transition: background .35s; }
.rc-steps li.is-done b { background: var(--teal); color: var(--navy); }
.rc-steps li.is-on { color: #fff; background: rgba(236, 70, 110, .18); border-color: rgba(236, 70, 110, .6); }
.rc-steps li.is-on b { background: var(--pink); }
.rc-window { position: relative; background: var(--surface); border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 10, 30, .45), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; color: var(--ink); }
.rc-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--surface-3); border-bottom: 1px solid var(--rule); }
.rc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #F26B6B; }
.rc-bar i:nth-child(2) { background: #F5BE4F; } .rc-bar i:nth-child(3) { background: #5BC97E; }
.rc-bar span { flex: 1; margin: 0 8px 0 10px; text-align: center; font: 500 .76rem var(--f-sans); color: var(--muted); background: var(--surface); border-radius: 99px; padding: 3px 10px; max-width: 260px; margin-left: auto; margin-right: auto; }
.rc-search { display: flex; align-items: center; gap: 10px; margin: 16px 18px 6px; padding: 5px 5px 5px 14px; border: 2px solid var(--blue); border-radius: 8px; background: var(--surface); color: var(--muted); box-shadow: 0 0 0 4px rgba(30, 118, 187, .12); }
.rc-typed { flex: 1; min-width: 0; display: flex; align-items: center; font: 500 1.08rem var(--f-head); color: var(--ink); white-space: nowrap; overflow: hidden; }
.rc-caret { display: inline-block; width: 2px; height: 1.2em; background: var(--pink); margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.rc-go { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 5px; background: var(--blue); color: #fff; font: 600 .8rem var(--f-head); text-transform: uppercase; letter-spacing: .04em; transition: transform .12s, background .2s; flex: none; }
.rc-go.is-pressed { transform: scale(.92); background: var(--pink); }
.rc-card { display: block; padding: 12px 18px 18px; color: var(--ink); text-decoration: none; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.rc-card:hover, .rc-card:focus { color: var(--ink); }
.rc-card.is-on { opacity: 1; transform: none; }
.rc-card.is-dim { opacity: .28; filter: blur(1.5px) grayscale(.4); transform: scale(.985); transition-duration: .35s; }
.rc-card.is-reset, .rc-card.is-reset * { transition: none !important; }
.rc-card.is-reset { opacity: 0; transform: translateY(10px); }
.rc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.rc-head .mono-badge { width: 44px; height: 44px; font-size: 1rem; flex: none; }
.rc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-name b { font: 600 1.25rem/1.2 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-name small { font-size: .84rem; color: var(--muted); }
.rc-grade { --g: var(--faint); width: 58px; height: 58px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--g); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--g); transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.2, 1.7, .4, 1); }
.rc-grade b { font: 700 1.55rem/1 var(--f-head); }
.rc-grade small { font: 600 .55rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; opacity: .9; margin-top: 2px; }
.rc-grade.grade-a { --g: var(--ga); } .rc-grade.grade-b { --g: var(--gb); } .rc-grade.grade-c { --g: var(--gc); } .rc-grade.grade-d { --g: var(--gd); } .rc-grade.grade-f { --g: var(--gf); }
:root[data-theme="dark"] .rc-grade { color: #04192B; }
.rc-card.is-scored .rc-grade { transform: none; }
.rc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 12px 0 10px; }
.rc-big::after { content: ""; flex-basis: 100%; order: 2; height: 0; }
.rc-big .rc-delta { order: 3; }
.rc-big b { font: 600 2.3rem/1 var(--f-head); color: var(--ink); letter-spacing: -.02em; }
.rc-big-l { font-size: .92rem; color: var(--muted); white-space: nowrap; }
.rc-delta { font: 600 .78rem var(--f-head); padding: 3px 9px; border-radius: 99px; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; }
.rc-delta.is-up { background: var(--bad-bg); color: var(--bad); } .rc-delta.is-down { background: var(--good-bg); color: var(--good); }
.rc-chart { display: flex; align-items: flex-end; gap: 4px; height: 64px; padding-bottom: 2px; border-bottom: 1px solid var(--rule-2); }
.rc-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cyan), var(--blue)); transform-origin: bottom; transform: scaleY(0); transition: transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.rc-chart i:last-child { background: linear-gradient(180deg, #FF7C9A, var(--pink)); }
.rc-card.is-built .rc-chart i { transform: scaleY(1); }
.rc-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 12px; }
.rc-meter { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; }
.rc-ml { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rc-meter b { font: 600 1rem var(--f-head); }
.rc-track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rc-fill { display: block; height: 100%; width: var(--w); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .35s; }
.rc-fill-t { background: var(--teal); } .rc-fill-r { background: var(--cyan); }
.rc-card.is-built .rc-fill { transform: none; }
.rc-issue { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--rule); font-size: .9rem; line-height: 1.35; opacity: 0; transition: opacity .5s ease .9s; }
.rc-issue > .fa-regular { color: var(--pink); margin-top: 3px; }
.rc-issue small { display: block; font: 600 .66rem var(--f-head); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 2px; }
.rc-issue span span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rc-card.is-built .rc-issue { opacity: 1; }
.rc-verdict { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 .95rem var(--f-head); color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.rc-verdict .fa-regular { margin-left: auto; color: var(--pink); transition: transform .2s; }
.rc-card.is-scored .rc-verdict { opacity: 1; transform: none; }
.rc-card:hover .rc-verdict .fa-regular { transform: translateX(4px); }
.rc-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: .84rem; color: var(--on-navy-2); }
.rc-note .fa-regular { color: var(--teal); }
html:not(.js) .rc-card { opacity: 1; transform: none; }

/* ---- the three feature cards under the hero ------------------------------------------------------------------- */

.features { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: -92px; }
.feature { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 26px 28px 22px; border-radius: var(--radius); color: #fff; text-decoration: none; box-shadow: 0 20px 44px rgba(4, 52, 96, .22); transition: transform .3s, box-shadow .3s; }
.feature:hover { color: #fff; transform: translateY(-5px); box-shadow: 0 28px 60px rgba(4, 52, 96, .3); }
.feature-blue { background: linear-gradient(135deg, #1E76BB, #043460); }
.feature-cyan { background: linear-gradient(135deg, #29AAE1, #1E76BB); }
.feature-pink { background: linear-gradient(135deg, #F05A7E, #D9335B); }
.feature-bgicon { position: absolute; right: -14px; bottom: -22px; font-size: 7.5rem; opacity: .12; transition: transform .5s; }
.feature:hover .feature-bgicon { transform: scale(1.08) rotate(-6deg); }
.feature-t { position: relative; font: 600 1.45rem/1.25 var(--f-head); }
.feature-d { position: relative; color: rgba(255, 255, 255, .86); font-size: .96rem; }
.feature-go { position: relative; margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font: 600 .82rem var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.feature-go .fa-regular { transition: transform .2s; }
.feature:hover .feature-go .fa-regular { transform: translateX(4px); }
.feature-quote { position: absolute; right: 22px; top: -4px; width: 46px; height: 54px; background: #fff; color: var(--pink); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; border-radius: 0 0 6px 6px; font-size: 1.2rem; }
.feature-pink .feature-t { font-size: 1.22rem; padding-right: 50px; }

/* ---- the intro (the record in numbers) ----------------------------------------------------------------------- */

.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin: 80px 0 90px; }
.intro-panel { position: relative; border-radius: 12px; padding: 18px; background: linear-gradient(135deg, #1E76BB, #043460); box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate; }
.intro-panel::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .05); }
.intro-panel::after { content: ""; position: absolute; z-index: -1; left: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 70, 110, .45), transparent 65%); }
.intro .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.intro .stat { padding: 26px 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(2px); }
.intro .stat > .fa-regular { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 14px; }
.intro .stat-n { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.intro .stat-l { color: var(--on-navy-2); }
.intro .stat-live > .fa-regular { color: #34D399; }
.intro-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.intro-letter { font: 600 5.2rem/.8 var(--f-head); color: var(--blue); flex: none; }
.intro-brand { margin: 4px 0 6px; font: 600 .86rem var(--f-head); text-transform: uppercase; letter-spacing: .12em; color: var(--blue); }
.intro-title h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.intro-copy > p { color: var(--muted); }
.list-chevron { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.list-chevron li { position: relative; padding-left: 30px; font-weight: 500; color: var(--ink-2); }
.list-chevron li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--pink-soft); }
.list-chevron li::after { content: ""; position: absolute; left: 6px; top: calc(.32em + 5px); width: 5px; height: 5px; border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: rotate(-45deg); }

/* ---- the company search -------------------------------------------------------------------------------------- */

.csearch { position: relative; }
.csearch-label { display: block; font: 600 1rem var(--f-head); margin-bottom: 10px; color: var(--ink); }
.hero .csearch-label { color: #fff; }
.csearch-row { display: flex; align-items: stretch; background: var(--surface); border: 2px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.hero .csearch-row { border-color: transparent; box-shadow: 0 18px 50px rgba(0, 10, 30, .4); }
.csearch-row:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 170, 225, .25); }
.hero .csearch-row:focus-within { box-shadow: 0 0 0 4px rgba(41, 170, 225, .45), 0 18px 50px rgba(0, 10, 30, .4); }
.csearch-icon { display: flex; align-items: center; padding: 0 4px 0 18px; color: var(--muted); }
.csearch-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 1.06rem var(--f-sans); padding: 15px 12px; }
.csearch-input::placeholder { color: var(--faint); }
.csearch-input:focus { outline: none; }
.csearch-row .btn { border-radius: 0; margin: 0; }
.csearch-hero .csearch-input { font-size: 1.12rem; padding: 19px 12px; }
.csearch-hero .btn { padding-left: 1.8em; padding-right: 1.8em; }
.csearch-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; color: var(--ink); }
.csearch-list li a, .csearch-list li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.csearch-list li.is-active a, .csearch-list li a:hover, .csearch-list li.is-active button, .csearch-list li button:hover { background: var(--blue-soft); color: var(--ink); }
.csearch-list .cs-name { font-weight: 600; flex: 1; min-width: 0; }
.csearch-list .cs-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.csearch-list .cs-empty { padding: 10px 12px; color: var(--muted); font-size: .9rem; }
.csearch-popular { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.csearch-popular span { color: var(--on-navy-2); margin-right: 4px; }
.csearch-popular a { color: #fff; text-decoration: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: rgba(255, 255, 255, .06); transition: background .2s, border-color .2s; }
.csearch-popular a:hover { border-color: var(--pink); background: var(--pink); color: #fff; }
.csearch-inline .input { width: 100%; }
.finder-bar { padding: 16px; margin: 18px 0 8px; }
.crumbs + .page-head + .finder-bar { margin-top: -62px; position: relative; z-index: 2; }
.layout-side .csearch-icon { display: none; }
.layout-side .csearch-row .btn span { display: none; }
.layout-side .csearch-input { padding: 12px; font-size: 1rem; }

/* ---- stats, tasks, tiles --------------------------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 2; }
.stat { padding: 20px 22px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat > .fa-regular { color: var(--pink); font-size: 1.1rem; margin-bottom: 6px; }
.stat-n { font: 600 1.75rem/1.1 var(--f-head); color: var(--ink); }
.stat-l { font-size: .88rem; color: var(--muted); }
.stat-live .fa-regular { color: var(--good); }
.tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.task { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 26px 28px; overflow: hidden; border: 0; }
.task-top { position: relative; align-self: stretch; height: 104px; margin: 0 -26px; background: linear-gradient(135deg, #69D6CF, #29AAE1); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); display: flex; align-items: center; justify-content: flex-end; padding-right: 22px; color: rgba(255, 255, 255, .28); font-size: 3.6rem; overflow: hidden; isolation: isolate; }
.task-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #F0708F, #EC466E); opacity: 0; transition: opacity .45s ease; }
.task-top .fa-regular { transform: translateY(-8px) rotate(-8deg); }
.task-icon { position: relative; width: 70px; height: 70px; margin-top: -40px; margin-bottom: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--navy); font-size: 1.45rem; border: 4px solid var(--teal); transition: border-color .4s, color .4s; }
:root[data-theme="dark"] .task-icon { color: var(--blue); }
.task-t { font: 600 1.28rem/1.25 var(--f-head); color: var(--ink); margin-bottom: 8px; transition: color .3s; }
.task-d { font-size: .95rem; color: var(--muted); margin-bottom: 16px; }
.task-go { margin-top: auto; font: 600 .82rem var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.task-go::before { content: ""; width: 0; height: 2px; background: var(--pink); transition: width .3s; }
.task:hover .task-top::before { opacity: 1; }
.task:hover .task-icon { border-color: var(--pink); color: var(--pink); }
.task:hover .task-t, .task:hover .task-go { color: var(--pink); }
.task:hover .task-go::before { width: 18px; }
.task-accent .task-top { background: linear-gradient(135deg, #F0708F, #EC466E); }
.task-accent .task-top::before { background: linear-gradient(135deg, #1E76BB, #043460); }
.task-accent .task-icon { border-color: var(--pink); color: var(--pink); }
.task-accent:hover .task-icon { border-color: var(--blue); color: var(--blue); }
.ktiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ktile { --c: var(--teal); position: relative; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 4px; min-height: 150px; border: 0; border-top: 4px solid var(--c); }
.ktile:nth-child(6n+2) { --c: var(--cyan); } .ktile:nth-child(6n+3) { --c: var(--blue); } .ktile:nth-child(6n+4) { --c: var(--purple); } .ktile:nth-child(6n+5) { --c: var(--green); } .ktile:nth-child(6n+6) { --c: var(--pink); }
.ktile-icon { width: 50px; height: 50px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; transition: background .3s, color .3s; }
.ktile-name { font: 600 1.1rem/1.3 var(--f-head); color: var(--ink); transition: color .3s; }
.ktile-n { font-size: .86rem; color: var(--muted); }
.ktile-go { position: absolute; right: 20px; top: 24px; color: var(--faint); transition: transform .3s, color .3s; }
.ktile:hover .ktile-icon { background: var(--c); color: #fff; }
.ktile:hover .ktile-name { color: var(--pink); }
.ktile:hover .ktile-go { color: var(--pink); transform: translateX(4px); }

/* ---- grades, the seal, score parts ---------------------------------------------------------------------------- */

.grade { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font: 700 1rem/1 var(--f-head); color: #fff; flex: none; border: 2px solid transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.grade-a { background: var(--ga); } .grade-b { background: var(--gb); } .grade-c { background: var(--gc); } .grade-d { background: var(--gd); } .grade-f { background: var(--gf); }
:root[data-theme="dark"] .grade { color: #04192B; }
.grade-na { background: var(--surface-3); color: var(--faint) !important; border-color: var(--rule-2); box-shadow: none; }
.grade-sm { width: 28px; height: 28px; font-size: .86rem; }
.grade-xs { width: 22px; height: 22px; font-size: .72rem; }
.seal { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; --g: var(--faint); }
.seal-a { --g: var(--ga); } .seal-b { --g: var(--gb); } .seal-c { --g: var(--gc); } .seal-d { --g: var(--gd); } .seal-f { --g: var(--gf); }
.seal svg { width: 136px; height: 136px; }
.seal-teeth { fill: none; stroke: var(--g); stroke-width: 2; stroke-dasharray: 2 4; opacity: .55; }
.seal-track { fill: var(--surface); stroke: var(--surface-3); stroke-width: 10; }
.seal-ring { fill: none; stroke: var(--g); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 64px 64px; stroke-dasharray: var(--fill) var(--circ); }
.js .seal-ring { animation: ring 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ring { from { stroke-dasharray: 0 var(--circ); } }
.seal-grade { fill: var(--g); font: 700 46px var(--f-head); text-anchor: middle; }
.seal figcaption { display: flex; flex-direction: column; align-items: center; }
.seal-value { font: 600 1.35rem/1.1 var(--f-head); color: var(--ink); }
.seal-value small { font: 500 .8rem var(--f-sans); color: var(--muted); margin-left: 2px; }
.seal-label { font: 600 .7rem var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.layout-side > .seal { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.sparts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.sparts li { display: grid; grid-template-columns: 170px 1fr 56px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.spart-l { font-weight: 600; font-size: .92rem; color: var(--ink); }
.spart-track { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.spart-fill { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 99px; }
.spart-n { font: 700 .95rem var(--f-head); text-align: right; color: var(--ink); }
.spart-n small { color: var(--muted); font-weight: 500; }
.spart-note { grid-column: 2 / 4; font-size: .8rem; color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 4px; font: 600 .84rem var(--f-head); white-space: nowrap; }
.delta-up { color: var(--bad); } .delta-down { color: var(--good); } .delta-flat, .delta-na { color: var(--muted); }

/* ---- the dossier (a company's header) ------------------------------------------------------------------------- */

.dossier { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 30px; align-items: center; margin-top: -64px; padding: 32px 34px; background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); border-top: 5px solid var(--pink); }
.dossier h1 { margin-bottom: .2em; }
.dossier-legal { font-size: .84rem; color: var(--muted); margin: 0 0 12px; }
.dossier-sum { font-size: 1.08rem; color: var(--ink-2); max-width: 780px; }
.dossier-sum strong { color: var(--ink); }
.dossier-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.dossier-seal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-left: 26px; border-left: 1px solid var(--rule); }
.dossier-seal p { margin: 0; }
.ctabs { display: flex; gap: 4px; margin: 0 0 4px; border-bottom: 2px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; text-decoration: none; color: var(--ink-2); font: 500 1rem var(--f-head); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ctabs a .fa-regular { color: var(--faint); }
.ctabs a:hover { color: var(--pink); }
.ctabs a.is-on { color: var(--ink); border-bottom-color: var(--pink); }
.ctabs a.is-on .fa-regular { color: var(--pink); }
.dossier + .ctabs { margin-top: 18px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi { padding: 18px 18px; border-left: 1px solid var(--rule); min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi dt { display: flex; align-items: center; gap: 6px; font: 600 .7rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.kpi dt .fa-regular { color: var(--pink); }
.kpi dd { margin: 0; font: 600 1.55rem/1.15 var(--f-head); color: var(--ink); }
.kpi dd small { font: 500 .8rem var(--f-sans); color: var(--muted); }
.kpi-note { margin: 4px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.kpi-bad dd { color: var(--bad); }

/* ---- company cards and lists --------------------------------------------------------------------------------- */

.cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ccard { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-width: 0; border: 0; border-bottom: 3px solid transparent; }
.ccard:hover { border-bottom-color: var(--pink); }
.ccard-top { display: flex; align-items: center; justify-content: space-between; }
.mono-badge { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #1E76BB, #043460); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 .92rem var(--f-head); letter-spacing: .02em; }
:root[data-theme="dark"] .mono-badge { background: linear-gradient(135deg, #2B8BD3, #0D4C80); }
.ccard-name { font: 600 1.12rem/1.25 var(--f-head); color: var(--ink); overflow-wrap: anywhere; transition: color .3s; }
.ccard:hover .ccard-name { color: var(--pink); }
.ccard-cat { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ccard-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .88rem; padding-top: 10px; border-top: 1px solid var(--rule); margin-top: auto; }
.ccard-stats b { font: 600 1.08rem var(--f-head); color: var(--ink); }
.ccard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); }
.ccard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ccard-note { font: 600 .78rem var(--f-head); color: var(--pink); }
.clist { list-style: none; margin: 0; padding: 0; }
.clist li + li { border-top: 1px solid var(--rule); }
.clist a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 2px; text-decoration: none; color: var(--ink); }
.clist a .grade { grid-row: 1 / 3; }
.clist strong { font: 600 .98rem/1.3 var(--f-head); }
.clist span:last-child { font-size: .8rem; color: var(--muted); }
.clist a:hover strong { color: var(--pink); }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li + li { border-top: 1px solid var(--rule); }
.side-links a { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--ink); font-size: .95rem; }
.side-links a .fa-regular { width: 18px; color: var(--pink); }
.side-links a span { margin-left: auto; font-size: .8rem; color: var(--muted); }
.side-links a:hover { color: var(--pink); }
.side-links-cols { columns: 2; column-gap: 16px; } .side-links-cols li { break-inside: avoid; }
.side-cta { border-top: 4px solid var(--pink); }
.name-cols { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px; }
.name-cols-wide { columns: 4; }
.name-cols li { break-inside: avoid; display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.name-cols li a { text-decoration: none; color: var(--ink); }
.name-cols li a:hover { color: var(--pink); }
.name-cols li span { font-size: .8rem; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.letters a { min-width: 40px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); font: 600 .92rem var(--f-head); transition: background .2s, color .2s, border-color .2s; }
.letters a:hover { border-color: var(--pink); color: var(--pink); }
.letters a.is-on { background: var(--pink); color: #fff; border-color: var(--pink); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--rule); font-size: .86rem; color: var(--ink-2); }
.chip b { font-weight: 700; color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; background: var(--blue-soft); color: var(--blue-ink); font: 600 .8rem var(--f-head); text-decoration: none; }
:root[data-theme="dark"] .tag { color: var(--blue); }

/* ---- tables ------------------------------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.card .table-wrap { border-radius: var(--radius-sm); }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table thead th { background: var(--navy); color: #fff; font: 600 .74rem var(--f-head); text-transform: uppercase; letter-spacing: .08em; border-bottom: 0; white-space: nowrap; position: sticky; top: 0; }
:root[data-theme="dark"] .table thead th { background: var(--surface-3); color: var(--ink-2); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody tr:hover { background: var(--blue-soft); }
.table td a { text-decoration: none; font-weight: 500; }
.table td a:hover { text-decoration: underline; }
.table td a > .fa-regular:first-child, .table td a > strong > .fa-regular:first-child { margin-right: .55em; color: var(--faint); }
.table td a:hover > .fa-regular:first-child, .table td a:hover > strong > .fa-regular:first-child { color: var(--pink); }
.table tr.is-on { background: var(--pink-soft) !important; }
.table tr.is-on td:first-child { box-shadow: inset 4px 0 0 var(--pink); }
.table .num { text-align: right; white-space: nowrap; }
.table .center { text-align: center; }
.table .rank { color: var(--faint); width: 40px; }
.cell-sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.cell-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); white-space: nowrap; }
.cell-cat .fa-regular { color: var(--faint); }
.docket-table td { vertical-align: middle; }
.docket-table a.mono { color: var(--ink); font-weight: 600; }
.cmp-table th { font-weight: 600; width: 38%; }
.cmp-table td.is-better { color: var(--good); font-weight: 700; background: var(--good-bg); }

/* ---- stamps -------------------------------------------------------------------------------------------------- */

.stamp { display: inline-flex; align-items: center; font: 600 .74rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; padding: 6px 9px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; }
.stamp-good { color: var(--good); background: var(--good-bg); } .stamp-bad { color: var(--bad); background: var(--bad-bg); } .stamp-open { color: var(--open); background: var(--open-bg); } .stamp-neutral { color: var(--neutral); background: var(--neutral-bg); }
.stamp-sm { font-size: .68rem; padding: 4px 8px; }
.stamp-lg { font-size: .98rem; padding: 10px 16px; border: 2px solid currentColor; border-radius: 6px; transform: rotate(-4deg); }

/* ---- charts -------------------------------------------------------------------------------------------------- */

.mchart { margin: 6px 0 0; }
.mchart-plot { display: flex; align-items: flex-end; gap: 2px; height: 200px; padding: 0 0 22px; border-bottom: 1px solid var(--rule-2); position: relative;
               background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 -1px; }
.mbar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.mbar-fill { width: 100%; background: var(--bar); border-radius: 3px 3px 0 0; transition: background .15s; }
.js .mbar-fill { transform-origin: bottom; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleY(0); } }
.mbar:hover .mbar-fill, .mbar:focus .mbar-fill { background: var(--pink); }
.mbar.is-on .mbar-fill { background: var(--bar-on); }
.mbar.is-partial .mbar-fill { background: repeating-linear-gradient(-45deg, var(--bar) 0 4px, var(--bar-partial) 4px 8px); }
.mbar-x { position: absolute; bottom: -21px; left: 0; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.mchart-cap { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 30px; font-size: .8rem; color: var(--muted); }
.mchart-cap span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.key-on { background: var(--bar-on); } .key-partial { background: repeating-linear-gradient(-45deg, var(--bar) 0 3px, var(--bar-partial) 3px 6px); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 88px; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); }
a.hbar:hover { background: var(--blue-soft); color: var(--ink); }
a.hbar:hover .hbar-label { color: var(--pink); }
.hbar-label { font-size: .92rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar-label .fa-regular { color: var(--faint); flex: none; }
.hbar-track { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 99px; }
.js .hbar-fill { animation: growx .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes growx { from { transform: scaleX(0); } }
.hbar-n { font: 600 .88rem var(--f-head); text-align: right; white-space: nowrap; }
.hbar-n small { display: block; font: 400 .74rem var(--f-sans); color: var(--muted); }
.rbreak-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-3); }
.rseg { width: var(--w); min-width: 2px; }
.rseg-3 { background: var(--good); } .rseg-2 { background: #3FA36B; } .rseg-8 { background: #69B98B; } .rseg-1 { background: #7C8BA8; } .rseg-7 { background: #A3AEC3; } .rseg-6 { background: #D06A4C; } .rseg-4 { background: var(--open); } .rseg-5 { background: var(--bad); }
.rbreak-list { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.rbreak-list li { display: grid; grid-template-columns: 14px 1fr auto 58px; gap: 10px; align-items: center; font-size: .9rem; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.rkey { width: 12px; height: 12px; border-radius: 3px; display: block; }
.rbreak-n { font-size: .82rem; color: var(--muted); }
.rbreak-p { font: 700 .88rem var(--f-head); text-align: right; color: var(--ink); }

.tmap-wrap { margin: 0; }
.tmap { display: block; width: 100%; height: auto; }
.tmap .tile rect { fill: var(--t0); stroke: var(--surface); stroke-width: 2; transition: fill .2s, stroke .2s; }
.tmap .tile text { font: 600 11px var(--f-head); text-anchor: middle; fill: var(--ink-2); pointer-events: none; }
.tmap .t1 rect { fill: var(--t1); } .tmap .t2 rect { fill: var(--t2); } .tmap .t3 rect { fill: var(--t3); } .tmap .t4 rect { fill: var(--t4); } .tmap .t5 rect { fill: var(--t5); }
.tmap .t4 text, .tmap .t5 text { fill: #fff; }
:root[data-theme="dark"] .tmap .t4 text, :root[data-theme="dark"] .tmap .t5 text { fill: #04192B; }
.tmap a:hover rect, .tmap a:focus rect { stroke: var(--pink); stroke-width: 3; }
.tmap a:focus { outline: none; }
.tmap a, .tmap text { text-decoration: none; }
.tmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.tmap-legend > span:first-child { margin-right: auto; }
.tmap-scale { display: inline-flex; gap: 2px; } .tmap-scale i { width: 18px; height: 10px; display: block; border-radius: 2px; }
.tmap-scale .t1 { background: var(--t1); } .tmap-scale .t2 { background: var(--t2); } .tmap-scale .t3 { background: var(--t3); } .tmap-scale .t4 { background: var(--t4); } .tmap-scale .t5 { background: var(--t5); }
.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--navy); color: #fff; font: 500 .82rem/1.35 var(--f-sans); padding: 8px 11px; border-radius: 6px; max-width: 260px; box-shadow: var(--shadow-lg); }

/* ---- experiences, stars, votes ----------------------------------------------------------------------------- */

.xps { display: flex; flex-direction: column; gap: 16px; }
.xp { padding: 22px 24px; border-left: 4px solid var(--teal); }
.xp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.xp-company { font: 600 1rem var(--f-head); color: var(--ink); text-decoration: none; }
.xp-company:hover { color: var(--pink); }
.xp-title { font-size: 1.22rem; margin: 0 0 8px; }
h1.xp-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.xp-title a { color: var(--ink); text-decoration: none; }
.xp-title a:hover { color: var(--pink); }
.xp-text p { color: var(--ink-2); }
.xp-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 6px; }
.xp-facts div { display: flex; flex-direction: column; }
.xp-facts dt { font: 600 .66rem var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.xp-facts dd { margin: 0; font: 600 1rem var(--f-head); color: var(--ink); }
.xp-foot, .cm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--muted); }
.xp-by { display: inline-flex; align-items: center; gap: 6px; }
.xp-actions { display: flex; gap: 6px; }
.vote.is-voted { border-color: var(--good); color: var(--good); }
.vote-flag.is-voted { border-color: var(--bad); color: var(--bad); }
.stars { position: relative; display: inline-block; width: 92px; height: 17px; background: linear-gradient(90deg, var(--rule-2) 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 17'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M8.5 0l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L0 6.2l5.9-.9z'/%3E%3Cuse href='%23s' x='18.8'/%3E%3Cuse href='%23s' x='37.6'/%3E%3Cuse href='%23s' x='56.4'/%3E%3Cuse href='%23s' x='75.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
         mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 17'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M8.5 0l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L0 6.2l5.9-.9z'/%3E%3Cuse href='%23s' x='18.8'/%3E%3Cuse href='%23s' x='37.6'/%3E%3Cuse href='%23s' x='56.4'/%3E%3Cuse href='%23s' x='75.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat; vertical-align: middle; }
.stars-fill { position: absolute; inset: 0 auto 0 0; background: #F5A623; }
.stars-n { font: 700 .92rem var(--f-head); margin-left: 6px; color: var(--ink); }
.rating-sum { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rating-big { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rating-n { font: 600 3rem/1 var(--f-head); color: var(--ink); }
.outcomes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; }
.outcomes li { display: flex; align-items: center; gap: 8px; }
.outcomes b { font: 700 1rem var(--f-head); color: var(--ink); }

/* ---- forms --------------------------------------------------------------------------------------------------- */

.xform { display: flex; flex-direction: column; gap: 16px; border-top: 4px solid var(--pink); }
.xform-title { margin: 0; }
.xform-lead { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--blue-soft); border-radius: 6px; color: var(--ink-2); font-size: .95rem; }
.xform-lead .fa-regular { color: var(--blue); margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font: 600 .98rem var(--f-head); color: var(--ink); padding: 0; }
.field b { color: var(--bad); }
.opt { font: 400 .84rem var(--f-sans); color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.input, .select, .textarea { width: 100%; font: 400 1rem var(--f-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
:root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea { background: var(--surface-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 170, 225, .2); }
.textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.help { font-size: .84rem; color: var(--muted); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate label { font-size: 1.9rem; color: var(--rule-2); cursor: pointer; padding: 2px; transition: transform .1s, color .1s; }
.rate label:hover, .rate label:hover ~ label, .rate input:checked ~ label { color: #F5A623; }
.rate label:hover { transform: scale(1.12); }
.rate input:focus-visible + label { outline: 3px solid var(--cyan); border-radius: 4px; }
.form-done { padding: 14px 16px; border-radius: 6px; font-weight: 600; }
.form-done.is-ok { background: var(--good-bg); color: var(--good); border-left: 5px solid var(--good); }
.form-done.is-err { background: var(--bad-bg); color: var(--bad); border-left: 5px solid var(--bad); }
.cform { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; }
.cform-row { display: flex; gap: 10px; }
.cform-row .input { flex: 1; }
.cmp-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 14px; align-items: end; }
.cmp-vs { width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: #fff; font: 600 .95rem/44px var(--f-head); text-align: center; text-transform: uppercase; margin-bottom: 2px; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 10px 0 24px; }
.cmp-col { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); }
.cmp-col + .cmp-col { border-top-color: var(--pink); }
.cmp-name { font: 600 1.35rem var(--f-head); color: var(--ink); text-align: center; }
.cmp-again { margin: 36px 0 0; }

/* ---- comments ------------------------------------------------------------------------------------------------ */

.comments h2 { margin-bottom: 14px; }
.cthread { display: flex; flex-direction: column; gap: 4px; }
.cm { padding: 16px 0; border-top: 1px solid var(--rule); }
.cm-head { display: flex; align-items: center; gap: 10px; font-size: .92rem; margin-bottom: 6px; color: var(--ink); }
.cm-head time { color: var(--muted); font-size: .84rem; }
.cm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--pink-soft); color: var(--pink); display: inline-flex; align-items: center; justify-content: center; font: 700 .78rem var(--f-head); }
.cm-text p { margin: 0 0 .5em; color: var(--ink-2); }
.cm-replies { margin: 8px 0 0 44px; border-left: 3px solid var(--rule); padding-left: 16px; }
.cm-replies:empty { display: none; }
.cm-reply { border-top: 0; padding: 10px 0; }
.cm-replies .cform { margin: 10px 0; }
.cm.is-new { animation: flash 2s ease-out; }
@keyframes flash { from { background: rgba(41, 170, 225, .2); } to { background: transparent; } }

/* ---- the poll ------------------------------------------------------------------------------------------------ */

.poll-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.poll-opt { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: 600 .96rem var(--f-head); cursor: pointer; overflow: hidden; z-index: 0; text-align: left; transition: border-color .2s; }
.poll-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); z-index: -1; transition: width .6s cubic-bezier(.2, .8, .2, 1); opacity: .18; }
.poll-good::before { background: var(--good); } .poll-open::before { background: var(--open); } .poll-bad::before { background: var(--bad); }
.poll-opt:hover { border-color: var(--pink); }
.poll-opt.is-chosen { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.poll-p { font: 700 .92rem var(--f-head); }

/* ---- records: the case file, timeline, signals, rights ------------------------------------------------------- */

.casefile { position: relative; z-index: 2; padding: 32px 32px 24px; margin-top: 36px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); border-top: 5px solid var(--pink); }
.casefile-tab { position: absolute; left: 0; top: -36px; height: 30px; padding: 0 16px; background: var(--pink); border-radius: 6px 6px 0 0; font: 600 .74rem/30px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.casefile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.casefile-head h1 { margin: 0; }
.casefile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin: 0 0 18px; }
.casefile-grid div { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.casefile-grid dt { font: 600 .68rem var(--f-head); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.casefile-grid dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.timeline { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 0; }
.timeline li { flex: 1; position: relative; padding: 14px 10px 0 0; font-size: .88rem; color: var(--muted); border-top: 4px solid var(--rule-2); }
.timeline li b { display: block; color: var(--ink); font: 600 .9rem var(--f-head); }
.timeline li.is-done { border-top-color: var(--blue); }
.timeline li.is-open { border-top-color: var(--open); border-top-style: dashed; }
.timeline li::before { content: ""; position: absolute; left: 0; top: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--rule-2); }
.timeline li.is-done::before { border-color: var(--blue); background: var(--blue); }
.timeline li.is-open::before { border-color: var(--open); }
.signals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.signal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.signal-list li { display: flex; gap: 12px; align-items: flex-start; }
.signal-list li > .fa-regular { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--ink-2); }
.signals > div:first-child .signal-list li > .fa-regular { background: var(--good-bg); color: var(--good); }
.signals > div:last-child .signal-list li > .fa-regular { background: var(--bad-bg); color: var(--bad); }
.signal-list strong { display: block; color: var(--ink); }
.signal-list span { font-size: .9rem; color: var(--muted); }
.rights { border-top: 4px solid var(--blue); }
.callout { margin: 1.2em 0; padding: 16px 20px; border-radius: 6px; background: var(--blue-soft); border-left: 4px solid var(--blue); color: var(--ink-2); }
.callout-warn { background: var(--open-bg); border-left-color: var(--open); }
.callout-good { background: var(--good-bg); border-left-color: var(--good); }
.callout strong { color: var(--ink); }
.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rlist a { display: flex; flex-direction: column; gap: 4px; }
.rlist strong { font: 600 1.12rem var(--f-head); color: var(--ink); }
.rlist a:hover strong { color: var(--pink); }
.rlist .tag { align-self: flex-start; }

/* ---- guides, prose ------------------------------------------------------------------------------------------- */

.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gcard { display: flex; flex-direction: column; gap: 8px; border: 0; position: relative; overflow: hidden; }
.gcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--cyan)); transform: scaleX(.25); transform-origin: left; transition: transform .4s; }
.gcard:hover::before { transform: scaleX(1); background: linear-gradient(90deg, var(--pink), #F58AA4); }
.gcard-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); margin-bottom: 6px; font-size: 1.15rem; transition: background .3s, color .3s; }
.gcard:hover .gcard-icon { background: var(--pink); color: #fff; }
.gcard-cluster { font: 600 .72rem var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--pink); }
.gcard strong { font: 600 1.18rem/1.3 var(--f-head); color: var(--ink); transition: color .3s; }
.gcard:hover strong { color: var(--pink); }
.gcard-sum { font-size: .93rem; color: var(--muted); flex: 1; }
.gcard-more { font: 600 .78rem var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--rule); }
.gcard-more .fa-regular { color: var(--pink); }
.guide-meta { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.prose { font-size: 1.06rem; line-height: 1.75; max-width: 760px; }
.prose h2 { margin-top: 1.8em; padding-top: .5em; border-top: 1px solid var(--rule); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose .lead { font-size: 1.2rem; color: var(--ink); max-width: none; }
.prose .table-wrap { margin: 1.2em 0 1.6em; }
.steps { list-style: none; counter-reset: s; padding: 0 !important; }
.steps > li { counter-increment: s; position: relative; padding: 2px 0 16px 52px !important; margin: 0 !important; border-left: 2px solid var(--rule); margin-left: 18px !important; padding-left: 34px !important; }
.steps > li:last-child { border-left-color: transparent; }
.steps > li::before { content: counter(s); position: absolute; left: -19px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--pink); color: #fff; font: 600 .95rem/36px var(--f-head); text-align: center; }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--good-bg); color: var(--good); font: 700 .78rem/20px var(--f-sans); text-align: center; }
.letter { margin: 1.2em 0 1.6em; padding: 28px 30px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--blue); border-radius: var(--radius); font: 400 .98rem/1.65 var(--f-sans); box-shadow: var(--shadow); }
.letter p { margin: 0 0 .65em; }
details.gfaq, .faq details { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); margin: 0 0 12px; box-shadow: var(--shadow); transition: border-color .2s; }
details.gfaq[open], .faq details[open] { border-color: var(--rule-2); }
details.gfaq summary, .faq summary { cursor: pointer; padding: 17px 20px; font: 600 1.06rem var(--f-head); color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
details.gfaq summary:hover, .faq summary:hover { color: var(--pink); }
details.gfaq summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
details.gfaq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 600 1.1rem/28px var(--f-head); text-align: center; }
details.gfaq[open] summary::after { content: "\2212"; background: var(--pink); color: #fff; }
.faq summary .fa-regular { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; transition: transform .25s, background .25s, color .25s; }
.faq details[open] summary .fa-regular { transform: rotate(180deg); background: var(--pink); color: #fff; }
details.gfaq > div, .faq-a { padding: 0 20px 16px; color: var(--ink-2); }
details[open] summary { border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.faq-block .faq { max-width: 900px; margin: 0 auto; }
.content-page h2 { margin-top: 1.6em; }

.score-lists .card { border: 0; border-top: 4px solid var(--blue); }
.score-lists .sl-good { border-top-color: var(--good); }
.score-lists .sl-bad { border-top-color: var(--bad); }
.score-lists .sl-rise { border-top-color: var(--cyan); }

.share-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 48px; background: linear-gradient(135deg, #F05A7E, #D9335B); color: #fff; border-radius: 12px; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 24px 60px rgba(217, 51, 91, .25); }
.share-band::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .07); }
.share-band::after { content: ""; position: absolute; z-index: -1; left: 30%; bottom: -160px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .share-band { background: linear-gradient(135deg, #B8284E, #7E1735); }
.share-band h2 { color: #fff; }
.share-band .lead { color: rgba(255, 255, 255, .9); }
.share-band-copy, .share-band-list { position: relative; min-width: 0; }
.share-band .xp { border-left-color: var(--pink); }
.share-band .empty { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }
.share-band .empty p, .share-band .empty strong { color: #fff; }
.share-band .empty .fa-regular { color: #fff; }
.share-band .empty .btn-primary { background: #fff; color: var(--pink); }
.share-band .empty .btn-primary:hover { color: #fff; }
.checks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .fa-regular { width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; margin-top: 3px; }
.card .checks .fa-regular { background: var(--good-bg); color: var(--good); }
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: st; }
.mk-step { position: relative; padding: 34px 28px 30px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.mk-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mk-step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.mk-step:nth-child(2)::after { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.mk-step:nth-child(3)::after { background: linear-gradient(90deg, var(--pink), #F58AA4); }
.mk-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--pink); border: 3px solid var(--pink); font: 600 1.3rem/50px var(--f-head); text-align: center; margin-bottom: 18px; }
.mk-step p { color: var(--muted); margin: 0; }
.source-note { display: flex; gap: 10px; align-items: flex-start; margin: 34px 0 0; padding: 16px 18px; border-top: 1px solid var(--rule); font-size: .86rem; color: var(--muted); }
.source-note .fa-regular { color: var(--blue); margin-top: 3px; }
.ad { margin: 8px 0; text-align: center; } .ad-label { display: block; font: 600 .66rem var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 4px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.sbtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sbtn:hover { border-color: var(--pink); background: var(--pink); color: #fff; }
.more { display: inline-flex; align-items: center; gap: 6px; font: 600 .95rem var(--f-head); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 24px 0; }
.pager > a:not(.btn), .pager > span { min-width: 40px; padding: 7px 11px; text-align: center; border-radius: var(--radius-sm); font: 600 .92rem var(--f-head); text-decoration: none; }
.pager > a:not(.btn) { background: var(--surface); border: 1px solid var(--rule); color: var(--ink); }
.pager > a:not(.btn):hover { border-color: var(--pink); color: var(--pink); }
.pager .is-current { background: var(--pink); color: #fff; }

/* ---- the closing band and the footer ----------------------------------------------------------------------- */

.slogan-band { position: relative; z-index: 2; margin-top: 30px; }
.slogan-inner { display: flex; align-items: center; gap: 28px; padding: 40px 44px; margin-bottom: -84px; border-radius: 12px; background: linear-gradient(120deg, #1E76BB, #043460); color: #fff; box-shadow: 0 30px 60px rgba(4, 52, 96, .3); position: relative; overflow: hidden; isolation: isolate; }
.slogan-inner::before { content: ""; position: absolute; z-index: -1; right: -100px; top: -150px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .slogan-inner { background: linear-gradient(120deg, #0F5F93, #062B45); }
.slogan-icon { width: 84px; height: 84px; flex: none; border-radius: 50%; background: var(--pink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 0 0 10px rgba(236, 70, 110, .2); }
.slogan-copy { flex: 1; min-width: 0; }
.slogan-big { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.15 var(--f-head); color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.slogan-big em { font-style: normal; color: var(--teal); }
.slogan-sub { margin: 0; color: var(--on-navy-2); max-width: 620px; }
.slogan-inner .btn { flex: none; }
.site-footer { background: var(--navy-3); color: var(--on-navy-2); padding: 150px 0 0; font-size: .95rem; position: relative; overflow: hidden; }
:root[data-theme="dark"] .site-footer { background: #010B14; }
.site-footer::before { content: ""; position: absolute; left: -160px; bottom: -200px; width: 480px; height: 480px; border-radius: 50%; border: 80px solid rgba(255, 255, 255, .025); pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; padding-bottom: 60px; }
.footer-grid h4 { position: relative; color: #fff; font: 600 1.22rem var(--f-head); margin-bottom: 22px; padding-bottom: 12px; }
.footer-grid h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--pink); }
.footer-grid a { display: block; color: var(--on-navy-2); text-decoration: none; padding: 4px 0; transition: color .2s, transform .2s; }
.footer-grid a:hover { color: #fff; transform: translateX(4px); }
.footer-about .nav-logo { display: inline-flex; color: #fff; }
.footer-about .nav-logo:hover { transform: none; }
.footer-about .logo-word { color: #fff; }
.footer-about .logo-text small { color: var(--on-navy-2); }
.footer-about p { color: var(--on-navy-2); }
.footer-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.footer-facts li { display: flex; align-items: center; gap: 12px; }
.footer-facts .fa-regular { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); display: inline-flex; align-items: center; justify-content: center; color: var(--pink); font-size: .85rem; }
.footer-facts b { color: #fff; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.footer-bottom { position: relative; background: rgba(0, 0, 0, .22); padding: 20px 0 22px; font-size: .86rem; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.footer-legal a { color: var(--on-navy-2); margin-left: 18px; text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.footer-note { margin: 12px 0 0; font-size: .8rem; color: rgba(185, 199, 214, .7); max-width: 1000px; }
.footer-note a { color: #fff; }

.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast .3s ease-out; max-width: 90vw; border-left: 4px solid var(--pink); }
@keyframes toast { from { transform: translateY(12px); opacity: 0; } }
.admin .kpis { grid-template-columns: repeat(6, 1fr); }
.admin .grid-2 { margin: 22px 0; } .admin section.card { margin-bottom: 22px; }

/* ---- responsive ---------------------------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .nav-inner { gap: 16px; }
    .nav-links a { padding: 10px 8px; font-size: .96rem; }
    .nav-links a::after { left: 8px; right: 8px; }
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .kpi:nth-child(4) { border-left: 0; }
    .kpi:nth-child(n+4) { border-top: 1px solid var(--rule); }
    .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-grid { gap: 40px; }
}
@media (max-width: 1060px) {
    .nav-links, .nav-search { display: none; }
    .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
    .hero { padding: 54px 0 140px; }
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .hero-demo { max-width: 620px; width: 100%; margin: 0 auto; }
    .layout { grid-template-columns: 1fr; }
    .layout-side { position: static; }
    .ktiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .name-cols-wide { columns: 3; }
    .share-band { grid-template-columns: 1fr; }
    .intro { grid-template-columns: 1fr; gap: 40px; }
    .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slogan-inner { flex-wrap: wrap; }
    .banner-links { display: none; }
    .features { grid-template-columns: 1fr 1fr; }
    .feature-pink { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 760px) {
    body { font-size: 16px; }
    .container, .container-wide { padding: 0 16px; }
    .banner { font-size: .78rem; }
    .banner-inner { min-height: 34px; }
    .banner-facts li:first-child, .banner-links { display: none; }
    .nav-inner { min-height: 66px; gap: 10px; }
    .logo-word { font-size: 1.18rem; }
    .logo-text small { font-size: .52rem; margin-bottom: 3px; }
    .logo-mark { width: 36px; height: 33px; }
    .nav-logo { gap: 9px; min-width: 0; }
    .nav-cta-long { display: none; } .nav-cta-short { display: inline; }
    .nav-share { padding: .7em .95em; }
    .nav-burger { width: 42px; height: 42px; }
    .hide-mobile { display: none !important; }
    .mobile-menu { top: 100px; }
    .hero { padding: 34px 0 120px; }
    .hero h1 { font-size: 2.3rem; }
    .hero .lead { font-size: 1.02rem; }
    .hero-kicker { font-size: .7rem; letter-spacing: .05em; padding: 6px 12px; }
    .hero-find { margin: 22px 0 20px; }
    .csearch-hero .csearch-input { padding: 16px 8px; font-size: 1.02rem; }
    .csearch-hero .btn { padding-left: 1.1em; padding-right: 1.1em; }
    .csearch-icon { padding-left: 14px; }
    .csearch-popular a:nth-child(n+7) { display: none; }
    .rc-steps { gap: 5px; }
    .rc-steps li { font-size: .74rem; padding: 6px 7px; gap: 6px; white-space: normal; line-height: 1.15; }
    .rc-steps li b { width: 20px; height: 20px; font-size: .7rem; }
    .rc-search { margin: 12px 12px 4px; }
    .rc-typed { font-size: 1rem; }
    .rc-card { padding: 10px 14px 16px; }
    .rc-name b { font-size: 1.08rem; }
    .rc-grade { width: 50px; height: 50px; }
    .rc-grade b { font-size: 1.3rem; }
    .rc-big b { font-size: 1.95rem; }
    .rc-big-l { font-size: .84rem; flex-basis: 100%; margin-top: -2px; }
    .rc-big::after { display: none; }
    .rc-chart { height: 52px; gap: 3px; }
    .rc-meters { gap: 12px; }
    .rc-ml { font-size: .76rem; }
    .rc-issue { font-size: .84rem; }
    .rc-verdict { font-size: .88rem; }
    .features { grid-template-columns: 1fr; gap: 16px; margin-top: -80px; }
    .feature { min-height: 0; padding: 22px 22px 20px; }
    .feature-t { font-size: 1.3rem; }
    .feature-pink .feature-t { font-size: 1.12rem; }
    .intro { margin: 56px 0 64px; }
    .intro-panel { padding: 12px; }
    .intro .stats { gap: 10px; }
    .intro .stat { padding: 18px 14px; }
    .intro .stat > .fa-regular { width: 38px; height: 38px; margin-bottom: 10px; }
    .intro-letter { font-size: 4rem; }
    .band { padding: 60px 0; }
    .band-blue { background-size: 100% 300px; padding-bottom: 10px; }
    .band-panel { padding: 14px; }
    .block { margin: 48px 0; }
    .sec-title { margin-bottom: 26px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .intro .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
    .intro .stat:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, .12); }
    .stat-n { font-size: 1.35rem; }
    .tasks, .grid-2, .grid-3, .gcards, .mk-steps, .signals, .cmp, .casefile-grid { grid-template-columns: 1fr; }
    .tasks { gap: 20px; }
    .task-top { height: 84px; font-size: 3rem; }
    .task { padding-bottom: 24px; }
    #page-home .cgrid > :nth-child(n+5), #page-home .gcards > :nth-child(n+4), #page-home .clist li:nth-child(n+5), #page-home .hbars > :nth-child(n+7), #page-home .docket-table tbody tr:nth-child(n+7) { display: none; }
    .rc-meters { grid-template-columns: 1fr; gap: 8px; }
    .mk-step { padding: 26px 22px 24px; }
    .mk-step-num { width: 48px; height: 48px; line-height: 42px; margin-bottom: 14px; }
    /* the docket: each complaint a small card - company and answer, the problem, then when and what about */
    .table-wrap:has(> .docket-table) { border: 0; background: none; overflow: visible; }
    .docket-table, .docket-table tbody { display: block; }
    .docket-table thead { display: none; }
    .docket-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "co co ans" "is is is" "date about about"; gap: 6px 10px; padding: 14px 14px; margin-bottom: 10px; background: var(--surface-2) !important; border: 1px solid var(--rule); border-radius: var(--radius); }
    .docket-table tbody tr:not(:has(.d-co)) { grid-template-areas: "is is ans" "date about about"; }
    .table.docket-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .docket-table .d-co { grid-area: co; font: 600 1.02rem var(--f-head); }
    .docket-table .d-ans { grid-area: ans; justify-self: end; align-self: start; }
    .docket-table .d-issue { grid-area: is; line-height: 1.35; }
    .docket-table .d-date { grid-area: date; font-size: .82rem; }
    .docket-table .d-date a { color: var(--muted); font-weight: 500; }
    .docket-table .d-about { grid-area: about; justify-self: end; }
    .docket-table .d-about .cell-cat { font-size: .8rem; color: var(--muted); white-space: normal; }
    .table.docket-table .d-st, .table.docket-table .d-on { display: none; }
    .band-panel .table-wrap:has(> .docket-table) { margin: 0 -4px; }
    .ktiles, .cgrid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .ktile { padding: 18px 16px; min-height: 0; }
    .ktile-icon { width: 42px; height: 42px; font-size: 1rem; }
    .ktile-name { font-size: 1rem; }
    .ktile-go { display: none; }
    .ccard { padding: 16px; }
    .crumbs { padding-top: 16px; font-size: .84rem; }
    .crumbs:has(+ .dossier) { padding-bottom: 70px; }
    :is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) { padding: 12px 0 36px; margin-bottom: 24px; }
    :is(.crumbs + .page-head, .crumbs + div > .page-head:first-child)::after { display: none; }
    .dossier { grid-template-columns: 1fr; padding: 24px 18px; margin-top: -54px; gap: 20px; }
    .dossier-seal { border-left: 0; border-top: 1px solid var(--rule); padding: 20px 0 0; }
    .dossier-cta .btn { flex: 1 1 auto; }
    .ctabs a { padding: 12px 12px; font-size: .94rem; }
    .kpis { grid-template-columns: 1fr 1fr; }
    .kpi { border-left: 0 !important; border-top: 1px solid var(--rule); }
    .kpi:nth-child(-n+2) { border-top: 0; }
    .kpi:nth-child(even) { border-left: 1px solid var(--rule) !important; }
    .kpi dd { font-size: 1.28rem; }
    .field-row { grid-template-columns: 1fr; }
    .cform-row { flex-direction: column; }
    .cmp-form { grid-template-columns: 1fr; }
    .cmp-table { font-size: .84rem; }
    .cmp-table .num { white-space: normal; overflow-wrap: anywhere; }
    .cmp-table th, .cmp-table td { padding: 9px 7px; }
    .cmp-table th { width: 34%; }
    .cmp-table thead th { white-space: normal; font-size: .66rem; letter-spacing: .04em; }
    .cmp-vs { margin: 0 auto; }
    .hide-sm { display: none; }
    .table th, .table td { padding: 10px 10px; }
    .name-cols, .name-cols-wide { columns: 1; }
    .hbar { grid-template-columns: minmax(0, 1fr) 76px; }
    .hbar-track { grid-column: 1 / 3; grid-row: 2; }
    .hbar-n { grid-row: 1; grid-column: 2; }
    .rbreak-list { grid-template-columns: 1fr; }
    .sparts li { grid-template-columns: 1fr 56px; }
    .spart-track { grid-column: 1 / 3; grid-row: 2; }
    .spart-note { grid-column: 1 / 3; }
    .mchart-plot { height: 160px; }
    .share-band { padding: 30px 20px; gap: 26px; border-radius: 10px; }
    .slogan-inner { flex-direction: column; align-items: flex-start; padding: 30px 22px; gap: 18px; margin-bottom: -70px; }
    .slogan-icon { width: 60px; height: 60px; font-size: 1.4rem; }
    .slogan-inner .btn { width: 100%; }
    .site-footer { padding-top: 120px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 40px; }
    .footer-most { grid-column: 1 / -1; }
    .footer-legal a { margin: 0 16px 0 0; }
    .footer-bottom-inner { flex-direction: column; }
    .timeline { flex-direction: column; gap: 18px; }
    .casefile { padding: 26px 18px 18px; }
    .page-head { padding-top: 18px; }
    .mk-head-row { align-items: flex-start; }
}
@media (max-width: 420px) {
    .cgrid { grid-template-columns: 1fr; }
    .csearch-row .btn span { display: none; }
    .logo-text small { display: none; }
    .hero h1 { font-size: 2.05rem; }
    .rc-steps li { font-size: .68rem; }
}
@media (max-width: 360px) {
    .ktiles { grid-template-columns: 1fr; }
    .nav-share .nav-cta-short { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}
@media print {
    .banner, .site-nav, .mobile-menu, .slogan-band, .site-footer, .comments, .xform, .poll, .share, .ad, .layout-side, .rc { display: none !important; }
    body { background: #fff; color: #000; }
    .layout { grid-template-columns: 1fr; }
    .crumbs, .crumbs + .page-head { box-shadow: none; background: none; color: #000; }
    :is(.crumbs + .page-head, .crumbs + div > .page-head:first-child) h1 { color: #000; }
}