/* Public website styles. Original source file: minified copies are generated into assets/build. */

/* ---------- Design tokens ---------- */
:root {
  /* Brand colours are overridden from Settings > Branding; every tint below is derived from them. */
  --brand: #2b50e0;
  --accent: #0b7a5c;
  --link: var(--brand);
  --brand-soft: #eef2fd;
  --brand-tint: #dbe3fb;
  --brand-ring: rgba(43, 80, 224, .28);
  --brand-deep: #2444c0;
  --on-soft: var(--brand-deep);
  --accent-soft: #e6f4ef;

  --ink: #0d1426;
  --text: #2b3448;
  --muted: #5b6580;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-sunken: #f1f3f9;
  --border: #e2e6ef;
  --border-strong: #c3cad9;
  --field-border: #8690a6;
  --danger: #b3261e;
  --warning-bg: #fff4d6;
  --warning-text: #5c4300;
  --success-bg: #e3f5ec;
  --success-text: #0b5a41;
  --error-bg: #fdecea;
  --error-text: #7a1410;
  --footer-bg: #0b1020;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 8px rgba(16, 24, 40, .04);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 28px -8px rgba(16, 24, 40, .12);
  --shadow-lg: 0 4px 10px rgba(16, 24, 40, .05), 0 28px 56px -16px rgba(16, 24, 40, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", Charter, "Bitstream Charter", Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
  --container: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.25rem;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --brand-soft: color-mix(in srgb, var(--brand) 7%, #fff);
    --brand-tint: color-mix(in srgb, var(--brand) 16%, #fff);
    --brand-ring: color-mix(in srgb, var(--brand) 30%, transparent);
    --brand-deep: color-mix(in srgb, var(--brand) 86%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --link: #a9bcff;
    --on-soft: var(--link);
    --brand-soft: #1b2440;
    --brand-tint: #26325a;
    --accent-soft: #14302a;
    --ink: #f3f5fb;
    --text: #d4d9e6;
    --muted: #a3acc2;
    --bg: #0c111d;
    --surface: #151b2b;
    --surface-sunken: #101624;
    --border: #262f45;
    --border-strong: #3a455f;
    --field-border: #6f7b96;
    --danger: #ff9a92;
    --warning-bg: #3d3210;
    --warning-text: #ffe39a;
    --success-bg: #12362a;
    --success-text: #a8e6cd;
    --error-bg: #401b18;
    --error-text: #ffc9c4;
    --footer-bg: #080c17;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .25);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 28px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 28px 56px -16px rgba(0, 0, 0, .6);
  }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
      --link: color-mix(in srgb, var(--brand) 45%, #fff);
      --brand-soft: color-mix(in srgb, var(--brand) 16%, #151b2b);
      --brand-tint: color-mix(in srgb, var(--brand) 28%, #151b2b);
      --accent-soft: color-mix(in srgb, var(--accent) 22%, #151b2b);
    }
  }
  .brand-logo-light { display: none; }
  .brand-logo-dark { display: block; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; font: 1rem/var(--line, 1.65) var(--font); color: var(--text); background: var(--bg); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s var(--ease); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); font-family: var(--font-display); font-weight: var(--heading-weight, 700); line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p, ul, ol, dl, blockquote, figure, table { margin: 0 0 1em; }
p { text-wrap: pretty; }
address { font-style: normal; }
small { font-size: .875rem; }
strong { color: var(--ink); font-weight: 650; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-sunken); padding: .12em .4em; border-radius: 6px; }
::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: .75rem; top: -5rem; z-index: 100; background: var(--ink); color: var(--surface); padding: .7rem 1.1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-weight: 600; text-decoration: none; transition: top .15s var(--ease); }
.skip-link:focus { top: .75rem; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 48rem; }
.muted, .count { color: var(--muted); }
.count { font-weight: 400; font-variant-numeric: tabular-nums; }
.h-small { font-family: var(--font); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.icon { flex: none; width: 1.25em; height: 1.25em; vertical-align: -.22em; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--brand-soft); color: var(--on-soft); font: 700 1rem/1 var(--font); text-transform: uppercase; }
.avatar-sm { width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .72rem; }
/* A profile picture in the place of the initial: same box, the picture fills it. */
img.avatar-img { display: inline-block; object-fit: cover; background: var(--surface-sunken); }
img.avatar-one { border-radius: 50%; }
/* Links that a rule of Website > Internal links places below the text of a page. */
.related-links { margin: 2rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.related-links h2 { margin: 0 0 .6rem; }
.related-links ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.related-links a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.related-links .icon { width: 1em; height: 1em; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; overflow-wrap: anywhere; margin: 0 0 1rem; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--on-soft); font-size: .8rem; font-weight: 650; letter-spacing: .02em; }
.eyebrow::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.2rem; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 600 .95rem/1.2 var(--font); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); }
.btn:hover { border-color: var(--brand); color: var(--link); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
/* Buttons are filled with the brand colour unless Settings > Branding gives them a colour of their own; the writing on them is white or near-black, whichever can be read. */
.btn-primary { background: var(--button, var(--brand)); border-color: var(--button, var(--brand)); color: var(--on-button, #fff); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 6px 14px -4px var(--brand-ring); }
.btn-primary:hover { background: var(--button-deep, var(--brand-deep)); border-color: var(--button-deep, var(--brand-deep)); color: var(--on-button, #fff); box-shadow: 0 2px 4px rgba(16, 24, 40, .12), 0 10px 20px -6px var(--brand-ring); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-block { display: flex; width: 100%; }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-outline { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-small { min-height: 2.25rem; padding: .3rem .85rem; font-size: .875rem; border-radius: 8px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; }
.link-button:hover { text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
  @media (prefers-color-scheme: dark) { .site-header { background: rgba(21, 27, 43, .86); } }
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; min-height: var(--header-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font: 700 1.15rem/1.1 var(--font-display); letter-spacing: -.01em; }
.brand-logo { max-height: 2.5rem; width: auto; }
.brand-logo-dark { display: none; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 11px; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: #fff; font: 700 1.05rem/1 var(--font-display); box-shadow: 0 4px 10px -3px var(--brand-ring); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.nav-toggle:hover { border-color: var(--brand); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.15rem; height: 2px; background: var(--ink); border-radius: 2px; content: ""; position: relative; transition: transform .2s var(--ease), top .2s var(--ease), background-color .2s var(--ease); }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
.site-nav { display: flex; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; }
.menu, .submenu { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-wrap: wrap; gap: .15rem; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu a { display: block; padding: .5rem .8rem; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background-color .15s var(--ease), color .15s var(--ease); }
.menu a:hover { background: var(--surface-sunken); color: var(--ink); }
.menu a[aria-current] { background: var(--brand-soft); color: var(--on-soft); }
.sub-toggle { width: 1.9rem; height: 1.9rem; margin-left: -.35rem; border: 0; background: none; cursor: pointer; border-radius: 7px; color: var(--muted); }
.sub-toggle:hover { background: var(--surface-sunken); color: var(--ink); }
.sub-toggle::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.sub-toggle[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -2px); }
.submenu { min-width: 14rem; padding: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.js .submenu { display: none; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 5; }
.js .sub-toggle[aria-expanded="true"] + .submenu { display: block; animation: pop-in .18s var(--ease); }
.site-search { display: flex; gap: .4rem; }
.site-search input { width: 12rem; min-height: 2.4rem; padding: .35rem .8rem .35rem 2.2rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--surface-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a849c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center / 1rem;
  transition: width .25s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
.site-search input:focus-visible { width: 15rem; outline: none; border-color: var(--brand); background-color: var(--surface); box-shadow: 0 0 0 4px var(--brand-ring); }
.site-search .btn { border-radius: var(--radius-pill); }

@media (max-width: 61.99rem) {
  .js .nav-toggle { display: inline-flex; flex: none; }
  /* The name shortens with an ellipsis rather than pushing the menu button to a second line. */
  .js .brand { flex: 1 1 0; min-width: 0; }
  .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
  .brand-mark, .brand-logo { flex: none; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem; padding: .5rem 0 1.1rem; border-top: 1px solid var(--border); }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; animation: drop-in .22s var(--ease); }
  .menu { flex-direction: column; gap: .1rem; }
  .menu > li { flex-wrap: wrap; }
  .menu > li > a { flex: 1; padding: .8rem .75rem; font-size: 1.02rem; }
  .sub-toggle { width: 2.75rem; height: 2.75rem; margin: 0; }
  .js .submenu, .submenu { position: static; flex-basis: 100%; box-shadow: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; margin: 0 0 .4rem .9rem; padding: 0 0 0 .4rem; animation: none; }
  .site-search input, .site-search input:focus-visible { flex: 1; width: auto; min-height: 2.75rem; }
  .site-search .btn { min-height: 2.75rem; }
}

@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); padding-block: clamp(1.75rem, 5vw, 3.75rem); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(52rem 26rem at 88% -20%, var(--brand-soft), transparent 68%), radial-gradient(34rem 20rem at -8% 118%, var(--accent-soft), transparent 70%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hero-text { min-width: 0; }
.hero-intro { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); line-height: 1.6; color: var(--muted); max-width: 58ch; margin-bottom: 0; }
.hero-media img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }
.hero-home { padding-block: clamp(2.25rem, 6vw, 4.75rem) clamp(1.75rem, 4vw, 3rem); }
/* A faint dot grid behind the picture side gives the hero depth without an image download. */
.hero-home::after, .hero-blog::after, .hero-post::after, .hero-jobs::after, .hero-job::after, .hero-tools::after, .hero-tool::after, .hero-contact::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 80% 26%, #000, transparent 72%); mask-image: radial-gradient(60% 70% at 80% 26%, #000, transparent 72%); }
.hero-home h1 { font-size: clamp(2.3rem, 1.4rem + 3.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.03em; max-width: 16ch; }
.hero-home .hero-actions .btn { min-height: 3.1rem; padding-inline: 1.5rem; font-size: 1rem; }
.hero-visual { position: relative; min-width: 0; }
.hero-visual::before { content: ""; position: absolute; inset: 7% -3% -5% 9%; z-index: -1; border-radius: calc(var(--radius-lg) + 10px); background: linear-gradient(140deg, var(--brand-tint), var(--accent-soft)); transform: rotate(3deg); }
.hero-home .hero-media img { aspect-ratio: 4 / 3; border-radius: calc(var(--radius-lg) + 6px); }
/* Spotlight: one story on its picture, with the caption on a frosted panel. */
.spot { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(17rem, 34vw, 25rem); overflow: hidden; border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(140deg, var(--brand), var(--brand-deep)); box-shadow: var(--shadow-lg); }
.spot-media { position: absolute; inset: 0; z-index: -1; }
.spot-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.spot:hover .spot-media img { transform: scale(1.04); }
.spot-body { margin: .85rem; padding: 1.05rem 1.25rem 1.15rem; border-radius: var(--radius-lg); color: #fff; background: rgba(10, 14, 28, .6); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.spot-body > * { margin: 0; }
.spot-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #ffd98a; }
.spot-label .icon { width: .95rem; height: .95rem; }
.spot-title { margin-top: .4rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.22; color: #fff; }
.spot-title a { color: inherit; text-decoration: none; }
.spot-title a::after { content: ""; position: absolute; inset: 0; }
.spot-title a:hover { text-decoration: underline; text-underline-offset: .18em; }
.spot-meta { margin-top: .45rem; font-size: .88rem; color: rgba(255, 255, 255, .84); }
/* Three ways into the site, with live counts. */
.hero-links { list-style: none; margin: clamp(1.75rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: .8rem; }
.hero-links a { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.hero-links a:hover { transform: translateY(-3px); border-color: var(--brand-tint); box-shadow: var(--shadow-md); }
.hero-link-icon { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 12px; background: var(--brand-soft); color: var(--on-soft); }
.hero-link-icon .icon { width: 1.4rem; height: 1.4rem; }
.hero-link-text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-link-text strong { font: 700 1.08rem/1.3 var(--font-display); }
.hero-link-text small { color: var(--muted); }
.hero-link-arrow { color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.hero-links a:hover .hero-link-arrow { transform: translateX(3px); color: var(--link); }
@media (min-width: 40rem) { .hero-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 40rem) and (max-width: 61.99rem) { .hero-link-arrow { display: none; } .hero-links a { gap: .8rem; padding: .9rem 1rem; } }
@media (min-width: 62rem) {
  .hero-with-image .hero-inner, .hero-home.hero-with-visual .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; padding: 0; margin: 0 0 1.1rem; font-size: .88rem; color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .45rem; }
.breadcrumbs li + li::before { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid var(--border-strong); border-top: 1.5px solid var(--border-strong); transform: rotate(45deg); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--link); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* On narrow screens the trail stays on one line; the current page shortens with an ellipsis (the full title is the h1 right below).
   A very long section name is cut to part of the line as well, so the trail never runs off the screen. */
@media (max-width: 40rem) {
  .breadcrumbs ol { flex-wrap: nowrap; }
  .breadcrumbs li { flex: none; min-width: 0; max-width: 40%; white-space: nowrap; }
  .breadcrumbs li:last-child { flex: 0 1 auto; max-width: none; }
  .breadcrumbs li + li::before { flex: none; }
  .breadcrumbs a, .breadcrumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; }
}
/* ---------- Blog index header ---------- */
.hero-blog { padding-block: clamp(2rem, 5vw, 4rem); }
.hero-blog h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 1.6rem 0 0; padding: 0; color: var(--muted); font-size: .95rem; }
.hero-stats li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-stats .icon { width: 1.1rem; height: 1.1rem; color: var(--link); }
.hero-stats strong { font: 700 1.2rem/1 var(--font-display); color: var(--ink); }

/* ---------- Article header: centred title block, then the cover picture across the full width ---------- */
.hero-post { padding-block: clamp(1.75rem, 4vw, 3.25rem); }
.post-head { max-width: 50rem; margin-inline: auto; }
.post-kicker { margin: 0 0 .9rem; }
.post-kicker a { display: inline-flex; align-items: center; padding: .3rem .85rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--on-soft); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; transition: background-color .15s var(--ease); }
.post-kicker a:hover { background: var(--brand-tint); }
.hero-post h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.1; letter-spacing: -.028em; margin-bottom: .45em; text-wrap: balance; }
.hero-post .hero-intro { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); max-width: 44rem; text-wrap: pretty; }
.post-byline { display: flex; align-items: center; gap: .85rem; margin-top: 1.6rem; }
.post-byline .avatar { width: 2.9rem; height: 2.9rem; border-radius: 50%; font-size: 1.05rem; }
.post-byline-text { min-width: 0; text-align: left; }
.post-author { margin: 0; font-weight: 650; color: var(--ink); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1.1rem; margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.post-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.post-meta .icon { width: 1rem; height: 1rem; }
.post-cover { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (min-width: 48rem) {
  .post-head { text-align: center; }
  .post-head .breadcrumbs ol { justify-content: center; }
  .post-head .hero-intro { margin-inline: auto; }
  .post-byline { justify-content: center; }
  .post-cover img { aspect-ratio: 21 / 9; border-radius: calc(var(--radius-lg) + 8px); }
  /* The cover picture sits half on the header and half on the page, so the header ends behind it. */
  .hero-post-cover { padding-bottom: 2rem; border-bottom: 0; background: linear-gradient(180deg, var(--surface) calc(100% - 6rem), var(--bg) calc(100% - 6rem)); }
  .hero-post-cover::before, .hero-post-cover::after { bottom: 6rem; }
}
.preview-bar { background: var(--warning-bg); color: var(--warning-text); text-align: center; padding: .65rem 1rem; font-weight: 600; font-size: .95rem; }

/* ---------- Sections, grids, cards ---------- */
.section { padding-block: clamp(1.75rem, 4.5vw, 3.25rem); }
.section-tight { padding-block: 1rem; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); }
.section-home { padding-block: clamp(2.25rem, 5vw, 4rem); }
.section-band { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { display: flex; align-items: center; gap: .75rem 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section-head > div { flex: 1 1 0; min-width: 0; }
.section-head > .view-all { flex: none; }
.section-icon { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 14px; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); box-shadow: 0 8px 16px -8px var(--brand); }
.section-icon .icon { width: 1.35rem; height: 1.35rem; }
.section-head h2 { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); letter-spacing: -.02em; }
.section-head p { margin: .15rem 0 0; color: var(--muted); }
/* Phones: icon, heading and "View all" share the first line; the introduction gets the full width below. */
@media (max-width: 34rem) {
  .section-head { flex-wrap: wrap; gap: .5rem .75rem; }
  .section-head > div { display: contents; }
  .section-head h2 { flex: 1 1 0; min-width: 0; }
  .section-head p { order: 5; flex: 0 0 100%; margin: 0; font-size: .95rem; }
  .section-icon { width: 2.4rem; height: 2.4rem; border-radius: 12px; }
  .section-icon .icon { width: 1.15rem; height: 1.15rem; }
  .view-all { padding: .4rem .75rem; font-size: .86rem; }
}
.view-all { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; background: var(--brand-soft); color: var(--on-soft);
  transition: background-color .18s var(--ease), gap .18s var(--ease); }
.view-all:hover { background: var(--brand-tint); gap: .6rem; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card:hover, .card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-tint); }
.card-media { display: block; overflow: hidden; background: var(--surface-sunken); }
.card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.3rem 1.3rem; flex: 1; }
.card-body > * { margin: 0; }
.card-head { display: flex; align-items: center; gap: .75rem; }
.card-meta { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.card-meta a { position: relative; z-index: 2; color: var(--link); text-decoration: none; }
.card-meta a:hover { text-decoration: underline; }
.card-title { font-size: 1.22rem; line-height: 1.28; letter-spacing: -.01em; }
.card-title a { color: var(--ink); text-decoration: none; transition: color .15s var(--ease); }
/* The title link covers the whole card, so the card is one large, clearly named target. */
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card-title a { color: var(--link); }
.card-excerpt { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; font-size: .86rem; color: var(--muted); }
.card-foot .icon { width: 1rem; height: 1rem; }
.card-arrow { margin-left: auto; color: var(--link); font-weight: 600; transition: transform .2s var(--ease); }
.card:hover .card-arrow { transform: translateX(4px); }

/* ---------- Homepage section layouts ---------- */
/* Latest: the first story leads, the next two sit beside it, the rest follow below. */
.card-lead .card-title { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.95rem); line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 40rem) { .grid-lead > .card-lead { grid-column: 1 / -1; } .card-lead .card-excerpt { font-size: 1.04rem; } .card-lead .card-body { padding: 1.5rem 1.65rem 1.6rem; } }
@media (min-width: 62rem) {
  .grid-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lead > .card-lead { grid-column: span 2; grid-row: span 2; }
  .grid-lead > .card-lead .card-media { position: relative; flex: 1 1 auto; min-height: 17rem; }
  .grid-lead > .card-lead .card-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .grid-lead > .card-lead .card-body { flex: 0 0 auto; }
  .grid-lead > .card:nth-child(2) .card-excerpt, .grid-lead > .card:nth-child(3) .card-excerpt { display: none; }
  .grid-lead > .card:nth-child(2) .card-media img, .grid-lead > .card:nth-child(3) .card-media img { aspect-ratio: 5 / 2; }
}
/* Phones: after the lead story the list is compact, picture left and title right. */
@media (max-width: 39.99rem) {
  .grid-lead > .card:not(.card-lead) { flex-direction: row; }
  .grid-lead > .card:not(.card-lead) .card-media { position: relative; flex: 0 0 6.75rem; }
  .grid-lead > .card:not(.card-lead) .card-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .grid-lead > .card:not(.card-lead) .card-body { padding: .85rem 1rem .9rem; gap: .35rem; min-width: 0; }
  .grid-lead > .card:not(.card-lead) .card-title { font-size: 1.04rem; line-height: 1.3; }
  .grid-lead > .card:not(.card-lead) .card-excerpt, .grid-lead > .card:not(.card-lead) .avatar { display: none; }
  .grid-lead > .card:not(.card-lead) .card-foot { padding-top: .15rem; font-size: .8rem; }
  .grid-lead > .card:not(.card-lead) .card-meta { font-size: .75rem; }
}
/* Featured: the title is set on the picture. */
.card-overlay { isolation: isolate; justify-content: flex-end; min-height: clamp(17rem, 30vw, 23.5rem); border: 0; color: #fff; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); }
.card-overlay .card-media { position: absolute; inset: 0; z-index: -1; }
.card-overlay .card-media img { height: 100%; aspect-ratio: auto; }
.card-overlay .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 24, .04) 22%, rgba(8, 12, 24, .62) 60%, rgba(8, 12, 24, .92) 100%); }
.card-overlay .card-body { flex: 0 0 auto; gap: .5rem; padding: 1.4rem 1.45rem 1.5rem; }
.card-overlay .card-meta, .card-overlay .card-foot { color: rgba(255, 255, 255, .86); }
.card-overlay .card-meta a { color: #fff; }
.card-overlay .card-title { font-size: 1.38rem; }
.card-overlay .card-title a, .card-overlay:hover .card-title a { color: #fff; }
.card-overlay .card-foot { margin-top: 0; padding-top: .15rem; }
.card-overlay:hover, .card-overlay:focus-within { box-shadow: var(--shadow-lg); }
/* Popular: a numbered ranking, typography only. */
.grid-overlay, .grid-rank { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .grid-overlay, .grid-rank { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tablets use two columns; a story left alone on the last line takes the full width instead of leaving a hole. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .grid-lead, .grid-overlay, .grid-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-lead > .card:last-child:nth-child(even), .grid-overlay > .card:last-child:nth-child(odd), .grid-rank > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-lead > .card:last-child:nth-child(even) { flex-direction: row; }
  .grid-lead > .card:last-child:nth-child(even) .card-media { position: relative; flex: 0 0 42%; }
  .grid-lead > .card:last-child:nth-child(even) .card-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .grid-lead > .card:last-child:nth-child(even) .card-body { justify-content: center; padding-block: 1.6rem; }
  .grid-overlay > .card:last-child:nth-child(odd) { min-height: 15rem; }
}
.card-rank { flex-direction: row; align-items: flex-start; gap: 1.1rem; padding: 1.4rem 1.5rem 1.45rem; }
.card-rank .card-body { padding: 0; gap: .45rem; min-width: 0; }
.rank-num { flex: none; min-width: 2.9rem; font: 700 2.7rem/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; color: var(--brand-tint); transition: color .25s var(--ease); }
.card-rank:hover .rank-num, .card-rank:focus-within .rank-num { color: var(--brand); }
.card-rank .card-title { font-size: 1.16rem; }
.card-rank .card-foot { padding-top: .25rem; }
/* Jobs: one row per role inside a single frame. */
.grid-rows { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1rem; padding: 1.1rem 1.2rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; transition: background-color .18s var(--ease); }
.card-row:first-child { border-top: 0; }
.card-row:hover, .card-row:focus-within { transform: none; box-shadow: none; background: var(--brand-soft); }
.card-row > * { margin: 0; }
.card-row .avatar { width: 2.9rem; height: 2.9rem; font-size: 1.1rem; align-self: start; }
.card-row .row-main { min-width: 0; }
.card-row .card-title { font-size: 1.14rem; }
.card-row .card-meta { margin: .25rem 0 0; }
.card-row .chips, .card-row .card-foot { grid-column: 2; }
.card-row .card-foot { margin: 0; padding: 0; }
.row-arrow { display: none; }
@media (min-width: 56rem) {
  .card-row { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1.2fr) auto auto; gap: 1.25rem; padding: 1.15rem 1.5rem; }
  .card-row .avatar { align-self: center; }
  .card-row .chips, .card-row .card-foot { grid-column: auto; }
  .card-row .card-foot { white-space: nowrap; min-width: 10.5rem; }
  .row-arrow { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
  .card-row:hover .row-arrow { transform: translateX(4px); color: var(--link); border-color: var(--brand-tint); }
}
.tool-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px; background: var(--brand-soft); color: var(--on-soft); transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.tool-icon .icon { width: 1.45rem; height: 1.45rem; }
.card-tool .card-body { gap: .6rem; padding: 1.4rem 1.45rem 1.35rem; }
.card-tool .card-head { margin-bottom: .35rem; }
.card-tool .card-title { font-size: 1.25rem; }
.card-tool:hover .tool-icon, .card-tool:focus-within .tool-icon { background: var(--brand); color: #fff; transform: scale(1.05) rotate(-3deg); }
.grid-tools { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.chips li { max-width: 100%; overflow-wrap: anywhere; padding: .2rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .82rem; font-weight: 550; color: var(--text); background: var(--surface-sunken); }
.chips a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.chips li:has(a):hover { border-color: var(--brand); background: var(--brand-soft); color: var(--on-soft); }
.hero-chips { margin-top: 1.1rem; }
.hero-chips li { background: var(--surface); box-shadow: var(--shadow-xs); font-size: .88rem; padding: .3rem .85rem; }
.empty { padding: 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); background: var(--surface); text-align: center; }
.result-count { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.panel > h2:first-child { font-size: 1.4rem; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* ---------- Advertisement areas: space is reserved before the provider loads ---------- */
.ad-slot { width: 100%; margin: clamp(1.25rem, 3vw, 2rem) auto 0; text-align: center; }
.ad-label { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .3rem; }
.ad-frame { position: relative; width: min(100%, calc(var(--ad-w) * 1px)); aspect-ratio: var(--ad-w) / var(--ad-h); margin-inline: auto; overflow: hidden; background: var(--surface-sunken); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.ad-link, .ad-variant { display: block; width: 100%; height: 100%; }
.ad-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ad-link:focus-visible { outline-offset: -3px; }
.ad-placeholder { display: grid; place-items: center; height: 100%; padding: .5rem .75rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.sidebar .ad-slot { margin-top: 0; }
.ad-above-footer { margin-top: clamp(1.5rem, 4vw, 3rem); }
.ad-above-footer + .site-footer { margin-top: clamp(1.75rem, 4vw, 3rem); }
/* A banner with a square for small screens: below 930 px the square takes its place. It never becomes wider than the page. */
.ad-variant-desktop { display: none; }
@media (max-width: 929.98px) {
  .ad-slot[data-ad-mobile] .ad-frame { width: min(100%, calc(var(--ad-mw) * 1px)); aspect-ratio: var(--ad-mw) / var(--ad-mh); }
}
@media (min-width: 930px) {
  .ad-variant-desktop { display: block; }
  .ad-variant-mobile { display: none; }
}
/* A code banner without a square (homepage sections) keeps its width and a height that provider code can fill. */
@media (max-width: 47.9rem) { .ad-720x90:not([data-ad-mobile]):not([data-ad-type="image"]) .ad-frame { aspect-ratio: auto; min-height: 100px; width: 100%; } }
/* An image needs no placeholder frame. Without a square image the banner keeps its own shape at every width. */
[data-ad-type="image"] .ad-frame { background: none; border: 0; }
/* Fixed bottom banner: screens of 930 px and wider only. The page keeps free space below it, so it never covers content, buttons or forms. */
.ad-fixed { display: none; }
@media (min-width: 930px) {
  .ad-fixed:not([hidden]) { display: block; position: fixed; z-index: 40; inset: auto 0 0 0; padding: .4rem 0; background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .28); }
  .ad-fixed-inner { display: flex; align-items: center; justify-content: center; gap: .6rem; width: min(100% - 1.5rem, 56rem); margin-inline: auto; }
  .ad-fixed .ad-label { flex: none; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .56rem; letter-spacing: .08em; }
  .ad-fixed .ad-frame { flex: none; width: calc(var(--ad-w) * 1px); margin: 0; }
  .ad-fixed-close { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
  .ad-fixed-close:hover { background: var(--surface-sunken); border-color: var(--muted); }
  .has-fixed-ad { scroll-padding-bottom: calc(var(--fixed-ad-h, 106px) + 1rem); }
  .has-fixed-ad body { padding-bottom: var(--fixed-ad-h, 106px); }
  /* The cookie panel sits above the banner and stays fully visible. */
  .has-fixed-ad .cookie { bottom: calc(var(--fixed-ad-h, 106px) + .75rem); max-height: min(85vh, 40rem, calc(100vh - var(--fixed-ad-h, 106px) - 1.5rem)); }
}

/* ---------- Article layout: sidebar left and content right on desktop, content first when stacked ---------- */
.layout-sidebar { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 1fr); }
.layout-sidebar > .article { min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 62rem) {
  .layout-sidebar { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .layout-sidebar > .article { grid-column: 2; grid-row: 1; }
  .layout-sidebar > .sidebar { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100vh - var(--header-h) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: -4px; padding: 4px; }
}
/* Tablets: the stacked sidebar flows into two balanced columns instead of one long strip. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .sidebar { display: block; columns: 2; column-gap: 1.25rem; }
  .sidebar > * { break-inside: avoid; margin-bottom: 1.25rem; }
  .sidebar > .ad-slot { column-span: all; }
}
.widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-xs); }
.widget-title { font: 700 .78rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .6rem; }
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { padding: .6rem 0; border-top: 1px solid var(--border); line-height: 1.45; }
.widget-list li:first-child { border-top: 0; padding-top: .2rem; }
.widget-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.widget-list a:hover { color: var(--link); text-decoration: underline; }
.widget-list small { color: var(--muted); }
.widget-posts li { padding: .7rem 0; }
.mini { display: flex; align-items: center; gap: .8rem; }
.mini-thumb { flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 10px; background: var(--surface-sunken); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mini:hover .mini-thumb img { transform: scale(1.08); }
.mini-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; min-width: 0; }
.mini-text strong { font-weight: 600; line-height: 1.35; color: var(--ink); transition: color .15s var(--ease); }
.mini-text small { font-weight: 400; }
.widget-list a.mini:hover { text-decoration: none; }
.mini:hover .mini-text strong { color: var(--link); }
.widget-cats li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.widget-cats li > a { min-width: 0; overflow-wrap: anywhere; }
.widget-cats .count { flex: none; min-width: 1.9rem; padding: .1rem .5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--muted); font-size: .8rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.widget-nav a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; overflow-wrap: anywhere; }
.widget-nav .icon { flex: none; width: 1rem; height: 1rem; color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.widget-nav a:hover { text-decoration: none; }
.widget-nav a:hover .icon { transform: translateX(3px); color: var(--link); }
.prose { max-width: 70ch; font-size: 1.1rem; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
/* On a post every block of the article shares one reading measure, so the column has a single clean edge. */
.hero-post ~ .layout-sidebar > .article > * { max-width: 44rem; }
.hero-post ~ .layout-sidebar .prose > p:first-child { font-size: 1.16em; line-height: 1.68; color: var(--ink); }
.prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.prose h3 { margin-top: 1.7em; font-size: 1.28rem; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.prose p, .prose ul, .prose ol { margin-bottom: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--link); }
.prose a { font-weight: 550; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose img { border-radius: var(--radius); margin-block: 1.6em; box-shadow: var(--shadow-sm); }
.prose figure { margin: 2em 0; }
.prose figure img { margin-block: 0; }
.prose figcaption { margin-top: .65rem; font-size: .88rem; line-height: 1.5; color: var(--muted); text-align: center; }
.prose blockquote { position: relative; margin: 2em 0; padding: 1.35rem 1.6rem 1.35rem 3.6rem; border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--ink); font: italic 1.28rem/1.55 var(--font-display); }
.prose blockquote::before { content: "\201C"; position: absolute; left: 1.05rem; top: .55rem; font: 700 3.5rem/1 var(--font-display); color: var(--brand); opacity: .5; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code { padding: .12em .4em; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--border); font-size: .88em; }
.prose pre { overflow-x: auto; padding: 1.1rem 1.25rem; background: #0f1629; color: #e9ecf5; border-radius: var(--radius); font-size: .9rem; line-height: 1.6; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.prose mark { padding: .05em .25em; border-radius: 4px; background: var(--accent-soft); color: inherit; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .96rem; }
/* With the script, a table sits in a box of its own that scrolls sideways when the table is wider than the text. The box
   takes the keyboard focus then, so that the table can be scrolled with the arrow keys, and the table stays a table. */
.table-scroll { overflow-x: auto; margin-bottom: 1.2em; scrollbar-width: thin; }
.prose .table-scroll > table { display: table; min-width: 100%; overflow: visible; }
.prose th, .prose td { border-bottom: 1px solid var(--border); padding: .6rem .9rem; text-align: left; }
.prose th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2.2em; }
/* "On this page": the headings of the article, numbered */
.toc { margin: 0 0 2rem; padding: 1.15rem 1.4rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.toc-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font: 700 .78rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.toc-title .icon { width: 1rem; height: 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; break-inside: avoid; }
.toc a { display: flex; gap: .7rem; padding: .3rem 0; color: var(--ink); font-weight: 550; line-height: 1.4; text-decoration: none; transition: color .15s var(--ease); }
.toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 1.5rem; padding-top: .12em; color: var(--muted); font-size: .82em; font-variant-numeric: tabular-nums; }
.toc .toc-sub { counter-increment: none; }
.toc .toc-sub a { padding-left: 2.2rem; color: var(--text); font-weight: 450; }
.toc .toc-sub a::before { content: none; }
.toc a:hover { color: var(--link); }
@media (min-width: 40rem) { .toc-long ol { columns: 2; column-gap: 2.25rem; } }
.article > h2 { margin-top: 2.25rem; }
.article > .panel { margin-top: 2.5rem; }
/* ---------- Job page ---------- */
.hero-job { padding-block: clamp(1.75rem, 4vw, 3.25rem); }
.hero-job-inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.hero-job h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.job-company { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.job-company .avatar { width: 3.25rem; height: 3.25rem; border-radius: 14px; font-size: 1.25rem; }
.job-logo { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; padding: .35rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-xs); }
.company-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.job-company-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: 0; min-width: 0; }
.job-company-text strong { font-size: 1.05rem; color: var(--ink); }
.job-company-text span { color: var(--muted); font-size: .92rem; }
.chips .icon { flex: none; width: .95rem; height: .95rem; color: var(--muted); }
.chips li:has(> .icon) { display: inline-flex; align-items: center; gap: .4rem; }
.card-salary { display: flex; align-items: flex-start; gap: .45rem; font-weight: 650; color: var(--ink); font-size: .95rem; line-height: 1.4; }
.card-salary .icon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .14rem; color: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .65rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.tag::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.tag-new { background: var(--success-bg); color: var(--success-text); }
.tag-soon { background: var(--warning-bg); color: var(--warning-text); }
.tag-closed { background: var(--error-bg); color: var(--error-text); }
/* Summary beside the title: what it pays, when it closes, and the way to the form. */
.apply-card { padding: 1.35rem 1.4rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 4px); box-shadow: var(--shadow-md); }
.apply-card > * { margin: 0; }
.apply-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; margin: 1rem 0 1.2rem; }
.apply-facts div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.apply-facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.apply-facts dd { margin: 0; font-weight: 650; font-size: 1.05rem; color: var(--ink); }
.apply-facts small { font-weight: 500; font-size: .86rem; color: var(--muted); }
.apply-card .btn { min-height: 3rem; }
.apply-note { margin-top: .75rem; font-size: .86rem; line-height: 1.45; color: var(--muted); text-align: center; }
.job-cover { grid-column: 1 / -1; margin-top: 0; }
@media (min-width: 62rem) { .hero-job-inner { grid-template-columns: minmax(0, 1fr) 20.5rem; } }
/* Everything in the job description shares one measure. */
.hero-job ~ .layout-sidebar > .article > *, .job-body > * { max-width: 46rem; }
.job-body > :first-child { margin-top: 0; }
.article > .alert { margin-bottom: 1.5rem; }
.job-glance .h-small { margin: 0 0 .7rem; }
.facts { display: grid; gap: 1.15rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; padding: 1.35rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.facts div { min-width: 0; }
.facts dt { display: flex; align-items: center; gap: .45rem; margin-bottom: .2rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts dt .icon { width: 1rem; height: 1rem; color: var(--link); }
.facts dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.job-section { margin-top: 2.5rem; }
.job-section > h2 { margin: 0 0 .7rem; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.75rem); letter-spacing: -.02em; }
.job-section > p { font-size: 1.1rem; line-height: 1.8; }
.job-how { padding: 1.35rem 1.5rem 1.4rem; border-radius: var(--radius-lg); background: var(--brand-soft); }
.job-how > p { margin: 0; color: var(--ink); }
/* Responsibilities and qualifications read as check lists. */
.job-checks .prose ul { list-style: none; padding-left: 0; }
.job-checks .prose ul > li { position: relative; padding-left: 2.1rem; margin-bottom: .65em; }
.job-checks .prose ul > li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--brand-soft); }
.job-checks .prose ul > li::after { content: ""; position: absolute; left: .47rem; top: .52em; width: .34rem; height: .6rem; border: solid var(--on-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.job-body .post-end { margin-top: 2.5rem; }
/* Phones and tablets: a call to action that stays in reach while the description is read. */
.apply-bar { display: none; }
@media (max-width: 61.99rem) {
  .apply-bar { position: sticky; bottom: .75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: .65rem .65rem .65rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 2px); box-shadow: var(--shadow-lg); }
  .apply-bar-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .05rem; min-width: 0; margin: 0; }
  .apply-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
  .apply-bar-text small { color: var(--muted); }
  .apply-bar .btn { flex: none; }
  .widget-apply { display: none; }
}
.apply-panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.apply-panel-head, .panel-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.35rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.apply-panel-head > div, .panel-head > div { min-width: 0; }
.apply-panel-head h2, .panel-head h2 { margin: 0; font-size: 1.5rem; }
.apply-panel-head p, .panel-head p { margin: .15rem 0 0; color: var(--muted); }
.widget-apply { border-top: 3px solid var(--brand); }
.widget-apply-title { margin: 0 0 .35rem; font: 700 1.12rem/1.3 var(--font-display); color: var(--ink); }
.widget-apply-meta { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.widget-apply-meta .icon { width: 1rem; height: 1rem; }
.widget-more { margin: 1rem 0 0; }
.widget .mini .avatar { width: 2.75rem; height: 2.75rem; border-radius: 10px; }
.widget .empty { padding: 1rem; font-size: .92rem; }

/* ---------- Job board ---------- */
.hero-jobs { padding-block: clamp(2rem, 5vw, 4rem); }
.hero-jobs h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; }
.filters-jobs { position: relative; z-index: 2; display: block; padding: 1.15rem 1.25rem 1.25rem; border-radius: calc(var(--radius-lg) + 4px); box-shadow: var(--shadow-md); }
.filters-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.filters-jobs .btn .icon { width: 1.05rem; height: 1.05rem; }
.filters-toggle { display: none; width: 100%; justify-content: center; }
.filters-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--brand); color: #fff; font-size: .76rem; font-weight: 700; }
@media (min-width: 62rem) {
  /* The filter card overlaps the lower edge of the header. */
  .hero-jobs-filters { padding-bottom: calc(clamp(2rem, 5vw, 4rem) + 2.5rem); }
  .section-jobs-filters { padding-top: 0; }
  .filters-jobs { margin-top: -2.75rem; }
  .filters-fields { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
@media (max-width: 39.99rem) {
  /* Phones: the four fields open from one button, so the results are close to the top. */
  .js .filters-toggle { display: inline-flex; }
  .js .filters-jobs:not(.is-open) .filters-fields { display: none; }
  .js .filters-jobs.is-open .filters-fields { margin-top: 1rem; animation: drop-in .22s var(--ease); }
  .filters-jobs .filters-actions .btn { width: 100%; }
}
.active-filters { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.active-filters a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: .2rem .75rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--on-soft); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color .15s var(--ease); }
.active-filters a:hover { background: var(--brand-tint); }
.active-filters .icon { width: .9rem; height: .9rem; }
.active-filters .active-filters-clear { background: none; color: var(--muted); text-decoration: underline; text-underline-offset: .18em; }
.active-filters .active-filters-clear:hover { background: none; color: var(--link); }
.jobs-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.jobs-main { min-width: 0; }
.jobs-main > .result-count { margin: 0 0 1rem; }
@media (min-width: 62rem) {
  .jobs-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .jobs-rail { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.widget-list a[aria-current] { color: var(--link); }
.grid-board { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card-board { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem 1.1rem; padding: 1.25rem 1.35rem; }
.card-board > * { margin: 0; }
.card-board .avatar { width: 3.25rem; height: 3.25rem; border-radius: 14px; font-size: 1.2rem; }
.board-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; }
.board-main > * { margin: 0; }
.card-board .card-title { font-size: 1.32rem; }
.card-board .card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card-board .chips { margin-top: .2rem; }
.board-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.board-side .card-foot { margin: 0; padding: 0; }
.board-side .card-arrow { margin-left: auto; font-size: .92rem; }
@media (min-width: 48rem) {
  .card-board { grid-template-columns: auto minmax(0, 1fr) auto; padding: 1.4rem 1.5rem; }
  .board-side { grid-column: auto; align-self: stretch; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: .6rem; min-width: 11.5rem; padding: 0 0 0 1.4rem; border-top: 0; border-left: 1px solid var(--border); }
  .board-side .card-arrow { margin: auto 0 0; }
}
/* Phones: logo and employer share the first line, the rest uses the full width of the card. */
@media (max-width: 47.99rem) {
  .card-board { gap: .55rem .85rem; }
  .card-board .avatar { width: 2.75rem; height: 2.75rem; border-radius: 12px; font-size: 1.05rem; }
  .board-main { display: contents; }
  .board-main > .card-meta { align-self: center; }
  .board-main > :not(.card-meta) { grid-column: 1 / -1; }
  .board-side { margin-top: .4rem; }
}
.empty-rich { display: grid; justify-items: center; gap: .6rem; padding: clamp(2rem, 5vw, 3rem) 1.5rem; }
.empty-rich p { margin: 0; max-width: 34rem; }
.empty-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--brand-soft); color: var(--on-soft); }
.empty-icon .icon { width: 1.5rem; height: 1.5rem; }
.video { margin-block: 2rem; }
.video-frame { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  background: radial-gradient(40rem 20rem at 80% 0%, rgba(255, 255, 255, .12), transparent 60%), #0f1629; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: .88rem; color: var(--muted); margin-top: .6rem; }
.faq { margin-top: 2.75rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: .65rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-item[open] { border-color: var(--brand-tint); box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem 1.2rem; font-weight: 650; color: var(--ink); list-style: none; border-radius: var(--radius); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .2rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--link); }
.faq-item summary:hover { color: var(--link); }
.faq-answer { padding: 0 1.2rem .55rem; color: var(--text); }
.faq-item[open] .faq-answer { animation: drop-in .25s var(--ease); }
.post-end { margin-top: 2.5rem; padding: 1.35rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.tags, .share { margin: 0; }
.tags + .share { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--border); }
.tags .h-small, .share .h-small { margin-bottom: .7rem; }
.author-card { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 1.25rem; padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.author-card .avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 1.3rem; }
.author-card > div { min-width: 0; }
.author-card .h-small { margin: 0 0 .2rem; }
.author-name { margin: 0; font: 700 1.2rem/1.3 var(--font-display); color: var(--ink); }
.author-bio { margin: .45rem 0 0; color: var(--text); }
.post-nav { display: grid; gap: 1rem; margin-top: 1.25rem; }
.post-nav a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .4rem; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.post-nav a:hover { transform: translateY(-2px); border-color: var(--brand-tint); box-shadow: var(--shadow-md); }
.post-nav-dir { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.post-nav-dir .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.post-nav strong { font: 700 1.08rem/1.32 var(--font-display); }
.post-nav a:hover strong { color: var(--link); }
.post-nav-prev:hover .icon { transform: translateX(-3px); }
.post-nav-next:hover .icon { transform: translateX(3px); }
@media (min-width: 40rem) {
  .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-nav-next { grid-column: 2; text-align: right; }
  .post-nav-next .post-nav-dir { justify-content: flex-end; }
}
/* ---------- Share buttons: round icon links in each platform's colour, filled on hover ---------- */
.share-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .8rem; }
.share-head .h-small { margin: 0; }
.share-total { margin: 0; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.share-total strong { display: inline-block; margin-right: .1rem; font: 700 1.1rem/1 var(--font); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.share-total.is-updated strong { animation: share-pop .5s var(--ease); }
@keyframes share-pop { 40% { transform: scale(1.35); color: var(--link); } }
.share-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.share-btn { --share-c: var(--ink); --share-on: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--share-c); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.share-btn .icon { width: 1.25rem; height: 1.25rem; }
.share-btn:hover, .share-btn:focus-visible { background: var(--share-c); border-color: var(--share-c); color: var(--share-on); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.share-btn:active { transform: none; }
.share-copy { width: auto; padding: 0 1rem 0 .85rem; border-radius: var(--radius-pill); }
.share-copy .icon { width: 1.1rem; height: 1.1rem; }
.share-facebook { --share-c: #1877f2; }
.share-linkedin { --share-c: #0a66c2; }
.share-whatsapp { --share-c: #128c7e; }
.share-reddit { --share-c: #e03d00; }
.share-pinterest { --share-c: #bd081c; }
.share-tumblr { --share-c: #36465d; }
.share-blogger { --share-c: #d95f00; }
.share-flipboard { --share-c: #d92323; }
.share-x, .share-instapaper, .share-email, .share-copy { --share-on: var(--surface); }
@media (prefers-color-scheme: dark) {
  .share-btn { --share-on: #0c111d; }
  .share-facebook { --share-c: #5a9bf6; }
  .share-linkedin { --share-c: #5aa5ec; }
  .share-whatsapp { --share-c: #35c7a5; }
  .share-reddit { --share-c: #ff6a33; }
  .share-pinterest { --share-c: #f0566c; }
  .share-tumblr { --share-c: #a9b8d4; }
  .share-blogger { --share-c: #ff9a3d; }
  .share-flipboard { --share-c: #f26464; }
}
/* Wider screens: slightly smaller buttons, so that all twelve fit on one line of the reading column. */
@media (min-width: 40rem) {
  .share-links { gap: .4rem; }
  .share-btn { width: 2.6rem; height: 2.6rem; }
  .share-copy { width: auto; }
}
.tool-share { max-width: 46rem; margin-top: 2.5rem; }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* ---------- Filters, pagination ---------- */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem); }
.list-toolbar .filter-bar { flex: 1 1 auto; min-width: 0; }
.list-toolbar .filter-bar ul { margin-bottom: 0; }
.list-toolbar .result-count { flex: none; margin: 0; padding: .35rem .85rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); }
.filter-bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem; }
.filter-bar a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .3rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text); font-size: .92rem; font-weight: 600; text-decoration: none; background: var(--surface);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.filter-bar a:hover { border-color: var(--brand); color: var(--link); }
.filter-bar a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.filter-bar a[aria-current] .count { color: inherit; opacity: .75; }
@media (max-width: 39.99rem) {
  /* The box that scrolls is the navigation itself, which has a name, and not the list inside it. It is positioned, so
     that text for screen readers inside it (absolutely positioned) scrolls with it instead of widening the page. */
  .filter-bar { position: relative; display: flex; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .15rem var(--gutter) .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar ul, .list-toolbar .filter-bar ul { flex: none; flex-wrap: nowrap; margin: 0; }
  .filter-bar li { flex: none; }
  .list-toolbar .filter-bar { flex-basis: 100%; }
  .list-toolbar .result-count { padding: 0; border: 0; background: none; }
}

/* ---------- Browse by category (blog and tools): a heading, one row of chips, and the list of every category ---------- */
.cat-browse { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--surface-sunken); border-block: 1px solid var(--border); }
.cat-browse-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.cat-browse-icon { color: var(--brand); background: var(--brand-tint); box-shadow: none; }
.cat-browse-all { display: inline-flex; align-items: center; flex: none; gap: .55rem; min-height: 2.75rem; padding: .25rem .1rem; color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; }
.cat-browse-all:hover { text-decoration: underline; text-underline-offset: .25em; }
.cat-browse-all .icon { width: 1.15rem; height: 1.15rem; color: var(--brand); transition: transform .2s var(--ease); }
.cat-browse-all:hover .icon { transform: translateX(3px); }
.cat-browse-all[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* Each chip is 3rem high. The list keeps room around the chips so that their shadows are not cut off, and the rows
   are further apart than that room is deep, so that a folded row does not show the top of the next one.
   Chips and subcategory links are positioned, so the text for screen readers inside them stays inside the row
   when it scrolls sideways; otherwise that text would make the whole page wider than a phone screen. */
.cat-chips-row { display: flex; align-items: flex-start; gap: .75rem; }
.cat-chips { list-style: none; display: flex; flex-wrap: wrap; flex: 1 1 auto; gap: 1.05rem .7rem; min-width: 0; margin: -.3rem -.3rem -.9rem; padding: .3rem .3rem .9rem; }
.cat-chips li { max-width: 100%; }
.cat-chip { position: relative; display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; height: 3rem; padding: 0 .9rem 0 .4rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: 650 .95rem/1.2 var(--font); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease); }
.cat-chip:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.cat-chip:focus-visible, .cat-branch a:focus-visible, .cat-group-head:focus-visible { border-radius: var(--radius-pill); }
.cat-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-chip-icon { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-soft); color: var(--tone, var(--brand)); }
.cat-chip-icon .icon { width: 1.15rem; height: 1.15rem; }
.cat-chip-count { flex: none; min-width: 1.8rem; padding: .16rem .5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--muted); font-size: .8rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
/* Eight tones, given to the main categories in turn. The soft background is mixed from the tone. */
.cat-tone-1 { --tone: #2f5bea; } .cat-tone-2 { --tone: #15803d; } .cat-tone-3 { --tone: #c2410c; } .cat-tone-4 { --tone: #be185d; }
.cat-tone-5 { --tone: #6d28d9; } .cat-tone-6 { --tone: #0f766e; } .cat-tone-7 { --tone: #a16207; } .cat-tone-8 { --tone: #0369a1; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .cat-chip-icon { background: color-mix(in srgb, var(--tone, var(--brand)) 12%, var(--surface)); }
}
.cat-chip[aria-current] { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 12px 22px -12px var(--brand); }
.cat-chip[aria-current] .cat-chip-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.cat-chip[aria-current] .cat-chip-count { background: rgba(0, 0, 0, .18); color: #fff; }
.cat-more { flex: none; justify-content: center; width: 3rem; padding: 0; cursor: pointer; }
.cat-more .icon { width: 1.3rem; height: 1.3rem; stroke-width: 3; }
.cat-more-close, .cat-browse.is-open .cat-more-open { display: none; }
.cat-browse.is-open .cat-more-close { display: inline-flex; }
.cat-more-close .icon { stroke-width: 2; }
/* With the script running, the chips keep to one line until the button with the three dots is used. */
@media (min-width: 40rem) {
  .js .cat-browse:not(.is-open) .cat-chips { max-height: 4.2rem; overflow: hidden; }
}

/* On the page of a category: the subcategories of its branch. */
.cat-branch ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; }
.cat-branch a { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: .3rem .95rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease); }
.cat-branch a:hover { border-color: var(--brand); color: var(--link); }
.cat-branch a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.cat-branch .count, .cat-group-list .count { color: var(--muted); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-branch a[aria-current] .count { color: inherit; opacity: .8; }
/* The same row on the page of a job category, below the row of main categories. */
.jobs-branch { margin: -.85rem 0 1.5rem; }
.jobs-branch ul { margin-top: 0; }

/* Every category with its subcategories. Open without the script; with it, "View all categories" opens it. */
.cat-all { margin-top: 1.4rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cat-all:focus { outline: none; }
.js .cat-browse:not(.is-ready) .cat-all:not(:target), .js .cat-browse.is-ready .cat-all:not(.is-open) { display: none; }
.cat-all-title { margin: 0 0 1rem; font: 700 .78rem/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
/* Columns, not a grid: a category without subcategories takes only the room it needs. */
.cat-all-grid { list-style: none; columns: 3 16rem; column-gap: 2rem; margin: 0 0 -1.3rem; padding: 0; }
.cat-group { break-inside: avoid; padding-bottom: 1.3rem; }
.cat-group-head { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 650; line-height: 1.3; text-decoration: none; }
.cat-group-head:hover .cat-group-name { text-decoration: underline; text-underline-offset: .2em; }
.cat-group-head[aria-current] .cat-group-name, .cat-group-list a[aria-current] { color: var(--link); font-weight: 700; }
.cat-group-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cat-group-list { list-style: none; margin: .55rem 0 0; padding: 0 0 0 2.8rem; }
.cat-group-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .26rem 0; font-size: .95rem; }
.cat-group-list a { min-width: 0; overflow-wrap: anywhere; color: var(--text); text-decoration: none; }
.cat-group-list a:hover { color: var(--link); text-decoration: underline; }

/* Phones: the chips and the subcategories scroll sideways, edge to edge, and nothing is folded away.
   The box that scrolls is the navigation itself, which has a name, and not the list inside it. */
@media (max-width: 39.99rem) {
  .cat-chips-row, .cat-branch { display: flex; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cat-chips-row::-webkit-scrollbar, .cat-branch::-webkit-scrollbar { display: none; }
  .cat-chips-row { margin-block: -.3rem -.9rem; padding-block: .3rem .9rem; }
  .cat-branch { margin-block: .8rem -.3rem; padding-block: .3rem; }
  .cat-chips, .cat-branch ul { flex: none; flex-wrap: nowrap; margin: 0; padding: 0; }
  .jobs-branch { margin-block: -.5rem 1.1rem; }
  .cat-chips li, .cat-branch li { flex: none; }
  .cat-chips li { max-width: 80vw; }
  .cat-chip { font-size: .94rem; }
  .cat-more { display: none; }
  .cat-browse-all { min-height: 2.4rem; font-size: .92rem; }
  .cat-browse-head h2 { font-size: 1.3rem; }
  /* The link reads "View all" on a phone. The second word stays for screen readers. */
  .cat-browse-all-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cat-group-list { padding-left: 0; }
}
@media (prefers-color-scheme: dark) {
  .cat-chip-icon { color: #fff; }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .cat-chip-icon { color: color-mix(in srgb, var(--tone, var(--brand)) 45%, #fff); background: color-mix(in srgb, var(--tone, var(--brand)) 26%, var(--surface)); }
    .cat-browse-icon { color: color-mix(in srgb, var(--brand) 45%, #fff); }
  }
  .cat-chip[aria-current] .cat-chip-icon { background: rgba(255, 255, 255, .18); color: #fff; }
}
.filters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; padding: 1.25rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.filters .field { margin: 0; }
.filters-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters-inline { grid-template-columns: minmax(0, 1fr) auto; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: 2.5rem 0 0; }
.pager a, .pager .current { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink); background: var(--surface);
  transition: border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.pager a:hover { border-color: var(--brand); color: var(--link); box-shadow: var(--shadow-sm); }
.pager .current { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px var(--brand); }
.pager a[rel] { padding-inline: 1.15rem; }
.pager .gap { align-self: center; color: var(--muted); }
/* Phones: page numbers on one line, Previous and Next side by side below them. */
@media (max-width: 30rem) {
  .pager ul::after { content: ""; flex-basis: 100%; order: 1; }
  .pager li:has(> a[rel]) { order: 2; flex: 1 1 0; }
  .pager li:has(> a[rel]) a { width: 100%; }
}
.sitemap-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.sitemap-grid section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-xs); }
.sitemap-grid h2 { font-size: 1.15rem; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: .28rem 0; }
.link-list-inline { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend, .field-label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: .35rem; padding: 0; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 2.875rem; padding: .6rem .85rem; border: 1px solid var(--field-border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field textarea { resize: vertical; line-height: 1.55; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a849c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; }
.field input[type="file"] { padding: .45rem; background: var(--surface-sunken); }
.field input[type="file"]::file-selector-button { margin-right: .85rem; padding: .45rem .95rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.field input[type="file"]::file-selector-button:hover { border-color: var(--brand); color: var(--link); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.has-error input:not([type="checkbox"]), .has-error select, .has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.help { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.error { margin: .4rem 0 0; font-size: .9rem; font-weight: 600; color: var(--danger); }
.error::before { content: "!"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .4rem; border-radius: 50%; background: var(--danger); color: var(--surface); font-size: .72rem; font-weight: 800; vertical-align: .08em; }
.req { color: var(--danger); }
.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .95rem; color: var(--text); cursor: pointer; }
.check > span { min-width: 0; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .22rem; flex: none; accent-color: var(--brand); cursor: pointer; }
.field label.check { display: flex; margin-bottom: 0; font-weight: 400; font-size: .95rem; color: var(--text); }
.check-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.form-note, .form-privacy { margin: 0; font-size: .9rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The CAPTCHA of the website: a picture of six letters and digits (or a sum in words), the field for the answer,
   "Refresh CAPTCHA" and the way to the sum in words. The picture keeps its own light background in the dark theme. */
.captcha { min-width: 0; }
.captcha-title { margin: 0 0 .45rem; font-weight: 650; color: var(--ink); }
.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem; margin-bottom: .55rem; }
.captcha-image { display: block; width: 260px; max-width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 10px; background: #f3f4f8; }
.captcha-question { margin: 0; padding: .7rem .95rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-sunken); color: var(--ink); font-weight: 600; }
.field input.captcha-input { max-width: 12rem; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.captcha-wait { margin: 0; }
.captcha[aria-busy="true"] { opacity: .65; }
/* A form that is only a button asks for the code in this dialog. */
.captcha-dialog { width: min(30rem, 94vw); max-height: 92vh; overflow-y: auto; padding: 1.4rem; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); }
.captcha-dialog::backdrop { background: rgba(9, 13, 26, .6); }
.captcha-dialog .confirm-dialog-head h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.captcha-dialog .confirm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.tool-captcha { margin-top: 1rem; }
/* Forms in steps: numbered groups and a closing block with consent, verification and the button. */
.form-steps { gap: 1.75rem; }
.form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section > legend { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; padding: 0; font: 700 1.15rem/1.3 var(--font-display); color: var(--ink); }
.form-step { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand-soft); color: var(--on-soft); font: 700 .86rem/1 var(--font); }
.form-section-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 40rem) {
  .form-row-topic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  /* A short field keeps half the width; its hint sits beside it instead of under it. */
  .field-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; align-items: center; }
  .field-side > label, .field-side > .error { grid-column: 1 / -1; }
  .field-side > input { grid-column: 1; }
  .field-side > .help { grid-column: 2; grid-row: 2; margin: 0; }
}
.form-end { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.form-end .btn { justify-self: start; min-height: 3.1rem; padding-inline: 1.6rem; }
.form-end .btn .icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 30rem) { .form-end .btn { justify-self: stretch; width: 100%; } }
.help-count { display: flex; justify-content: space-between; gap: 1rem; }
.char-count { flex: none; font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--danger); font-weight: 600; }
.form > .btn { justify-self: start; }
@media (max-width: 30rem) { .form > .btn, .hero-actions .btn { justify-self: stretch; width: 100%; } }
.alert { padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid transparent; line-height: 1.5; }
.alert-error { background: var(--error-bg); color: var(--error-text); border-color: var(--danger); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); }
.alert-success { background: var(--success-bg); color: var(--success-text); }
.alert strong { color: inherit; }
.alert-info { background: var(--brand-soft); color: var(--on-soft); border-color: var(--brand-tint); }

/* ---------- Sign-in, registration and password recovery ----------
   One card between the header and the footer. Pages with a form get a second, dark column in the brand colours
   beside it from 56rem (auth/layout.php); notices and "Security check" keep the form panel alone. */
.auth-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(1.5rem, 6vw, 4.5rem); }
.auth-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44rem 26rem at 8% 0%, var(--brand-soft), transparent 70%), radial-gradient(38rem 24rem at 96% 100%, var(--accent-soft), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.auth-shell { width: min(30rem, 100%); margin-inline: auto; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 6px); box-shadow: var(--shadow-lg); }
.auth-panel { min-width: 0; padding: clamp(1.4rem, 5vw, 2.75rem); }
@media (min-width: 56rem) {
  .auth-shell-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); width: min(62rem, 100%); }
  .auth-shell-split .auth-panel { padding: 3rem 3.25rem; }
}
.auth-head { margin-bottom: 1.6rem; }
.auth-badge { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: 14px; background: var(--brand-soft); color: var(--on-soft); box-shadow: inset 0 0 0 1px var(--brand-tint); }
.auth-badge .icon { width: 1.45rem; height: 1.45rem; }
.auth-panel h1 { margin: 0 0 .45rem; font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.15rem); }
.auth-lead { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.auth-lead strong { overflow-wrap: anywhere; }
.auth-panel .form { gap: 1.15rem; }
.auth-panel .field .field-control > input, .auth-panel .field > input:not([type="checkbox"]):not([type="radio"]) { min-height: 3rem; border-radius: 12px; }
.auth-panel .form > .btn-block { justify-self: stretch; }
.auth-panel .auth-submit { min-height: 3.15rem; margin-top: .3rem; border-radius: 12px; font-size: 1rem; }
.auth-submit .icon { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); }
.auth-submit:hover .icon { transform: translateX(3px); }
.auth-forgot { margin: -.45rem 0 0; text-align: right; font-size: .9rem; }
.auth-forgot a { font-weight: 600; text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }
.auth-links { margin: 1.75rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--border); text-align: center; font-size: .94rem; color: var(--muted); }
.auth-links a { font-weight: 650; }
.auth-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.auth-back .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.auth-back:hover .icon { transform: translateX(-3px); }
.auth-note { margin-top: 1rem; text-align: center; }
.step-resend { gap: .5rem; margin-top: 1rem; }
.step-resend .help { margin: 0; text-align: center; }
/* Messages: an icon beside the text, in the colour of the message. */
.auth-panel .alert { position: relative; margin: 0 0 1.25rem; padding-left: 2.9rem; font-size: .94rem; }
.auth-panel .alert::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.2rem; height: 1.2rem; background: currentColor;
  -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat; }
.auth-panel .alert-error { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.auth-panel .alert-success { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.8 2.8 5.2-5.6'/%3E%3C/svg%3E"); }
.auth-panel .alert-info { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E"); }
/* The CAPTCHA as a quiet box of its own once its code is shown. */
.auth-panel .captcha:not([data-captcha-load]) { padding: 1rem 1.1rem 1.1rem; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 14px; }
/* The code of the second step: large, spaced digits. */
.auth-panel .field-otp { text-align: center; }
.auth-panel .field.field-otp > input { min-height: 3.6rem; text-align: center; font: 650 1.55rem/1 var(--font-mono); letter-spacing: .42em; text-indent: .42em; }
/* Closing pages (account created, link sent, password changed, link not valid) and the email confirmation. */
.auth-status { padding-block: .5rem; text-align: center; }
.auth-status-icon { display: inline-grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--brand-soft); color: var(--on-soft); outline: 1px solid var(--border); outline-offset: .45rem; }
.auth-status-icon .icon { width: 1.9rem; height: 1.9rem; }
.auth-status-success .auth-status-icon { background: var(--success-bg); color: var(--success-text); }
.auth-status-error .auth-status-icon { background: var(--error-bg); color: var(--danger); }
.auth-status-text { max-width: 38ch; margin: 0 auto; color: var(--text); }
.auth-status .form { margin-top: 1.5rem; text-align: left; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.75rem; }
.auth-actions .btn { min-width: 9rem; }
/* The column beside the form: what the page is for, on the dark ground of the newsletter card. */
.auth-side { display: none; }
@media (min-width: 56rem) {
  .auth-side { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 3rem 2.75rem; overflow: hidden; color: #dfe4f1;
    background: linear-gradient(150deg, #0d1430, #151d42);
    background: radial-gradient(28rem 20rem at 100% 0%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 70%), radial-gradient(24rem 18rem at 0% 100%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), linear-gradient(150deg, #0d1430, #151d42); }
  .auth-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.5px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(165deg, #000, transparent 65%); mask-image: linear-gradient(165deg, #000, transparent 65%); }
  .auth-side::after { content: ""; position: absolute; right: -8rem; bottom: -8rem; z-index: -1; width: 21rem; height: 21rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%;
    box-shadow: 0 0 0 2.75rem rgba(255, 255, 255, .025), 0 0 0 5.5rem rgba(255, 255, 255, .02); }
}
.auth-side-brand { display: flex; align-items: center; gap: .65rem; margin: 0 0 clamp(2.5rem, 7vh, 4.5rem); color: #fff; font: 700 1.1rem/1.2 var(--font-display); }
.auth-side-foot { margin: auto 0 0; padding-top: 2.5rem; color: #c6cde2; font-size: .9rem; }
.auth-side h2 { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.25rem); }
.auth-side-intro { max-width: 34ch; margin: 0 0 1.75rem; color: #c9d0e3; font-size: 1.05rem; }
.auth-side-list { display: grid; gap: .95rem; margin: 0; padding: 0; list-style: none; }
.auth-side-list li { display: flex; align-items: flex-start; gap: .8rem; color: #e6eaf5; line-height: 1.5; }
.auth-side-list .icon { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #7fe3bf; }
.auth-side-steps { counter-reset: auth-step; }
.auth-side-steps li { counter-increment: auth-step; }
.auth-side-steps li::before { content: counter(auth-step); display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; font: 700 .85rem/1 var(--font); }
/* Fields with an icon and the Show/Hide button of a password (form_field options icon and reveal; public.js). */
.field-control { position: relative; }
.field-control .field-icon { position: absolute; left: .9rem; top: 50%; width: 1.15rem; height: 1.15rem; color: var(--muted); transform: translateY(-50%); pointer-events: none; transition: color .15s var(--ease); }
.field-control:focus-within .field-icon { color: var(--link); }
.field .field-control.has-icon > input { padding-left: 2.7rem; }
.js .field .field-control.has-reveal > input { padding-right: 5.6rem; }
.field-reveal { display: none; }
.js .field-reveal { position: absolute; right: .35rem; top: 50%; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: 0 .7rem; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font: 600 .86rem/1 var(--font); cursor: pointer; transform: translateY(-50%); transition: background-color .15s var(--ease), color .15s var(--ease); }
.field-reveal:hover { background: var(--surface-sunken); color: var(--ink); }
.field-reveal:focus-visible { outline-offset: 0; }
.field-reveal .icon { width: 1.05rem; height: 1.05rem; }
.field-reveal .reveal-hide, .field-reveal.is-shown .reveal-show { display: none; }
.field-reveal.is-shown .reveal-hide { display: block; }
.field-caps { display: flex; align-items: center; gap: .4rem; width: fit-content; margin: .45rem 0 0; padding: .2rem .65rem; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-text); font-size: .84rem; font-weight: 600; }
.field-caps:empty { display: none; }
/* The rules of a new password, ticked off while it is typed. */
.pw-checks { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .82rem; }
.pw-checks li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem .2rem .45rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--muted);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.pw-checks li::before { content: ""; flex: none; width: .9rem; height: .9rem; border: 1.5px solid currentColor; border-radius: 50%; }
.pw-checks li.is-met { border-color: transparent; background: var(--success-bg); color: var(--success-text); }
.pw-checks li.is-met::before { border: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.4 15.6-4.3-4.3 1.6-1.6 2.7 2.7 5.6-5.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.4 15.6-4.3-4.3 1.6-1.6 2.7 2.7 5.6-5.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid var(--on-button, #fff); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Newsletter: a dark call-to-action card, copy on the left and the form on a raised light card on the right. */
.newsletter { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: calc(var(--radius-lg) + 8px); color: #d7dcec; box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, #0d1430, #1b2552);
  background: radial-gradient(40rem 22rem at 0% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%), radial-gradient(30rem 18rem at 100% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), linear-gradient(135deg, #0d1430, #151d42); }
.newsletter-copy h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: #fff; }
.newsletter-copy p { color: #c6cde2; font-size: 1.05rem; max-width: 42ch; }
.newsletter-copy .newsletter-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; padding: .28rem .8rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.newsletter-kicker .icon { width: 1rem; height: 1rem; }
.newsletter-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.newsletter-points li { display: flex; align-items: flex-start; gap: .6rem; color: #e4e8f4; }
.newsletter-points .icon { margin-top: .2rem; color: #7fe3bf; }
.newsletter-form { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.1rem, 2.5vw, 1.6rem); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
@media (min-width: 56rem) { .newsletter { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
/* ---------- Contact page ---------- */
.hero-contact { padding-block: clamp(2rem, 5vw, 4rem); }
.hero-contact h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; }
.contact-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .contact-rail { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.contact-main { min-width: 0; }
.contact-intro { max-width: 44rem; margin-bottom: 1.5rem; }
.contact-intro > :last-child { margin-bottom: 0; }
.contact-panel { scroll-margin-top: calc(var(--header-h) + 1rem); padding: clamp(1.25rem, 3.2vw, 2.25rem); border-radius: calc(var(--radius-lg) + 6px); box-shadow: var(--shadow-md); }
.contact-main > .faq { max-width: 46rem; }
.contact-card { border-top: 3px solid var(--brand); }
.contact-methods { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; }
.contact-methods li { display: flex; align-items: flex-start; gap: .85rem; }
.contact-method-icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--brand-soft); color: var(--on-soft); }
.contact-method-icon .icon { width: 1.2rem; height: 1.2rem; }
.contact-methods div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; min-width: 0; line-height: 1.45; }
.contact-method-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-methods a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-methods a:hover { color: var(--link); text-decoration: underline; }
.contact-methods div > span:last-child { color: var(--ink); }
.contact-reply { display: flex; align-items: flex-start; gap: .5rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .92rem; line-height: 1.45; }
.contact-reply .icon { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding-left: 2.6rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand-soft); color: var(--on-soft); font-weight: 700; font-size: .86rem; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: .9rem; top: 2.05rem; bottom: -.95rem; width: 1px; background: var(--border-strong); }
.steps strong { color: var(--ink); line-height: 1.35; }
.steps span { color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* Confirmation, receipt and error pages */
.message { position: relative; text-align: center; padding-top: clamp(2rem, 5vw, 3rem); }
.message h1 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); }
.message::before { content: ""; display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--brand-soft) center / 1.6rem no-repeat; }
.message-success::before { background-color: var(--success-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.message-error::before { background-color: var(--error-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.message-info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b50e0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }
.message form { display: inline-block; }
.reference { display: inline-grid; justify-items: center; gap: .4rem; max-width: 100%; margin: .35rem 0 1.5rem; padding: 1.15rem 1.75rem 1.25rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.reference-label { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.reference-code { font: 700 clamp(1.2rem, 1.05rem + .9vw, 1.6rem)/1.25 var(--font-mono); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.reference .btn { margin-top: .35rem; }
.reference .btn .icon { width: 1rem; height: 1rem; }
.message > p[role="status"] { max-width: 34rem; margin-inline: auto; font-size: 1.08rem; }
.error-code { margin-bottom: .9rem; font: 700 clamp(2.75rem, 1.9rem + 4.5vw, 4.5rem)/1.15 var(--font-display); letter-spacing: -.035em; color: var(--error-code-from, var(--brand)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .error-code { background: linear-gradient(120deg, var(--error-code-from, var(--brand)), var(--error-code-to, var(--accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
/* The brand blue is under 3:1 on the dark surface, so the dark scheme uses lighter ends of the same gradient. */
@media (prefers-color-scheme: dark) {
  :root { --error-code-from: var(--link); }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    :root { --error-code-from: color-mix(in srgb, var(--brand) 70%, #fff); --error-code-to: color-mix(in srgb, var(--accent) 80%, #fff); }
  }
}
.message:has(.error-code)::before { display: none; }
.message .filters { display: grid; max-width: 30rem; margin: 1.5rem auto; text-align: left; box-shadow: none; background: var(--surface-sunken); }
.message .link-list-inline { justify-content: center; }

/* ---------- Tools index ---------- */
.hero-tools { padding-block: clamp(2rem, 5vw, 4rem); }
.hero-tools h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; }
.hero-search { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 38rem; margin-top: 1.6rem; }
.hero-search-box { position: relative; flex: 1 1 15rem; min-width: 0; }
.hero-search-box .icon { position: absolute; left: 1rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -.575rem; color: var(--muted); pointer-events: none; }
.hero-search-box input { width: 100%; min-height: 3.25rem; padding: .7rem 1rem .7rem 2.85rem; border: 1px solid var(--field-border); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1.02rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.hero-search-box input::placeholder { color: var(--muted); opacity: .85; }
.hero-search-box input:hover { border-color: var(--ink); }
.hero-search-box input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.hero-search .btn { min-height: 3.25rem; padding-inline: 1.5rem; border-radius: 14px; }
@media (max-width: 30rem) { .hero-search .btn { width: 100%; } }
.tool-notes { margin-top: clamp(2rem, 5vw, 3.5rem); padding: clamp(1.25rem, 3vw, 1.9rem); background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 4px); box-shadow: var(--shadow-xs); }
.tool-notes ul { list-style: none; display: grid; gap: 1.35rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; }
.tool-notes li { display: flex; align-items: flex-start; gap: .9rem; }
.tool-note-icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.tool-note-icon .icon { width: 1.25rem; height: 1.25rem; }
/* Tablets: three notes side by side with the icon above the text, so none is left alone on a second line. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .tool-notes ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .tool-notes li { flex-direction: column; gap: .7rem; }
}
.tool-notes strong { display: block; color: var(--ink); }
.tool-notes p { margin: .15rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* ---------- Tool page ---------- */
.hero-tool { padding-block: clamp(1.75rem, 4vw, 3rem); }
.tool-head { display: flex; align-items: center; gap: 1.1rem; }
.tool-head-text { min-width: 0; }
.tool-head .post-kicker { margin-bottom: .45rem; }
.tool-icon-lg { width: 4rem; height: 4rem; border-radius: 18px; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); box-shadow: 0 12px 22px -10px var(--brand); }
.tool-icon-lg .icon { width: 1.9rem; height: 1.9rem; }
.hero-tool h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.hero-tool .hero-intro { margin-top: 1.1rem; }
@media (max-width: 30rem) { .tool-head { align-items: flex-start; gap: .85rem; } .tool-icon-lg { width: 3.25rem; height: 3.25rem; border-radius: 15px; } .tool-icon-lg .icon { width: 1.55rem; height: 1.55rem; } }
/* Work area: the inputs on a light side, the result on a dark "display" side, in one frame. */
.tool-stage { margin-top: clamp(1.25rem, 3vw, 2rem); }
.tool-workspace { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 8px); box-shadow: var(--shadow-lg); }
.tool-panel, .tool-results { min-width: 0; padding: clamp(1.25rem, 3.2vw, 2.25rem); }
.tool-panel > h2, .tool-results > h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.tool-panel > .help, .tool-results > .help { margin: 0 0 1.25rem; font-size: .92rem; }
.tool-panel > h2:last-of-type + form, .tool-panel > h2 + form { margin-top: 1.1rem; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tool-form .tool-actions { margin-top: .35rem; }
.tool-form .tool-actions .btn-primary { min-height: 3rem; padding-inline: 1.6rem; }
.tool-actions .icon { width: 1.05rem; height: 1.05rem; }
.tool-results { color: #dfe4f3; background: linear-gradient(150deg, #0d1430, #172049);
  background: radial-gradient(28rem 16rem at 100% 0%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 72%), radial-gradient(22rem 14rem at 0% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%), linear-gradient(150deg, #0d1430, #151d42); }
.tool-results { position: relative; isolation: isolate; overflow: hidden; }
/* Faint rings in the corner keep the empty display from looking unfinished. */
.tool-results::after { content: ""; position: absolute; right: -5rem; bottom: -5rem; z-index: -1; width: 15rem; height: 15rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 0 0 2.75rem rgba(255, 255, 255, .028), 0 0 0 5.5rem rgba(255, 255, 255, .02); pointer-events: none; }
.tool-results > h2 { color: #fff; }
.tool-results > .help { color: #aab3cf; }
.tool-status p { margin: 0; }
.tool-summary { font: 700 1.3rem/1.38 var(--font-display); color: #fff; }
.tool-message { color: #b9c1da; line-height: 1.6; }
.tool-message-error { color: #ffb4ab; font-weight: 600; }
.tool-message-loading::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .55rem; vertical-align: -2px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.result-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 1.25rem 0; }
.result-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem .2rem; border-top: 1px solid rgba(255, 255, 255, .13); }
.result-list dt { color: #b9c1da; font-size: .94rem; }
.result-list dd { margin: 0; font-weight: 700; color: #fff; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* The first row is the answer: it is set large on its own tile. */
.result-list div:first-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; margin-bottom: .35rem; padding: 1.1rem 1.25rem 1.2rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .07); animation: rise-in .35s var(--ease); }
.result-list div:first-child dt { font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.result-list div:first-child dd { text-align: left; font: 700 clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.result-list div:first-child + div { border-top: 0; }
/* A generated password is set in a monospace face so that similar characters can be told apart, and is selected with one tap. */
.tool-key-password-generator .result-list div:first-child dd { font: 600 clamp(1.05rem, .95rem + .6vw, 1.35rem)/1.5 var(--font-mono); letter-spacing: .02em; -webkit-user-select: all; user-select: all; }
.tool-results .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }
.tool-results .btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); color: #fff; }
.tool-results .btn-primary { background: var(--brand); border-color: var(--brand); }
.tool-retry { margin-top: 1rem; }
@media (min-width: 56rem) {
  .tool-workspace { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* The work area rises over the lower edge of the header. */
  .hero-tool { padding-bottom: calc(clamp(1.75rem, 4vw, 3rem) + 3rem); }
  .tool-stage { margin-top: -3rem; position: relative; z-index: 2; }
  /* With a banner below the header the work area keeps its own place. */
  .hero-tool.has-ad { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
  .tool-stage.has-ad { margin-top: clamp(1.25rem, 3vw, 2rem); }
}
/* Documentation */
.tool-about > .prose { max-width: 46rem; margin-bottom: 2rem; }
.tool-docs > h2 { margin: 0 0 1.1rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.tool-doc-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.tool-doc { min-width: 0; padding: 1.35rem 1.5rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.tool-doc h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; font-size: 1.15rem; }
.tool-doc-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--brand-soft); color: var(--on-soft); }
.tool-doc-icon .icon { width: 1.1rem; height: 1.1rem; }
.tool-doc p, .tool-doc ul { margin: 0; line-height: 1.7; }
.tool-doc ul { padding-left: 1.15rem; }
.tool-doc li + li { margin-top: .4rem; }
.tool-doc li::marker { color: var(--link); }
.tool-doc-limits { background: var(--warning-bg); border-color: transparent; color: var(--warning-text); box-shadow: none; }
.tool-doc-limits h3 { color: inherit; }
.tool-doc-limits .tool-doc-icon { background: rgba(255, 255, 255, .55); color: inherit; }
@media (prefers-color-scheme: dark) { .tool-doc-limits .tool-doc-icon { background: rgba(255, 255, 255, .12); } }
@media (min-width: 56rem) { .tool-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool-doc-method, .tool-doc-limits { grid-column: 1 / -1; } }
@media (min-width: 56rem) {
  .tool-about .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
  .tool-about .faq > h2 { grid-column: 1 / -1; }
}
/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); background: var(--footer-bg); color: #b7bfd3; font-size: .95rem; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.site-footer a, .site-footer .link-button { color: #e7eaf3; text-decoration: none; }
.site-footer a:hover, .site-footer .link-button:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); padding-block: clamp(2.5rem, 5vw, 3.75rem) 2rem; }
.footer-grid > :first-child { max-width: 24rem; }
.footer-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; font: 700 1.25rem/1.2 var(--font-display); color: #fff; }
.footer-title { font: 700 .76rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .1em; color: #8690aa; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .28rem 0; }
.site-footer address { line-height: 1.8; }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem !important; }
.social li { padding: 0; }
.social a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .9rem; border: 1px solid #2a3350; border-radius: var(--radius-pill); font-size: .86rem; font-weight: 600; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.social a:hover { border-color: #5a6788; background: #151c33; text-decoration: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; border-top: 1px solid #1c2440; padding-block: 1.25rem; font-size: .88rem; color: #8690aa; }
.footer-bottom p { min-width: 0; margin: 0; }
.push-control { margin-top: 1.1rem; }
.site-footer .btn-ghost { color: #fff; border-color: #3a4566; }
.site-footer .btn-ghost:hover { background: #151c33; border-color: #5a6788; color: #fff; }
.site-footer .help { color: #8690aa; }

/* ---------- Cookie preferences: a floating panel that never covers the page or the navigation ---------- */
.cookie { position: fixed; z-index: 60; left: 50%; bottom: clamp(.75rem, 2vw, 1.5rem); transform: translateX(-50%); width: min(62rem, calc(100% - 1.5rem)); max-height: min(85vh, 40rem); overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: cookie-in .35s var(--ease); }
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cookie-inner { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.cookie h2 { font-size: 1.2rem; margin-bottom: .35rem; }
.cookie p { margin-bottom: .9rem; font-size: .93rem; line-height: 1.55; }
.cookie-categories { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.cookie-categories .check { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); font-size: .86rem; line-height: 1.45; }
.cookie-categories .check strong { display: block; }
/* Reject and Accept are always visible at equal size. The switches per category and "Save Preferences" open below
   them, so on a first visit the panel takes a fraction of the screen instead of most of it. */
.cookie form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.cookie-actions { display: flex; flex: 1 1 24rem; flex-wrap: wrap; gap: .6rem; }
.cookie-actions .btn { flex: 1 1 11rem; }
.cookie-details { flex: 0 1 auto; min-width: 0; }
.cookie-details[open] { flex: 1 1 100%; }
.cookie-details > summary { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .25rem .4rem; border-radius: var(--radius-sm); cursor: pointer; list-style: none; font-size: .93rem; font-weight: 600; color: var(--link); }
.cookie-details > summary::-webkit-details-marker { display: none; }
.cookie-details > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s var(--ease); }
.cookie-details[open] > summary::after { margin-top: .25rem; transform: rotate(-135deg); }
.cookie-details > summary:hover { text-decoration: underline; }
.cookie-details .cookie-categories { margin: .35rem 0 .8rem; }
.cookie-details > .btn { min-width: min(100%, 14rem); }
/* Phones: Reject and Accept share a row at equal size. */
@media (max-width: 40rem) {
  .cookie { bottom: .5rem; width: calc(100% - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .cookie-inner { padding: .95rem; }
  .cookie h2 { font-size: 1.08rem; margin-bottom: .25rem; }
  .cookie p { margin-bottom: .65rem; font-size: .84rem; line-height: 1.45; }
  .cookie form { gap: .25rem; }
  .cookie-details { flex-basis: 100%; }
  .cookie-details > summary { min-height: 2.5rem; font-size: .86rem; }
  .cookie-details .cookie-categories { gap: .35rem; margin-bottom: .6rem; }
  .cookie-details > .btn { width: 100%; min-height: 2.6rem; font-size: .84rem; }
  .cookie-categories .check { padding: .5rem .65rem; font-size: .78rem; line-height: 1.4; }
  .cookie-categories .check strong { font-size: .84rem; }
  .cookie-actions { display: grid; flex-basis: 100%; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .cookie-actions .btn { min-height: 2.6rem; padding-inline: .5rem; font-size: .84rem; }
}

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .site-footer, .cookie, .ad-slot, .ad-fixed, .sidebar, .share, .skip-link, .read-progress { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0 !important; }
  .card, .panel, .widget { box-shadow: none; }
}

/* ---------- Custom tools: the work area that holds the output of a tool's own code ---------- */
.tool-custom { padding: clamp(1.1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow-x: auto; }
.tool-wrapper { min-width: 0; overflow-wrap: anywhere; }
.tool-wrapper:focus { outline: none; }
.tool-wrapper[aria-busy="true"] { opacity: .6; pointer-events: none; transition: opacity .15s var(--ease); }
.tool-wrapper > :first-child { margin-top: 0; }
.tool-wrapper > :last-child { margin-bottom: 0; }
.tool-wrapper img, .tool-wrapper svg, .tool-wrapper canvas, .tool-wrapper video { max-width: 100%; height: auto; }
.tool-wrapper table { width: 100%; border-collapse: collapse; }
.tool-wrapper th, .tool-wrapper td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tool-wrapper label { display: block; margin-bottom: .3rem; font-weight: 600; color: var(--ink); }
.tool-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]), .tool-wrapper select, .tool-wrapper textarea {
  width: 100%; max-width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid var(--field-border, var(--border)); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.tool-wrapper button:not([class]), .tool-wrapper input[type="submit"]:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .55rem 1.3rem;
  border: 1px solid var(--brand); border-radius: var(--radius-pill); background: var(--brand); color: #fff; font: 600 1rem/1.2 var(--font); cursor: pointer; }
.tool-wrapper button:not([class]):hover { filter: brightness(.94); }
.tool-wrapper button:disabled { opacity: .6; cursor: progress; }
.tool-notice { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-sunken); }
.tool-notice p { margin: 0; }
.tool-notice-error { background: var(--error-bg); border-color: transparent; color: var(--error-text); }
.tool-field-error { margin: .3rem 0 0; color: var(--danger); font-size: .9rem; font-weight: 600; }
.tool-debug { margin: 0 0 1rem; padding: .8rem 1rem; overflow-x: auto; border-radius: var(--radius); background: #111827; color: #f9fafb; font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
@media (min-width: 56rem) {
  /* Like the built-in tools, the work area rises over the lower edge of the header. */
  .tool-stage > .tool-custom { position: relative; z-index: 2; }
}

/* ---------- Press releases (version 2.1.0) ---------- */
.press-categories { padding-top: clamp(1rem, 2.5vw, 1.5rem); }
.press-categories ul { margin-bottom: 0; }
.press-filters { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.press-featured { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.press-featured .h-small, .press-latest-heading { margin: 0 0 1rem; }
.press-archive-link { margin: 2rem 0 0; text-align: center; }
.card-type { display: inline-flex; align-items: center; padding: .1rem .6rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--on-soft); font-size: .78rem; font-weight: 650; }
.press-kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hero-press-release .post-meta { justify-content: center; }
.press-kicker .press-type { background: var(--surface-sunken); color: var(--text); border: 1px solid var(--border); }
.press-subtitle { margin-top: -.2rem; }
.press-archived { color: var(--warning-text); }
.press-cover figcaption { margin-top: .6rem; color: var(--muted); font-size: .88rem; text-align: center; }
.press-credit { color: var(--muted); font-style: italic; }
.press-article { max-width: 46rem; margin-inline: auto; }
.press-dateline { margin: .85rem 0 0; font-size: .88rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.press-block { margin-top: clamp(2rem, 4vw, 2.75rem); }
.press-block > h2 { margin-bottom: .9rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.press-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin: 0; }
.press-facts dl > div { padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); }
.press-facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.press-facts dd { margin: .25rem 0 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.press-quote { margin: 0 0 1.25rem; padding: 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.press-quote blockquote { margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: 1.12rem; line-height: 1.6; color: var(--ink); }
.press-quote blockquote p:last-child { margin-bottom: 0; }
.press-quote figcaption { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; color: var(--text); }
.press-quote-photo img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.press-quote-role { color: var(--muted); font-size: .92rem; }
.press-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.press-gallery-grid figure { margin: 0; }
.press-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-sunken); }
.press-gallery-grid figcaption { margin-top: .45rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.press-full { display: inline-block; margin-top: .2rem; font-weight: 600; }
.press-download-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.press-download-list li { display: grid; gap: .15rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.press-download-list a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; overflow-wrap: anywhere; }
.press-download-list .icon { flex: none; width: 1.1rem; height: 1.1rem; }
.press-download-list small { color: var(--muted); }
.press-related-content .link-list small { margin-left: .25rem; }
.press-tags { margin-top: clamp(2rem, 4vw, 2.75rem); }
.press-about p:last-child { margin-bottom: 0; }
.press-contact address { display: block; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); line-height: 1.9; overflow-wrap: anywhere; }
.press-contact .icon { width: 1rem; height: 1rem; margin-right: .45rem; color: var(--muted); }
.press-share { margin-top: clamp(2rem, 4vw, 2.75rem); }