/* ==========================================================================
   GoodJobSites — styles
   1. Themes (colours)      5. Page layout (header, sidebar, content panel)
   2. Glass settings        6. Link lists, tags, filter
   3. Theme hookup          7. Home page
   4. Background            8. Appearance menu
   The Appearance menu sets attributes on <html>:
     data-jd-mode  = light | dark | black
     data-jd-theme = catppuccin | ocean | sunset | forest | mono
     data-jd-glass = on | off       data-jd-motion = on | off
   ========================================================================== */

/* ---------- 0. Font: Atkinson Hyperlegible Next, bundled with the site -----
   Designed by the Braille Institute so letters are hard to confuse (I l 1, O 0),
   which helps people reading job listings on small or old phone screens.
   SIL Open Font License: see assets/fonts/AtkinsonHyperlegibleNext-LICENSE.txt. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Themes -------------------------------------------------------
   Variables: bg (page), bg-soft / bg-alt (surfaces), divider, text 1-3,
   brand / brand-2 (accent gradient), star, on-brand (text on accent),
   g1-g4 (background glow colours). */

/* Catppuccin (default). Free open-source colour palette (MIT licence). */
html {
  --jd-bg: #1e1e2e; --jd-bg-soft: #181825; --jd-bg-alt: #313244; --jd-divider: #313244;
  --jd-text: #cdd6f4; --jd-text-2: #a6adc8; --jd-text-3: #7f849c;
  --jd-brand: #b4befe; --jd-brand-2: #cba6f7; --jd-star: #f9e2af; --jd-on-brand: #11111b;
  --jd-g1: #cba6f7; --jd-g2: #89b4fa; --jd-g3: #f5c2e7; --jd-g4: #94e2d5;
}
html[data-jd-mode="light"] {
  --jd-bg: #eff1f5; --jd-bg-soft: #e6e9ef; --jd-bg-alt: #dce0e8; --jd-divider: #ccd0da;
  --jd-text: #4c4f69; --jd-text-2: #5c5f77; --jd-text-3: #8c8fa1;
  --jd-brand: #7287fd; --jd-brand-2: #8839ef; --jd-star: #df8e1d; --jd-on-brand: #ffffff;
  --jd-g1: #8839ef; --jd-g2: #1e66f5; --jd-g3: #ea76cb; --jd-g4: #179299;
}

/* Ocean */
html[data-jd-theme="ocean"] {
  --jd-bg: #0b1220; --jd-bg-soft: #0e1729; --jd-bg-alt: #1a2740; --jd-divider: #1e2d48;
  --jd-text: #e2e8f0; --jd-text-2: #94a3b8; --jd-text-3: #64748b;
  --jd-brand: #38bdf8; --jd-brand-2: #2dd4bf; --jd-star: #facc15; --jd-on-brand: #04121f;
  --jd-g1: #0ea5e9; --jd-g2: #14b8a6; --jd-g3: #6366f1; --jd-g4: #22d3ee;
}
html[data-jd-theme="ocean"][data-jd-mode="light"] {
  --jd-bg: #f0f7fc; --jd-bg-soft: #e4f0f8; --jd-bg-alt: #d5e6f2; --jd-divider: #c6dbea;
  --jd-text: #0f2a3d; --jd-text-2: #33536b; --jd-text-3: #6b8799;
  --jd-brand: #0284c7; --jd-brand-2: #0d9488; --jd-star: #ca8a04; --jd-on-brand: #ffffff;
  --jd-g1: #38bdf8; --jd-g2: #2dd4bf; --jd-g3: #818cf8; --jd-g4: #67e8f9;
}

/* Sunset */
html[data-jd-theme="sunset"] {
  --jd-bg: #1a1016; --jd-bg-soft: #22141c; --jd-bg-alt: #352230; --jd-divider: #3a2633;
  --jd-text: #fbe9e7; --jd-text-2: #d3b4b0; --jd-text-3: #9a7a78;
  --jd-brand: #fb923c; --jd-brand-2: #f472b6; --jd-star: #fde047; --jd-on-brand: #1a0d06;
  --jd-g1: #f97316; --jd-g2: #ec4899; --jd-g3: #a855f7; --jd-g4: #facc15;
}
html[data-jd-theme="sunset"][data-jd-mode="light"] {
  --jd-bg: #fff6f1; --jd-bg-soft: #ffece3; --jd-bg-alt: #fde0d3; --jd-divider: #f6d2c4;
  --jd-text: #43231c; --jd-text-2: #6e4238; --jd-text-3: #a07a70;
  --jd-brand: #ea580c; --jd-brand-2: #db2777; --jd-star: #ca8a04; --jd-on-brand: #ffffff;
  --jd-g1: #fb923c; --jd-g2: #f472b6; --jd-g3: #c084fc; --jd-g4: #fde047;
}

/* Forest */
html[data-jd-theme="forest"] {
  --jd-bg: #0c1511; --jd-bg-soft: #0f1c16; --jd-bg-alt: #1a2d23; --jd-divider: #1d3127;
  --jd-text: #e3f1e8; --jd-text-2: #9fbfac; --jd-text-3: #6b8a77;
  --jd-brand: #4ade80; --jd-brand-2: #a3e635; --jd-star: #fde047; --jd-on-brand: #04140a;
  --jd-g1: #22c55e; --jd-g2: #84cc16; --jd-g3: #14b8a6; --jd-g4: #eab308;
}
html[data-jd-theme="forest"][data-jd-mode="light"] {
  --jd-bg: #f2f9f4; --jd-bg-soft: #e6f3ea; --jd-bg-alt: #d5eadc; --jd-divider: #c5dfcd;
  --jd-text: #173324; --jd-text-2: #3c5c49; --jd-text-3: #6f8a7a;
  --jd-brand: #16a34a; --jd-brand-2: #65a30d; --jd-star: #ca8a04; --jd-on-brand: #ffffff;
  --jd-g1: #4ade80; --jd-g2: #a3e635; --jd-g3: #2dd4bf; --jd-g4: #facc15;
}

/* Mono */
html[data-jd-theme="mono"] {
  --jd-bg: #111111; --jd-bg-soft: #161616; --jd-bg-alt: #262626; --jd-divider: #2a2a2a;
  --jd-text: #ededed; --jd-text-2: #a3a3a3; --jd-text-3: #737373;
  --jd-brand: #fafafa; --jd-brand-2: #a3a3a3; --jd-star: #fafafa; --jd-on-brand: #0a0a0a;
  --jd-g1: #737373; --jd-g2: #525252; --jd-g3: #a3a3a3; --jd-g4: #404040;
}
html[data-jd-theme="mono"][data-jd-mode="light"] {
  --jd-bg: #fafafa; --jd-bg-soft: #f2f2f2; --jd-bg-alt: #e5e5e5; --jd-divider: #dedede;
  --jd-text: #171717; --jd-text-2: #404040; --jd-text-3: #737373;
  --jd-brand: #171717; --jd-brand-2: #525252; --jd-star: #171717; --jd-on-brand: #ffffff;
  --jd-g1: #a3a3a3; --jd-g2: #d4d4d4; --jd-g3: #737373; --jd-g4: #e5e5e5;
}

/* Black mode: pure black surfaces (great on OLED), keeps the theme's accent. */
html[data-jd-mode="black"] {
  --jd-bg: #000000; --jd-bg-soft: #0a0a0a; --jd-bg-alt: #161616; --jd-divider: #1c1c1c;
}

/* ---------- 2. Glass settings ---------------------------------------------- */
html {
  --jd-blur: blur(18px) saturate(170%);
  --jd-glass: rgba(255, 255, 255, 0.045);
  --jd-glass-strong: rgba(255, 255, 255, 0.075);
  --jd-glass-border: rgba(255, 255, 255, 0.10);
  --jd-glass-hi: rgba(255, 255, 255, 0.14);
  --jd-glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.45);
  --jd-glow-strength: 1;
}
html[data-jd-mode="light"] {
  --jd-glass: rgba(255, 255, 255, 0.42);
  --jd-glass-strong: rgba(255, 255, 255, 0.62);
  --jd-glass-border: rgba(255, 255, 255, 0.75);
  --jd-glass-hi: rgba(255, 255, 255, 0.95);
  --jd-glass-shadow: 0 10px 40px -12px rgba(30, 40, 90, 0.18);
}
html[data-jd-mode="black"] { --jd-glow-strength: 0.7; }
html[data-jd-glass="off"] {
  --jd-blur: none;
  --jd-glass: var(--jd-bg-soft);
  --jd-glass-strong: var(--jd-bg-alt);
  --jd-glass-border: var(--jd-divider);
  --jd-glass-hi: transparent;
}

/* ---------- 3. Theme hookup (maps our colours onto the site theme) --------- */
body[data-md-color-scheme] {
  --md-default-bg-color: var(--jd-bg);
  --md-default-fg-color: var(--jd-text);
  --md-default-fg-color--light: var(--jd-text-2);
  --md-default-fg-color--lighter: var(--jd-text-3);
  --md-default-fg-color--lightest: var(--jd-divider);
  --md-primary-fg-color: var(--jd-bg);
  --md-primary-fg-color--light: var(--jd-bg-soft);
  --md-primary-fg-color--dark: var(--jd-bg);
  --md-primary-bg-color: var(--jd-text);
  --md-primary-bg-color--light: var(--jd-text-2);
  --md-accent-fg-color: var(--jd-brand);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--jd-brand) 12%, transparent);
  --md-typeset-color: var(--jd-text);
  --md-typeset-a-color: var(--jd-brand);
  --md-code-bg-color: var(--jd-bg-soft);
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: var(--jd-text-2);
  --md-footer-fg-color--light: var(--jd-text-3);
  --md-footer-fg-color--lighter: var(--jd-text-3);
  background-color: transparent;   /* the page colour is on <html>, so the glow layers show */
  color: var(--jd-text);
  --jd-font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --md-text-font-family: var(--jd-font);
  font-family: var(--jd-font);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s;
}
html { background-color: var(--jd-bg); }

/* The base theme enlarges everything to 137-150% on wide screens, which looks
   zoomed in. Keep one comfortable size everywhere. */
html { font-size: 106.25%; }
@media screen and (min-width: 100em) { html { font-size: 106.25%; } }
@media screen and (min-width: 125em) { html { font-size: 112.5%; } }

/* ---------- 4. Background: glowing colour blobs + faint dot grid ----------- */
body::before, body::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
}
body::before {
  inset: -15%;
  background:
    radial-gradient(30% 28% at 15% 12%, color-mix(in srgb, var(--jd-g1) calc(55% * var(--jd-glow-strength)), transparent), transparent 70%),
    radial-gradient(28% 26% at 88% 10%, color-mix(in srgb, var(--jd-g2) calc(50% * var(--jd-glow-strength)), transparent), transparent 70%),
    radial-gradient(34% 30% at 75% 85%, color-mix(in srgb, var(--jd-g3) calc(40% * var(--jd-glow-strength)), transparent), transparent 70%),
    radial-gradient(26% 24% at 8% 78%,  color-mix(in srgb, var(--jd-g4) calc(35% * var(--jd-glow-strength)), transparent), transparent 70%),
    radial-gradient(20% 18% at 50% 45%, color-mix(in srgb, var(--jd-g1) calc(22% * var(--jd-glow-strength)), transparent), transparent 70%);
  animation: jd-aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--jd-text) 16%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
@keyframes jd-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-4%, 5%, 0) rotate(-5deg) scale(1.03); }
}
@keyframes jd-rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes jd-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes jd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

html[data-jd-motion="off"] *, html[data-jd-motion="off"] *::before, html[data-jd-motion="off"] *::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 5. Page layout -------------------------------------------------- */
.md-main, .md-content { background: transparent; }

/* The glass recipe, shared by every panel */
.md-header,
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-content__inner:not(:has(.jd-hero)),
.md-footer,
.jd-card, .jd-hero-search, .jd-badge, .jd-filter, .jd-appear-panel,
.md-search__inner {
  background: var(--jd-glass);
  -webkit-backdrop-filter: var(--jd-blur);
  backdrop-filter: var(--jd-blur);
  border: 1px solid var(--jd-glass-border);
  box-shadow: inset 0 1px 0 var(--jd-glass-hi), var(--jd-glass-shadow);
}

/* Top bar */
.md-header {
  position: sticky; z-index: 4;
  border-width: 0 0 1px;
  box-shadow: inset 0 -1px 0 transparent, 0 4px 30px -12px rgba(0, 0, 0, .25);
  color: var(--jd-text);
}
.md-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jd-brand-2), var(--jd-brand), transparent);
  opacity: .6;
}
.md-header__title { font-weight: 700; }
.md-search__form { background-color: var(--jd-glass-strong); border-radius: 10px; }
.md-search { z-index: 5; }

/* Sidebar as a floating glass card */
.md-sidebar--primary .md-sidebar__scrollwrap {
  border-radius: 18px;
  margin: 0 0.4rem;
  padding: 0.4rem 0;
}
.md-nav__item--section > .md-nav__link { color: var(--jd-text); font-weight: 700; text-transform: none; }
.md-nav__link { color: var(--jd-text-2); border-radius: 8px; }
.md-nav__link:hover { color: var(--jd-brand); }
.md-nav__link--active { color: var(--jd-brand) !important; font-weight: 600; }

/* Content as a glass panel (not on the home page) */
.md-content__inner:not(:has(.jd-hero)) {
  border-radius: 22px;
  padding: 1.6rem 2rem 2rem;
  margin-top: 1.2rem;
}
.md-content__inner:not(:has(.jd-hero))::before { display: none; }
.md-content__inner > * { animation: jd-rise .45s ease both; }

/* Footer */
.md-footer { border-width: 1px 0 0; box-shadow: none; }
.md-footer-meta { background: transparent; }
.md-copyright { color: var(--jd-text-3); font-size: 0.7rem; }

/* Search window */
.md-search__inner { border-radius: 16px; }
.md-search__output, .md-search__scrollwrap { background: transparent; }

/* ---------- 6. Text, link lists, tags, filter ------------------------------- */
.md-typeset { font-size: 0.82rem; }
.md-typeset h1 { color: var(--jd-text); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.4em; }
.md-content__inner > p:first-of-type { color: var(--jd-text-2); }
.md-typeset h2 {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--jd-text-3); margin: 2em 0 0.6em; padding: 0; border: 0;
}
.md-typeset a { text-decoration: none; font-weight: 600; transition: color .15s; }
.md-typeset a:hover { color: var(--jd-brand-2); }

.md-typeset.md-content__inner > ul { list-style: none; margin-left: 0; padding: 0; }
.md-typeset.md-content__inner > ul > li {
  margin: 0 0 4px -0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
.md-typeset.md-content__inner > ul > li:hover {
  background: var(--jd-glass-strong);
  border-color: var(--jd-glass-border);
  transform: translateX(2px);
}
.jd-favicon { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 0.5em; }
.jd-desc { color: var(--jd-text-2); margin-left: 0.4em; }
.jd-desc::before { content: "– "; color: var(--jd-text-3); }

.jd-star { font-size: 0.8em; margin-left: 0.15em; }
.md-typeset.md-content__inner > ul > li:has(.jd-star) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--jd-brand) 14%, transparent), transparent 75%);
  border-color: color-mix(in srgb, var(--jd-brand) 28%, transparent);
  box-shadow: inset 3px 0 0 var(--jd-brand);
}

.jd-tag {
  display: inline-block; font-size: 0.66em; font-weight: 500; line-height: 1.7;
  padding: 0 0.65em; margin-left: 0.3em; border-radius: 999px;
  background: color-mix(in srgb, var(--jd-text) 8%, transparent);
  color: var(--jd-text-2); cursor: pointer; user-select: none; vertical-align: 1px;
  transition: background .15s, color .15s;
}
.jd-tag:hover { background: color-mix(in srgb, var(--jd-brand) 20%, transparent); color: var(--jd-brand); }
.jd-tag.is-on { background: var(--jd-brand); color: var(--jd-on-brand); }
.jd-verified { font-size: 0.66em; margin-left: 0.5em; color: var(--jd-text-3); white-space: nowrap; }
.jd-note { font-size: 0.8em; color: var(--jd-text-3); padding-left: 1.6rem; }

.jd-filter {
  position: sticky; top: 3.4rem; z-index: 2;
  margin: 1rem 0 0.6rem; padding: 0.6rem 0.8rem; border-radius: 14px;
  color: var(--jd-text-3); font-size: 0.75rem;
}
.jd-filter:empty { display: none; }
.jd-filter .jd-tag { font-size: 0.72rem; padding: 0.15em 0.8em; margin: 0 0.35em 0.35em 0; }
.jd-filter .jd-clear { font-size: 0.72rem; margin-left: 0.3em; cursor: pointer; color: var(--jd-brand); font-weight: 600; }
.jd-hidden { display: none !important; }

.md-typeset .admonition, .md-typeset details {
  border-radius: 14px; border-width: 1px; font-size: 0.8rem;
  background: var(--jd-glass-strong);
}

/* ---------- 7. Home page ---------------------------------------------------- */
.jd-hero { position: relative; text-align: center; padding: 3.5rem 0 2.5rem; isolation: isolate; }
.jd-glow {
  position: absolute; z-index: -1; inset: -2rem 12% auto; height: 22rem;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--jd-brand-2) 40%, transparent), transparent),
    radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--jd-brand) 35%, transparent), transparent);
  filter: blur(40px); opacity: .9; pointer-events: none;
}
.jd-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.72rem; font-weight: 600; padding: 0.4em 1em; border-radius: 999px;
  color: var(--jd-text-2); margin-bottom: 1.4rem;
}
.jd-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: jd-pulse 2s infinite; }
.md-typeset .jd-hero-name {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.04em; margin: 0 0 0.25em; color: var(--jd-text);
}
.jd-grad {
  background: linear-gradient(90deg, var(--jd-brand), var(--jd-brand-2), var(--jd-g3), var(--jd-brand));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: jd-shift 8s ease infinite;
}
.jd-hero-text { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; color: var(--jd-text); margin: 0; }
.jd-hero-tagline { font-size: 1rem; color: var(--jd-text-2); margin: 0.7em auto 1.8em; max-width: 34rem; }
.jd-hero-text, .jd-hero-tagline, .md-typeset .jd-card p { text-wrap: balance; }

.jd-hero-search {
  display: flex; align-items: center; gap: 0.7rem;
  width: min(100%, 30rem); margin: 0 auto 1.4rem; padding: 0.9rem 1.1rem;
  border-radius: 16px; color: var(--jd-text-3);
  font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.jd-hero-search:hover { border-color: var(--jd-brand); box-shadow: inset 0 1px 0 var(--jd-glass-hi), 0 10px 40px -10px color-mix(in srgb, var(--jd-brand) 50%, transparent); }
.jd-hero-search span { flex: 1; text-align: left; }
.jd-hero-search kbd { font: inherit; font-size: 0.7rem; padding: 0.15em 0.5em; border-radius: 6px; border: 1px solid var(--jd-glass-border); color: var(--jd-text-3); }

.jd-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.md-typeset .jd-btn {
  display: inline-block; padding: 0.6em 1.4em; border-radius: 999px;
  font-weight: 600; font-size: 0.82rem;
  border: 1px solid var(--jd-glass-border); background: var(--jd-glass);
  -webkit-backdrop-filter: var(--jd-blur); backdrop-filter: var(--jd-blur);
  color: var(--jd-text); transition: transform .15s, box-shadow .2s;
}
.md-typeset .jd-btn:hover { transform: translateY(-1px); color: var(--jd-text); }
.md-typeset .jd-btn-brand {
  background: linear-gradient(135deg, var(--jd-brand), var(--jd-brand-2));
  border-color: transparent; color: var(--jd-on-brand);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--jd-brand-2) 70%, transparent);
}
.md-typeset .jd-btn-brand:hover { color: var(--jd-on-brand); box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--jd-brand-2) 80%, transparent); }

.jd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.md-typeset .jd-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.4rem; border-radius: 18px; color: var(--jd-text);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.md-typeset .jd-card:hover {
  transform: translateY(-4px); color: var(--jd-text);
  border-color: color-mix(in srgb, var(--jd-brand) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--jd-glass-hi), 0 18px 40px -16px color-mix(in srgb, var(--jd-brand-2) 60%, transparent);
}
.jd-card-icon {
  font-size: 1.4rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border-radius: 12px; margin-bottom: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--jd-brand) 25%, transparent), color-mix(in srgb, var(--jd-brand-2) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--jd-brand) 30%, transparent);
}
.md-typeset .jd-card h3 { margin: 0 0 0.35em; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--jd-text); }
.md-typeset .jd-card p { margin: 0 0 1em; font-size: 0.78rem; line-height: 1.55; color: var(--jd-text-2); flex-grow: 1; }
.jd-card-count { font-size: 0.75rem; font-weight: 700; color: var(--jd-brand); }
.jd-legend { text-align: center; font-size: 0.75rem; color: var(--jd-text-3); margin-bottom: 2rem; }

/* ---------- 8. Appearance menu --------------------------------------------- */
.jd-appear-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0 0.6rem; padding: 0.35rem 0.75rem !important;
  border-radius: 10px; border: 1px solid var(--jd-glass-border);
  background: var(--jd-glass-strong); color: var(--jd-text);
  font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.jd-appear-btn:hover, .jd-appear-btn[aria-expanded="true"] { border-color: var(--jd-brand); color: var(--jd-brand); }
.jd-appear-btn svg { flex: none; }
@media (max-width: 600px) { .jd-appear-btn span { display: none; } }

.jd-appear-panel {
  position: fixed; z-index: 10; width: 300px; padding: 1rem;
  border-radius: 18px; color: var(--jd-text); font-size: 0.75rem;
  background: color-mix(in srgb, var(--jd-bg) 70%, transparent);
  animation: jd-rise .18s ease both;
}
.jd-appear-panel[hidden] { display: none; }
.jd-appear-section + .jd-appear-section { margin-top: 1rem; }
.jd-appear-title { font-size: 0.65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jd-text-3); margin-bottom: 0.5rem; }

.jd-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--jd-glass); border: 1px solid var(--jd-glass-border); }
.jd-seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.45rem 0; border: 0; border-radius: 9px; background: transparent;
  color: var(--jd-text-2); font: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer;
}
.jd-seg-icon { font-size: 0.95rem; }
.jd-seg-btn:hover { color: var(--jd-text); }
.jd-seg-btn.is-on { background: var(--jd-glass-strong); color: var(--jd-text); box-shadow: inset 0 1px 0 var(--jd-glass-hi), 0 0 0 1px var(--jd-brand); }

.jd-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jd-theme {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem;
  border-radius: 10px; border: 1px solid var(--jd-glass-border); background: var(--jd-glass);
  color: var(--jd-text-2); font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; text-align: left;
}
.jd-theme:hover { color: var(--jd-text); }
.jd-theme.is-on { color: var(--jd-text); border-color: var(--jd-brand); box-shadow: 0 0 0 1px var(--jd-brand); }
.jd-theme-swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

.jd-switch { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; cursor: pointer; position: relative; }
.jd-switch-text { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.jd-switch-text small { font-weight: 400; color: var(--jd-text-3); font-size: 0.66rem; }
.jd-switch input { position: absolute; opacity: 0; pointer-events: none; }
.jd-switch-ui { width: 34px; height: 20px; border-radius: 999px; background: var(--jd-bg-alt); position: relative; transition: background .2s; flex: none; }
.jd-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.jd-switch input:checked + .jd-switch-ui { background: linear-gradient(135deg, var(--jd-brand), var(--jd-brand-2)); }
.jd-switch input:checked + .jd-switch-ui::after { transform: translateX(14px); }
.jd-switch input:focus-visible + .jd-switch-ui { outline: 2px solid var(--jd-brand); outline-offset: 2px; }

.jd-appear-reset {
  width: 100%; margin-top: 0.8rem; padding: 0.5rem; border-radius: 10px;
  border: 1px dashed var(--jd-glass-border); background: transparent;
  color: var(--jd-text-3); font: inherit; font-size: 0.7rem; cursor: pointer;
}
.jd-appear-reset:hover { color: var(--jd-text); border-color: var(--jd-text-3); }
.jd-appear-btn { line-height: 1; height: 2rem; align-self: center; }
.jd-appear-btn svg { display: block; }
.jd-appear-btn span { display: inline-block; line-height: 1; }
@media (max-width: 600px) { .jd-appear-btn span { display: none; } .jd-appear-panel { width: calc(100vw - 16px); } }
.md-header__button.jd-appear-btn { display: inline-flex !important; flex-direction: row; width: auto; white-space: nowrap; }

/* Phones and tablets: the sidebar becomes a slide-out menu. Make it solid so it
   reads clearly above the dimmed page. */
@media screen and (max-width: 76.2344em) {
  .md-sidebar--primary { background: var(--jd-bg-soft); }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; box-shadow: none; margin: 0; border-radius: 0;
  }
  .md-nav--primary .md-nav__title { background: var(--jd-bg-soft); color: var(--jd-text); }
  .md-content__inner:not(:has(.jd-hero)) { padding: 1.2rem 1rem 1.4rem; border-radius: 18px; }
}

/* "also in Finance, Tech" note on sites listed in several categories */
.jd-also { font-size: 0.66em; margin-left: 0.5em; color: var(--jd-text-3); font-style: italic; white-space: nowrap; }

/* ---------- Multi-field sites ---------------------------------------------- */
/* "Good for: Finance, Tech" line under a site that covers several fields */
.jd-goodfor { font-size: 0.72em; color: var(--jd-text-3); padding-left: 1.6rem; }

/* "Also good for <field>" strip at the top of field pages */
.jd-strip {
  margin: 1.2rem 0 0.4rem;
  padding: 0.9rem 1rem 0.7rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--jd-brand) 7%, var(--jd-glass));
  border: 1px solid color-mix(in srgb, var(--jd-brand) 22%, var(--jd-glass-border));
}
.jd-strip--empty { padding: 0.5rem 1rem; }
.jd-strip-title {
  font-size: 0.66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jd-text-3); margin-bottom: 0.6rem;
}
.jd-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.md-typeset a.jd-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--jd-glass-strong);
  border: 1px solid var(--jd-glass-border);
  color: var(--jd-text); font-size: 0.75rem; font-weight: 600;
  transition: border-color .15s, transform .15s;
}
.md-typeset a.jd-chip:hover { border-color: var(--jd-brand); color: var(--jd-text); transform: translateY(-1px); }
.jd-chip .jd-favicon { margin: 0; }
.jd-chip small { font-weight: 500; color: var(--jd-text-3); font-size: 0.85em; }
.jd-chip small { margin-left: 0.15em; }
.md-typeset .jd-strip-foot { margin: 0.6rem 0 0; font-size: 0.7rem; color: var(--jd-text-3); }
.md-typeset .jd-strip--empty .jd-strip-foot { margin: 0; }

/* Home page group headings: "Browse by field" / "Browse by type" */
.jd-group-title { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin: 2rem 0 0; }
.jd-group-title span { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jd-text); }
.jd-group-title small { font-size: 0.75rem; color: var(--jd-text-3); }
.jd-group-title + .jd-grid { margin-top: 0.9rem; }
.jd-card-count em { font-style: normal; font-weight: 500; color: var(--jd-text-3); }


/* ==========================================================================
   9. Typography — sizes and weights:
   body 16px / line-height 1.7, headings weight 600-700, links 500,
   sidebar 14px. One consistent weight scale: 400 text, 500 UI/links,
   600 names and headings, 700 page titles, 800 only for the big home title.
   (The page's base size is 17px, so 0.941rem = 16px.)
   ========================================================================== */
body[data-md-color-scheme], button, input, kbd { font-family: var(--jd-font); }
.md-typeset { font-size: 0.941rem; line-height: 1.7; }
.md-typeset strong, .md-typeset b { font-weight: 600; }
.md-typeset a { font-weight: 500; }
.md-typeset li strong a, .md-typeset strong a { font-weight: inherit; }   /* site names: 600 */

.md-typeset h1 { font-size: 2em; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.5em; }
.md-content__inner > p:first-of-type { font-size: 1em; }
.md-typeset h2 {
  font-size: 1.3em; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  text-transform: none; color: var(--jd-text);
  margin: 1.8em 0 0.6em; padding-top: 1.1em; border-top: 1px solid var(--jd-divider);
}
.jd-desc { font-weight: 400; }
.jd-tag { font-size: 0.72rem; }
.jd-verified { font-size: 0.72rem; }
.jd-goodfor { font-size: 0.78rem; }
.jd-note { font-size: 0.82rem; }
.jd-filter { font-size: 0.82rem; }
.jd-filter .jd-tag { font-size: 0.78rem; }
.jd-filter .jd-clear { font-size: 0.78rem; }
.md-typeset .admonition, .md-typeset details { font-size: 0.88rem; }

/* Sidebar: 14px */
.md-nav { font-size: 0.82rem; line-height: 1.5; }
.md-nav__link { font-weight: 500; }
.md-nav__item--section > .md-nav__link { font-weight: 700; font-size: 0.82rem; }

.md-header__title { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; }
.md-copyright { font-size: 0.76rem; }

/* Home page */
.md-typeset .jd-hero-name { font-weight: 800; letter-spacing: -0.035em; }
.jd-hero-text { font-weight: 700; }
.jd-hero-tagline { font-size: 1.06rem; font-weight: 400; }
.jd-hero-search { font-size: 0.88rem; }
.md-typeset .jd-btn { font-size: 0.85rem; font-weight: 600; }
.jd-group-title span { font-weight: 700; }
.jd-group-title small { font-size: 0.8rem; }
.md-typeset .jd-card { font-weight: 400; }                 /* was inheriting link weight */
.md-typeset .jd-card h3 { font-size: 1.06rem; font-weight: 600; }
.md-typeset .jd-card p { font-size: 0.85rem; font-weight: 400; line-height: 1.55; }
.jd-card-count { font-size: 0.8rem; font-weight: 600; }
.jd-legend { font-size: 0.8rem; }

/* "Also good for" strip */
.md-typeset a.jd-chip { font-size: 0.8rem; font-weight: 600; }
.jd-chip small { font-weight: 400; }
.md-typeset .jd-strip-foot { font-size: 0.78rem; }

/* Appearance button and menu */
.jd-appear-btn { font-size: 0.78rem; font-weight: 600; }
.jd-appear-panel { font-size: 0.8rem; }

/* Wider sidebar (~270px) so 14px category names fit on one line */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { width: 15.5rem; }
  .md-sidebar--primary .md-sidebar__scrollwrap { width: auto; }
  .md-sidebar--primary .md-sidebar__inner { padding-right: 0.5rem; }   /* theme default ~52px of empty space */
}

/* "Good for" and tip lines sit on their own line, indented under the site name */
.jd-goodfor, .jd-note { display: block; padding-left: 1.75rem; margin-top: 0.1rem; line-height: 1.5; }

/* ==========================================================================
   10. Phones & tablets
   ========================================================================== */

/* The slide-out menu: show every page in ONE scrolling list,
   instead of the theme's fold-out sub-panels that hide pages behind arrows. */
@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav[data-md-level="1"] {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;            /* theme collapses groups to 0 height with a grid trick */
    grid-template-rows: none !important;
  }
  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list {
    height: auto !important; max-height: none !important; overflow: visible !important; display: block !important;
  }
  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__title { display: none !important; }
  .md-nav--primary .md-nav__item--nested > .md-nav__link {
    pointer-events: none;
    margin-top: 0.9rem;
    font-size: 0.7rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jd-text-3) !important;
  }
  .md-nav--primary .md-nav__item--nested > .md-nav__link .md-nav__icon { display: none !important; }
  .md-nav--primary > .md-nav__list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2rem; }
  .md-nav--primary .md-nav__list .md-nav__list { padding: 0; }
  /* comfortable 44px tap rows */
  .md-nav--primary a.md-nav__link {
    min-height: 44px; display: flex; align-items: center;
    margin: 0 0.4rem; padding: 0 0.7rem; border-radius: 10px;
    font-size: 0.9rem; color: var(--jd-text);
  }
  .md-nav--primary a.md-nav__link--active { background: var(--jd-glass-strong); }
  .md-nav--primary .md-nav__title { font-size: 0.95rem; font-weight: 700; color: var(--jd-text); }
}

/* Tap anywhere on a site's row to open it (tags keep working as filters). */
.md-typeset.md-content__inner > ul > li { position: relative; }
.md-typeset.md-content__inner > ul > li strong a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.md-typeset.md-content__inner > ul > li .jd-tag { position: relative; z-index: 1; }

/* Touch screens: bigger targets, no keyboard hints, no hover-only effects. */
@media (pointer: coarse) {
  .jd-hero-search kbd { display: none; }
  .md-search__button kbd, .md-search kbd { display: none; }
  .jd-filter .jd-tag { padding: 0.45em 0.95em; margin: 0 0.4em 0.45em 0; }
  .jd-tag { padding: 0.15em 0.75em; }
  .md-typeset a.jd-chip { padding: 0.5rem 0.9rem 0.5rem 0.65rem; }
  .md-typeset.md-content__inner > ul > li:hover { transform: none; }
  .md-header__button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .jd-seg-btn, .jd-theme { min-height: 44px; }
}

/* Small phones */
@media screen and (max-width: 30em) {
  .jd-hero { padding: 2rem 0 1.5rem; }
  .md-typeset .jd-hero-name { font-size: 2.3rem; }
  .jd-hero-text { font-size: 1.25rem; }
  .jd-hero-tagline { font-size: 0.95rem; }
  .jd-group-title small { display: block; width: 100%; }
  .md-typeset h1 { font-size: 1.7em; }
  .jd-strip { padding: 0.8rem 0.8rem 0.6rem; }
  .jd-goodfor, .jd-note { padding-left: 0; }
  .md-typeset.md-content__inner > ul > li { margin-left: -0.4rem; padding: 0.65rem 0.6rem; }
  .jd-appear-panel { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* Wider slide-out menu on phones/tablets so names fit on one line
   (theme default is ~205px). Width, start position and slide distance must match. */
@media screen and (max-width: 76.2344em) {
  .md-sidebar--primary { width: 16.5rem; left: -16.9rem !important; }
  [data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary { transform: translateX(16.9rem); }
  .md-nav--primary .md-nav__list .md-nav__item { padding: 0; }
}

/* ==========================================================================
   11. Safety: screening badge, page disclaimer, Scam Check tools
   ========================================================================== */
.jd-shield {
  display: inline-block; margin-left: 0.35em; padding: 0 0.6em; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.7; vertical-align: 1px; white-space: nowrap;
  color: #16a34a; background: color-mix(in srgb, #22c55e 14%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}
html:not([data-jd-mode="light"]) .jd-shield { color: #86efac; }

.md-typeset p.jd-disclaimer {
  margin-top: 1.6rem; padding-top: 0.9rem; border-top: 1px solid var(--jd-divider);
  font-size: 0.8rem; color: var(--jd-text-3); line-height: 1.6;
}

.jd-tool {
  margin: 0.8rem 0 1.2rem; padding: 1rem; border-radius: 16px;
  background: var(--jd-glass); border: 1px solid var(--jd-glass-border);
  box-shadow: inset 0 1px 0 var(--jd-glass-hi);
}
.jd-tool-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.jd-input {
  flex: 1 1 16rem; min-width: 0; min-height: 44px; padding: 0 0.9rem;
  border-radius: 12px; border: 1px solid var(--jd-glass-border);
  background: var(--jd-glass-strong); color: var(--jd-text); font: inherit; font-size: 0.9rem;
}
.jd-input:focus { outline: 2px solid var(--jd-brand); outline-offset: 1px; }
.jd-tool-btn {
  min-height: 44px; padding: 0 1.3rem; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--jd-on-brand);
  background: linear-gradient(135deg, var(--jd-brand), var(--jd-brand-2));
}
.jd-result:empty { display: none; }
.jd-result {
  display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.9rem;
  padding: 0.8rem 0.95rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.55;
  border: 1px solid var(--jd-glass-border); background: var(--jd-glass-strong);
}
.jd-result strong { font-weight: 600; }
.jd-result span { color: var(--jd-text-2); }
.jd-result.is-good, .jd-result.is-ok { border-color: color-mix(in srgb, #22c55e 45%, transparent); background: color-mix(in srgb, #22c55e 10%, var(--jd-glass)); }
.jd-result.is-warn { border-color: color-mix(in srgb, #eab308 50%, transparent); background: color-mix(in srgb, #eab308 10%, var(--jd-glass)); }
.jd-result.is-bad  { border-color: color-mix(in srgb, #ef4444 55%, transparent); background: color-mix(in srgb, #ef4444 12%, var(--jd-glass)); }

.jd-flags { display: grid; gap: 0.4rem; }
.jd-flag {
  display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid transparent;
  font-size: 0.88rem; line-height: 1.45; color: var(--jd-text);
  transition: background .15s, border-color .15s;
}
.jd-flag:hover { background: var(--jd-glass-strong); }
.jd-flag.is-on { background: color-mix(in srgb, #ef4444 10%, transparent); border-color: color-mix(in srgb, #ef4444 35%, transparent); }
.jd-flag input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex: none; accent-color: var(--jd-brand); }

.md-typeset ul.jd-report { list-style: none; margin-left: 0; padding: 0; }
.md-typeset ul.jd-report li { margin: 0 0 0.4rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--jd-glass); border: 1px solid var(--jd-glass-border); }
.md-typeset ul.jd-report li strong { color: var(--jd-text-2); font-weight: 600; }
/* The tool lists are not site rows: undo the row styles there */
.md-typeset.md-content__inner > ul.jd-report > li strong a::after { content: none; }
@media screen and (max-width: 30em) { .jd-tool-btn { flex: 1 1 100%; } }


@media screen and (max-width: 76.2344em) {
  .md-nav--primary > .md-nav__list { padding-bottom: 3rem; }
}

/* ==========================================================================
   12. Desktop sidebar: compact, sized to its content, never under the footer
   ========================================================================== */
@media screen and (min-width: 76.25em) {
  /* The theme measures the space above the footer and sets this box's height to
     exactly that. Count our padding and border INSIDE that height (border-box), and
     add no outer margin, so the card can never grow past it and under the footer. */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    box-sizing: border-box;
    margin: 0 0.4rem !important;
    padding: 0.35rem 0 !important;
    scrollbar-width: thin;
    scrollbar-color: var(--jd-text-3) transparent;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { background: var(--jd-text-3); border-radius: 3px; }
  .md-sidebar--primary .md-sidebar__inner { padding-bottom: 0.4rem !important; }

  /* Compact rows in the sidebar */
  .md-sidebar--primary .md-nav__item { padding: 0; }
  .md-sidebar--primary .md-nav__link { margin: 0 0.4rem; padding: 0.2rem 0.6rem; line-height: 1.3; }
  .md-sidebar--primary .md-nav__item--section { margin-top: 0.45rem; }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link { margin-bottom: 0.1rem; padding-top: 0.2rem; }
  .md-sidebar--primary .md-nav__item--section > .md-nav > .md-nav__list { margin: 0; }
}

/* "Scam Check" button in the top bar */
.jd-scam-btn { text-decoration: none; }
.md-header .jd-scam-btn:hover { color: var(--jd-brand); }

/* ==========================================================================
   13. Remote by country
   ========================================================================== */
.jd-world {
  display: inline-block; margin-left: 0.35em; padding: 0 0.6em; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.7; vertical-align: 1px; white-space: nowrap;
  color: var(--jd-brand); background: color-mix(in srgb, var(--jd-brand) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--jd-brand) 30%, transparent);
}
.jd-country-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.md-typeset a.jd-chip--country, a.jd-chip--country {
  display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
  padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  color: var(--jd-text); background: var(--jd-glass); border: 1px solid var(--jd-glass-border);
  -webkit-backdrop-filter: var(--jd-blur); backdrop-filter: var(--jd-blur);
  box-shadow: inset 0 1px 0 var(--jd-glass-hi);
  transition: border-color .15s, transform .15s;
}
.md-typeset a.jd-chip--country:hover, a.jd-chip--country:hover { border-color: var(--jd-brand); transform: translateY(-1px); color: var(--jd-text); }
.jd-grid--countries { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 1rem; }
.md-typeset .jd-card--country { padding: 1rem 1.1rem; }
.md-typeset .jd-card--country .jd-card-icon { width: 2.4rem; height: 2.4rem; margin-bottom: 0.6rem; }
.md-typeset .jd-card--country h3 { margin-bottom: 0.5rem; }
@media screen and (max-width: 30em) {
  .md-typeset a.jd-chip--country, a.jd-chip--country { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
  .jd-grid--countries { grid-template-columns: 1fr 1fr; }
}

/* Keep the sidebar short: don't list the current page's ▷ sections inside it */
.md-nav--primary .md-nav--secondary { display: none !important; }

/* Filter bar: solid (not see-through), sticks to the top only on large screens,
   and long tag lists are collapsed behind "+N more". */
.jd-filter {
  position: static;
  background: color-mix(in srgb, var(--jd-bg-soft) 96%, transparent) !important;
}
@media screen and (min-width: 60em) { .jd-filter { position: sticky; } }
.jd-filter.is-collapsed .jd-extra { display: none; }
.jd-filter .jd-extra.is-on { display: inline-block !important; }   /* keep a chosen tag visible */
.jd-more {
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  margin: 0 0.35em 0.35em 0; padding: 0.15em 0.8em; border-radius: 999px;
  color: var(--jd-brand); background: transparent;
  border: 1px dashed color-mix(in srgb, var(--jd-brand) 50%, transparent);
}
/* Home: the visitor's region (guessed from time zone) */
.md-typeset a.jd-chip--country.is-you, a.jd-chip--country.is-you {
  border-color: var(--jd-brand); box-shadow: 0 0 0 1px var(--jd-brand), inset 0 1px 0 var(--jd-glass-hi);
}
.md-typeset h3 { font-size: 1em; font-weight: 600; color: var(--jd-text-2); margin: 1.2em 0 0.4em; }

/* Footer: copyright centred */
.md-footer-meta__inner { justify-content: center !important; }
.md-copyright { margin: 0 auto !important; width: 100%; text-align: center; }

/* Home legend: explanation only, nothing here looks clickable */
.jd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.jd-legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.jd-sample {
  display: inline-block; font-size: 0.68rem; line-height: 1.7; padding: 0 0.6em; border-radius: 4px;
  color: var(--jd-text-2); border: 1px dashed var(--jd-divider); cursor: default; user-select: none;
}
.jd-sample--check { border: 0; padding: 0; color: var(--jd-text-3); }
.jd-legend .jd-sample, .jd-legend .jd-star { flex: none; }
@media screen and (max-width: 30em) { .jd-legend { flex-direction: column; align-items: center; } }
.jd-filter + .jd-strip { margin-top: 0.4rem; }
.md-typeset .jd-empty { margin: 1rem 0; padding: 0.8rem 1rem; border-radius: 12px; border: 1px dashed var(--jd-divider); color: var(--jd-text-3); font-size: 0.88rem; }

/* ==========================================================================
   14. Click feel: press, ripple, tag pop, smooth theme change
   ========================================================================== */
/* Press: things dip slightly while held down, like a real button */
.md-typeset .jd-card, .md-typeset .jd-btn, .md-typeset a.jd-chip, .jd-tool-btn, .jd-hero-search,
.jd-seg-btn, .jd-theme, .jd-appear-btn, .jd-more, .jd-tag, .md-nav__link,
.md-typeset.md-content__inner > ul > li {
  transition: transform .14s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s, box-shadow .2s, color .15s;
}
.md-typeset .jd-card:active { transform: translateY(-1px) scale(.985); }
.md-typeset .jd-btn:active, .jd-tool-btn:active, .jd-hero-search:active,
.jd-appear-btn:active, .jd-more:active { transform: scale(.95); }
.md-typeset a.jd-chip:active, .jd-seg-btn:active, .jd-theme:active { transform: scale(.94); }
.md-nav__link:active { transform: scale(.97); }
.md-typeset.md-content__inner > ul > li:active { transform: scale(.992); }
.jd-tag:active { transform: scale(.88); }

/* Ripple from the click point */
.jd-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.jd-ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--jd-brand) 55%, transparent) 0%, color-mix(in srgb, var(--jd-brand) 25%, transparent) 35%, transparent 62%);
  transform: scale(0); opacity: 1;
  animation: jd-ripple .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes jd-ripple { to { transform: scale(1); opacity: 0; } }

/* Tag pop when it becomes selected */
.jd-tag.is-on { animation: jd-pop .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes jd-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Smooth crossfade when switching theme / light-dark (browsers with View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Switches slide smoothly */
.jd-switch-ui, .jd-switch-ui::after { transition: background .25s, transform .25s cubic-bezier(.3,1.4,.5,1); }

html[data-jd-motion="off"] .jd-ripple { display: none; }
@media (prefers-reduced-motion: reduce) { .jd-ripple { display: none; } }

/* Sidebar: thin divider between Home and the groups (Home stays a normal link) */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:first-child {
    padding-bottom: 0.35rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--jd-divider);
  }
}

/* ==========================================================================
   15. Performance: frosted blur only on the big panels
   Many small blurred items (cards, chips, buttons) are slow on cheap phones.
   They keep their see-through colour; only the large panels blur what's behind.
   ========================================================================== */
.jd-card, .jd-hero-search, .jd-badge, .jd-filter, .md-typeset .jd-btn,
.md-typeset a.jd-chip--country, a.jd-chip--country, .md-footer,
.md-content__inner, .md-sidebar--primary .md-sidebar__scrollwrap, .jd-strip, .jd-tool {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html { --jd-blur: blur(14px) saturate(160%); }
html[data-jd-glass="off"] { --jd-blur: none; }
/* Cards without blur need a touch more body to stay readable over the glow */
.md-typeset .jd-card { background: color-mix(in srgb, var(--jd-bg-soft) 72%, transparent); }
html[data-jd-mode="light"] .md-typeset .jd-card { background: color-mix(in srgb, #ffffff 62%, transparent); }
/* Big panels without blur: slightly more solid so text stays crisp over the glow */
.md-content__inner:not(:has(.jd-hero)) { background: color-mix(in srgb, var(--jd-bg-soft) 70%, transparent); }
html[data-jd-mode="light"] .md-content__inner:not(:has(.jd-hero)) { background: color-mix(in srgb, #ffffff 60%, transparent); }
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap { background: color-mix(in srgb, var(--jd-bg-soft) 70%, transparent); }
  html[data-jd-mode="light"] .md-sidebar--primary .md-sidebar__scrollwrap { background: color-mix(in srgb, #ffffff 60%, transparent); }
}
html[data-jd-glass="off"] .md-content__inner:not(:has(.jd-hero)),
html[data-jd-glass="off"] .md-sidebar--primary .md-sidebar__scrollwrap,
html[data-jd-glass="off"] .md-typeset .jd-card { background: var(--jd-bg-soft); }

/* About · Privacy links in the footer */
.jd-footlinks a { color: inherit; text-decoration: none; }
.jd-footlinks a:hover { color: var(--jd-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   16. Accessibility: readable contrast (WCAG AA) for hints, labels and links
   Slightly stronger secondary text and, in light mode, deeper link colours.
   ========================================================================== */
html                                              { --jd-text-3: #9399b2; }
html[data-jd-mode="light"]                        { --jd-text-3: #5c5f77; --jd-brand: #4652c7; --jd-brand-2: #7a2fd6; }
html[data-jd-theme="ocean"]                       { --jd-text-3: #8d9db3; }
html[data-jd-theme="ocean"][data-jd-mode="light"] { --jd-text-3: #46606f; --jd-brand: #036196; --jd-brand-2: #0b7a71; }
html[data-jd-theme="sunset"]                      { --jd-text-3: #b8a09d; }
html[data-jd-theme="sunset"][data-jd-mode="light"]{ --jd-text-3: #7a5249; --jd-brand: #b23c0a; --jd-brand-2: #b11f62; }
html[data-jd-theme="forest"]                      { --jd-text-3: #8faa9a; }
html[data-jd-theme="forest"][data-jd-mode="light"]{ --jd-text-3: #4a6656; --jd-brand: #13703a; --jd-brand-2: #4d7c0f; }
html[data-jd-theme="mono"]                        { --jd-text-3: #9a9a9a; }
html[data-jd-theme="mono"][data-jd-mode="light"]  { --jd-text-3: #575757; }
/* Small grey labels inside chips use full secondary colour (not faded) */
.jd-chip small { color: var(--jd-text-2) !important; opacity: 1; }
.jd-group-title small { color: var(--jd-text-2); opacity: 1; }
html[data-jd-mode="light"] .jd-shield { color: #166534; }
html[data-jd-theme="ocean"]:not([data-jd-mode="light"]) { --jd-text-2: #aab7c9; }
html[data-jd-theme="mono"]:not([data-jd-mode="light"])  { --jd-text-2: #b8b8b8; }

/* Keyboard users: a clear ring around whatever has focus (mouse clicks don't show it) */
a:focus-visible, button:focus-visible, .jd-tag:focus-visible, input:focus-visible, label:focus-visible {
  outline: 2px solid var(--jd-brand) !important; outline-offset: 2px; border-radius: 6px;
}

/* ==========================================================================
   17. Find my job sites
   ========================================================================== */
.jd-match { display: grid; gap: 0.75rem; }
.jd-match-label { font-weight: 600; font-size: 0.9rem; color: var(--jd-text); }
.jd-match-label.jd-inline { margin-right: 0.2rem; }
.jd-match-text {
  width: 100%; min-height: 11rem; resize: vertical; padding: 0.8rem 0.9rem; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--jd-glass-border); background: var(--jd-glass-strong);
  color: var(--jd-text); font: inherit; font-size: 0.88rem; line-height: 1.55;
}
.jd-match-text:focus, .jd-select:focus { outline: 2px solid var(--jd-brand); outline-offset: 1px; }
.jd-match-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.jd-select { flex: 0 1 18rem; min-height: 44px; cursor: pointer; }
.jd-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jd-file:focus-visible + .jd-match-status, .jd-upload:focus-within { outline: 2px solid var(--jd-brand); }
.md-typeset label.jd-upload, label.jd-upload { cursor: pointer; margin: 0; }
.jd-match-status { font-size: 0.82rem; color: var(--jd-text-2); }
.jd-match-status.is-bad { color: #dc2626; }
html:not([data-jd-mode="light"]) .jd-match-status.is-bad { color: #fca5a5; }
.jd-match-opts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.88rem; }
.jd-match-opts label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; cursor: pointer; }
.jd-match-opts input { width: 1.1rem; height: 1.1rem; accent-color: var(--jd-brand); }
.md-typeset button.jd-btn, button.jd-btn { cursor: pointer; font: inherit; }
.md-typeset .jd-match-privacy, .jd-match-privacy { margin: 0; font-size: 0.8rem; color: var(--jd-text-2); line-height: 1.5; }

.md-typeset .jd-match-h { margin: 0 0 0.6rem; font-size: 1.05rem; }
.jd-match-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.md-typeset .jd-match-picked { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--jd-text-2); }
.jd-match-k { display: inline-block; min-width: 4.6rem; margin-right: 0.3rem; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--jd-text-2); }
.md-typeset .jd-match-note, .jd-match-note { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--jd-text-2); }
.jd-mchip {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0 0.8rem;
  border-radius: 999px; border: 1px solid var(--jd-glass-border); background: var(--jd-glass-strong);
  color: var(--jd-text); font: inherit; font-size: 0.85rem; cursor: pointer;
}
button.jd-mchip:hover, .jd-mchip-add:hover { border-color: var(--jd-brand); }
.jd-mchip.is-on { cursor: default; border-color: color-mix(in srgb, var(--jd-brand) 45%, transparent);
  background: color-mix(in srgb, var(--jd-brand) 14%, var(--jd-glass)); }
.jd-mchip.is-main { font-weight: 600; }
.jd-mchip-x { border: 0; background: none; color: var(--jd-text-2); font: inherit; font-size: 1rem; line-height: 1;
  min-width: 28px; min-height: 28px; border-radius: 50%; cursor: pointer; }
.jd-mchip-x:hover { color: var(--jd-brand); background: var(--jd-glass); }
.jd-mchip-add { padding-right: 0.6rem; }

.jd-match-results:empty { display: none; }
.jd-mgroup { margin: 1.4rem 0 0; }
.md-typeset .jd-mgroup-h { margin: 0 0 0.5rem; font-size: 1rem; }
.jd-mresult {
  margin: 0 0 0.5rem; padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 1px solid var(--jd-glass-border); background: var(--jd-glass);
}
.jd-mresult-top { display: flex; align-items: center; gap: 0.5rem; }
.md-typeset a.jd-mresult-name { font-weight: 600; font-size: 0.95rem; }
.jd-mresult-why { margin-top: 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--jd-brand); }
.jd-mresult-desc { margin-top: 0.1rem; font-size: 0.86rem; color: var(--jd-text-2); }
.jd-match-warn {
  margin: 1.2rem 0 0; padding: 0.8rem 0.95rem; border-radius: 12px; font-size: 0.86rem; line-height: 1.55;
  border: 1px solid color-mix(in srgb, #eab308 50%, transparent); background: color-mix(in srgb, #eab308 10%, var(--jd-glass));
}
.jd-match-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0 0.5rem; }
.jd-match-share small { flex-basis: 100%; color: var(--jd-text-2); font-size: 0.78rem; }
.md-typeset .jd-find-cta { margin: 0.4rem 0 1rem; }
@media screen and (max-width: 30em) {
  .jd-select { flex: 1 1 100%; }
  .jd-match-row .jd-tool-btn { flex: 1 1 auto; }
}
.md-typeset .jd-match-share small { color: var(--jd-text-2); opacity: 1; }
/* Very narrow phones: keep room for the site name; Scam Check stays on the home page */
@media (max-width: 420px) { .md-header .jd-scam-btn:not(.jd-find-btn) { display: none !important; } }


/* ==========================================================================
   18. Calmer and plainer: one quiet background, solid colours, no decoration
       that doesn't carry information. (Earlier sections set the defaults;
       these rules deliberately win over them.)
   ========================================================================== */
/* Background: a single still tint at the top. No moving glows, no dot grid. */
body::before {
  animation: none !important;
  background: radial-gradient(70% 45% at 25% 0%, color-mix(in srgb, var(--jd-brand) calc(12% * var(--jd-glow-strength)), transparent), transparent 70%) !important;
}
body::after, .md-header::after { display: none !important; }

/* Solid accent colour instead of gradients and glow */
.md-typeset .jd-btn-brand, .jd-tool-btn, .jd-switch input:checked + .jd-switch-ui {
  background: var(--jd-brand) !important; box-shadow: none !important;
}
.md-typeset .jd-btn-brand:hover { background: color-mix(in srgb, var(--jd-brand) 85%, var(--jd-text)) !important; box-shadow: none; }
.md-typeset .jd-btn { border-radius: 10px; }
.md-typeset .jd-btn:hover { transform: none; border-color: var(--jd-brand); }
.md-typeset .jd-card:hover { transform: none; box-shadow: inset 0 1px 0 var(--jd-glass-hi); }
.jd-card-icon { background: var(--jd-glass-strong); border-color: var(--jd-glass-border); }

/* Home: a plain statement, left-aligned like the rest of the site */
.jd-hero { text-align: left; padding: 2.4rem 0 1.4rem; max-width: 40rem; }
.md-typeset .jd-hero-title {
  font-size: clamp(1.9rem, 4.4vw, 2.75rem); line-height: 1.12; font-weight: 750;
  letter-spacing: -0.01em; margin: 0 0 0.45em; color: var(--jd-text); text-wrap: balance;
}
.md-typeset .jd-hero-lede { font-size: 1.05rem; line-height: 1.6; color: var(--jd-text-2); margin: 0 0 1.4em; max-width: 34rem; }
.jd-hero-search { margin: 0 0 1rem; width: min(100%, 34rem); border-radius: 12px; }
.jd-hero-search:hover { box-shadow: none; }
.jd-actions { justify-content: flex-start; }

/* Home index: set like the index of a reference book, name ..... number */
.md-typeset .jd-index-h { font-size: 1.2rem; font-weight: 750; margin: 2.2rem 0 0.25rem; letter-spacing: 0; color: var(--jd-text); }
.md-typeset .jd-index-sub { margin: 0 0 0.5rem; color: var(--jd-text-2); font-size: 0.9rem; }
.jd-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); column-gap: 3rem; margin-bottom: 1.5rem; }
.md-typeset ul.jd-toc { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.md-typeset ul.jd-toc > li { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--jd-divider); }
.md-typeset a.jd-toc-row { display: flex; align-items: baseline; gap: 0.5rem; color: var(--jd-text); font-weight: 700; font-size: 0.95rem; }
.jd-toc-dots { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--jd-text-3) 75%, transparent); transform: translateY(-0.3em); }
.jd-toc-n { font-variant-numeric: tabular-nums; color: var(--jd-brand); }
.md-typeset a.jd-toc-row:hover .jd-toc-name { text-decoration: underline; text-underline-offset: 3px; }
.jd-toc-note { display: block; margin-top: 0.1rem; font-size: 0.82rem; line-height: 1.45; color: var(--jd-text-2); }
.jd-legend { text-align: left; }

/* Headings and small labels in normal sentence case, not tracked-out capitals */
.md-typeset h2 {
  font-size: 1.1rem; font-weight: 750; letter-spacing: 0; text-transform: none;
  color: var(--jd-text); margin: 2.2em 0 0.6em;
}
.md-typeset h3 { font-weight: 700; letter-spacing: 0; }
.md-typeset h1 { font-weight: 750; letter-spacing: -0.01em; }
.jd-appear-title, .jd-strip-title, .jd-match-k {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.8rem; font-weight: 700; color: var(--jd-text-2);
}
@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav__item--nested > .md-nav__link {
    text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important;
  }
}
.jd-legend { justify-content: flex-start; text-align: left; }

/* ==========================================================================
   19. Home: world map + a colour for each field
   ========================================================================== */
.md-typeset .jd-hero-check { display: flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0; font-size: 0.88rem; color: var(--jd-text-2); }
.jd-hero-tick { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #a6e3a1; color: #1e1e2e; font-size: 0.75rem; font-weight: 800; }

.jd-map { position: relative; margin: 1.4rem 0 0.4rem; }
.jd-map-img { display: block; width: 100%; height: auto; }
.md-typeset a.jd-pin { position: absolute; display: block; width: 0; height: 0; color: var(--jd-text); }
.jd-pin-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--jd-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jd-brand) 25%, transparent);
}
.jd-pin-label {
  position: absolute; top: 0; left: 14px; transform: translateY(-50%); white-space: nowrap;
  padding: 0.3rem 0.6rem; border-radius: 9px; line-height: 1.25;
  background: color-mix(in srgb, var(--jd-bg) 88%, transparent); border: 1px solid var(--jd-glass-border);
}
.jd-pin-label b { display: block; font-size: 0.78rem; }
.jd-pin-label small { display: block; font-size: 0.7rem; color: var(--jd-text-2); }
.jd-pin--l .jd-pin-label { left: auto; right: 14px; }
.jd-pin--t .jd-pin-label { left: 0; top: -14px; transform: translate(-50%, -100%); }
.jd-pin--b .jd-pin-label { left: 0; top: 14px; transform: translate(-50%, 0); }
.md-typeset a.jd-pin:hover .jd-pin-label, .md-typeset a.jd-pin:focus-visible .jd-pin-label { border-color: var(--jd-brand); }
.md-typeset a.jd-pin:hover .jd-pin-dot { transform: scale(1.2); }
.jd-pin.is-you .jd-pin-dot { background: #a6e3a1; box-shadow: 0 0 0 5px color-mix(in srgb, #a6e3a1 30%, transparent); }
.jd-pin.is-you .jd-pin-label { border-color: color-mix(in srgb, #a6e3a1 60%, transparent); }
.jd-pin.is-you .jd-pin-label b::after { content: " (you)"; font-weight: 400; color: var(--jd-text-2); }
.md-typeset .jd-map-cap { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--jd-text-2); }
/* Desktop: the map does the job. Phones: labels would overlap, so show the list instead. */
@media screen and (min-width: 60em) { .jd-hero + .jd-map ~ .jd-country-chips { display: none; } }
@media screen and (max-width: 59.99em) {
  .jd-pin-label { display: none; }
  .jd-pin-dot { width: 10px; height: 10px; left: -5px; top: -5px; }
}

.jd-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.8rem; margin: 0.8rem 0 0.5rem; }
.md-typeset a.jd-ftile {
  --cc: var(--c);
  display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.05rem 0.95rem; border-radius: 14px;
  color: var(--jd-text);
  background: color-mix(in srgb, var(--c) 11%, var(--jd-bg));
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  transition: border-color .15s, background .15s;
}
html[data-jd-mode="light"] .md-typeset a.jd-ftile { --cc: color-mix(in srgb, var(--c) 32%, #11111b); background: color-mix(in srgb, var(--c) 18%, var(--jd-bg)); }
.md-typeset a.jd-ftile:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 17%, var(--jd-bg)); color: var(--jd-text); }
.jd-ftile-ic { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; font-size: 1.15rem; background: var(--c); margin-bottom: 0.35rem; }
.jd-ftile-nm { font-weight: 750; font-size: 0.98rem; }
.jd-ftile-ds { font-size: 0.8rem; line-height: 1.45; color: var(--jd-text-2); flex: 1; }
.jd-ftile-n { margin-top: 0.3rem; font-weight: 700; font-size: 0.85rem; color: var(--cc); }
.md-typeset ul.jd-toc--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); column-gap: 3rem; }
/* Phones: two field tiles per row, without the description */
@media screen and (max-width: 37.5em) {
  .jd-fields { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .jd-ftile-ds { display: none; }
  .md-typeset a.jd-ftile { padding: 0.8rem; }
  .jd-ftile-nm { font-size: 0.9rem; line-height: 1.3; }
}

/* Home: types of site as compact tiles (quieter than the coloured field tiles) */
.jd-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.md-typeset a.jd-ttile {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 14px;
  color: var(--jd-text); background: var(--jd-glass); border: 1px solid var(--jd-glass-border);
  transition: border-color .15s, background .15s;
}
.md-typeset a.jd-ttile:hover { border-color: var(--jd-brand); background: color-mix(in srgb, var(--jd-brand) 8%, var(--jd-glass)); color: var(--jd-text); }
.jd-ttile-ic {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 11px; font-size: 1.2rem;
  background: color-mix(in srgb, var(--jd-brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--jd-brand) 30%, transparent);
}
.jd-ttile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.jd-ttile-nm { font-weight: 750; font-size: 0.93rem; }
.jd-ttile-ds { font-size: 0.78rem; line-height: 1.4; color: var(--jd-text-2); }
.jd-ttile-n {
  flex: none; min-width: 2.2rem; padding: 0.2rem 0.55rem; border-radius: 999px; text-align: center;
  font-weight: 750; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  color: var(--jd-brand); background: color-mix(in srgb, var(--jd-brand) 13%, transparent);
}
@media screen and (max-width: 37.5em) { .jd-ttile-ds { display: none; } }
.jd-types { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.md-typeset a.jd-ttile { line-height: 1.35; padding: 0.8rem 0.95rem; }
.jd-ttile-ic { background: color-mix(in srgb, var(--c) 85%, transparent); border-color: transparent; }
.jd-ttile-nm { line-height: 1.3; }
.jd-ttile-ds { line-height: 1.4; }
.jd-ttile-n { color: var(--jd-text); background: color-mix(in srgb, var(--c) 18%, transparent); }
.md-typeset a.jd-ttile:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--jd-glass)); }
.md-typeset a.jd-ttile--wide { grid-column: 1 / -1; }
.jd-ttile-flags { margin-top: 0.3rem; font-size: 1.05rem; letter-spacing: 0.15em; }

/* 20. US-first home: promises, start-here picks, map lower down */
.md-typeset .jd-promise { list-style: none; margin: 1.1rem 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .88rem; color: var(--jd-text-2); }
.md-typeset .jd-promise li { margin: 0 !important; display: flex; gap: .45rem; align-items: baseline; }
.md-typeset .jd-promise li > span[aria-hidden] { color: var(--md-accent-fg-color, #a6e3a1); font-weight: 700; }
.md-typeset .jd-index-sub { margin: .1rem 0 .9rem; color: var(--jd-text-2); font-size: .92rem; }
.md-typeset .jd-starts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.md-typeset a.jd-start { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--jd-line, rgba(127,127,127,.25)); border-top: 3px solid var(--c); color: var(--jd-text); text-decoration: none; background: color-mix(in srgb, var(--c) 6%, transparent); }
.md-typeset a.jd-start:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.md-typeset .jd-start-for { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--jd-text-2); }
.md-typeset .jd-start-nm { font-size: 1.05rem; font-weight: 750; }
.md-typeset .jd-start-ds { font-size: .86rem; color: var(--jd-text-2); }
@media (max-width: 760px) { .md-typeset .jd-starts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .md-typeset .jd-starts { grid-template-columns: 1fr; } }
.md-typeset .jd-map + .jd-country-chips { margin-top: .6rem; }
@media screen and (min-width: 60em) { .jd-map + .jd-country-chips { display: none; } }
html[data-jd-mode="light"] .md-typeset a.jd-start { border-top-color: color-mix(in srgb, var(--c) 70%, #11111b); background: color-mix(in srgb, var(--c) 12%, var(--jd-bg)); }

/* 21. "See jobs" buttons in Find my job sites */
.md-typeset .jd-match-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; margin-top: .9rem; }
.md-typeset .jd-match-search > .jd-match-k { flex-basis: 100%; }
.md-typeset .jd-match-sbox { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--jd-text-2); flex: 1 1 13rem; }
.md-typeset .jd-match-sbox input { font: inherit; font-size: .95rem; color: var(--jd-text); background: transparent;
  border: 1px solid var(--jd-line, rgba(127,127,127,.35)); border-radius: 8px; padding: .5rem .65rem; min-width: 0; }
.md-typeset .jd-match-sbox input:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 1px; }
.md-typeset .jd-match-search small { flex-basis: 100%; color: var(--jd-text-2); }
.md-typeset a.jd-mjobs { display: inline-block; margin-top: .55rem; padding: .35rem .75rem; border-radius: 999px; font-size: .85rem;
  font-weight: 650; text-decoration: none; color: var(--jd-text); border: 1px solid var(--jd-line, rgba(127,127,127,.35));
  background: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent); }
.md-typeset a.jd-mjobs:hover { background: color-mix(in srgb, var(--md-accent-fg-color) 20%, transparent); }
.md-typeset a.jd-mjobs[hidden] { display: none; }
.md-typeset .jd-match-search small { color: var(--jd-text-2); opacity: 1; font-size: .78rem; }
.md-typeset .jd-match-quick { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; }
.md-typeset .jd-match-quick > .jd-match-k { flex-basis: 100%; }
.md-typeset .jd-match-quick a.jd-mjobs { margin-top: 0; }