@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/public/fonts/dm-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/public/fonts/dm-sans-latin.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;
}

/* Shared, local-only presentation layer. Data, routes and content stay in their existing modules. */
:root {
  color-scheme: light;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text: #102442;
  --surface: #fff;
  --paper: #f5f7fa;
  --mist: #eef5fd;
  --line: #dde5ef;
  --muted: #56677d;
  --blue: #0968b3;
  --action: #102442;
  --action-text: #fff;
  --reading: #40536a;
  --shadow: 0 8px 28px rgb(16 36 66 / 6%);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #edf3fc;
  --surface: #162235;
  --paper: #0e1725;
  --mist: #203650;
  --line: #304158;
  --muted: #b3c1d3;
  --blue: #80beff;
  --action: #243c59;
  --reading: #c1cddd;
  --shadow: 0 8px 28px rgb(0 0 0 / 10%);
}
body { color: var(--text); line-height: 1.6; }
[hidden] { display: none !important; }
h1, h2, h3, strong { color: inherit; }
h1, h2, h3 { overflow-wrap: break-word; }
button, input, select { font-family: var(--font-sans); }
:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
.site-header { gap: 18px; padding-block: 10px; border-color: var(--line); background: var(--surface); backdrop-filter: none; }
.brand { flex: 0 0 165px; }
.brand, .footer-brand { padding: 2px 6px; border-radius: 7px; background: transparent; }
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .footer-brand img { content: url("/public/brand/remoroute-name-logo-dark.png"); }
.site-nav { gap: clamp(16px, 2vw, 28px); font-weight: 600; }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.theme-toggle { min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--blue); }
.header-cta, .button { font-weight: 600; }
.header-cta { background: var(--action); color: var(--action-text); }
.button { border-radius: 10px; }
.button-lime, .button-ink { background: var(--action); color: var(--action-text); }
.button-lime span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--lime); color: #102442; }
.header-cta:hover, .button:hover { transform: none; box-shadow: none; }
.kicker { color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .09em; }
.quiet-link, .text-link, .insight-link, .role-link { color: var(--blue); font-weight: 600; }
.quiet-link, .text-link { min-height: 44px; }
.home-hero { background: var(--paper); padding-block: 44px 28px; gap: 26px; }
.hero-orbit { display: none; }
.home-hero h1 { color: var(--text); font-size: clamp(40px, 4.2vw, 58px); line-height: 1.13; letter-spacing: -.045em; }
.lead { color: var(--reading); line-height: 1.65; max-width: 50ch; }
.hero-actions { gap: 12px 22px; }
.impact-dashboard { border-color: var(--line); margin-top: 28px; padding-top: 16px; }
.impact-heading { gap: 5px 12px; margin-bottom: 10px; }
.impact-heading h2 { font-size: 14px; }
.impact-heading p { font-size: 11px; }
.impact-grid { gap: 8px; }
.impact-heading p, .impact-metric-copy span, .impact-metric-copy em { color: var(--muted); }
.impact-metric { min-height: 88px; padding: 12px 14px; gap: 8px; border-color: var(--line); background: var(--surface); color: var(--text); flex-direction: column; align-items: flex-start; border-radius: 10px; }
.impact-metric:hover, .impact-metric:focus-visible, .impact-metric[aria-pressed="true"] { background: var(--surface); border-color: var(--line); transform: none; box-shadow: none; }
.impact-metric[aria-pressed="true"] { box-shadow: inset 3px 0 var(--lime); }
.impact-ring { width: auto; height: auto; background: none; border-radius: 0; }
.impact-ring::before, .impact-ring::after { display: none; }
.impact-ring strong { font-size: 25px; color: var(--text); }
.impact-metric-copy { gap: 3px; }
.impact-metric-copy strong { font-size: 12px; line-height: 1.4; }
.impact-metric-copy > span, .impact-metric-copy > em { display: none; }
.impact-metric-copy em { font-size: 12px; }
.section { padding-block: clamp(30px, 4vw, 58px); }
.section h2, .feature-copy h2 { color: var(--text); font-size: clamp(27px, 3vw, 38px); line-height: 1.2; letter-spacing: -.035em; }
.home-insights { background: var(--paper); }
.role-card, .insight-card, .guide-grid article, .news-grid article { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: none; border-radius: 14px; }
.role-card:hover, .insight-card:hover, .guide-grid article:hover, .news-grid article:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
.role-company, .role-card p, .source-note { color: var(--muted); }
.role-source { background: transparent; color: var(--muted); padding-left: 0; font-size: 12px; }
.checked-pill { background: transparent; color: var(--muted); font-size: 12px; }
.role-tags span { background: var(--mist); color: var(--reading); font-size: 12px; font-weight: 500; }
.role-tags .pay-tag { background: transparent; color: var(--text); font-weight: 600; }
.home-jobs .role-card { padding: 20px; min-height: 0; }
.home-jobs .role-card h3 { font-size: 20px; line-height: 1.35; margin-top: 12px; }
.home-jobs .role-tags span { font-size: 12px; }
.insight-card { display: flex; flex-direction: column; height: auto; }
.insight-card-image { width: 100%; aspect-ratio: 16 / 9; }
.insight-card-image img { aspect-ratio: 16 / 9; }
.insight-card-copy { padding: 20px; flex: 1; }
.insight-meta { color: var(--muted); font-size: 12px; letter-spacing: .035em; font-weight: 500; }
.insight-card h3 { font-size: 20px; line-height: 1.35; margin: 10px 0; }
.insight-card-copy > p:not(.insight-meta) { display: block; overflow: visible; font-size: 14px; line-height: 1.65; }
.insight-link { min-height: 44px; }
.telegram-banner, .article-cta { border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 14px; background: var(--surface); color: var(--text); padding: clamp(24px, 4vw, 38px); }
.telegram-banner { margin-block: 40px; }
.telegram-banner h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.2; }
.telegram-banner .kicker, .article-cta .kicker { color: var(--blue); }
.telegram-banner p:not(.kicker), .article-cta p:not(.kicker) { color: var(--muted); }
.article-cta h2 { color: var(--text); }
.button-outline-light { border: 1px solid var(--line); background: transparent; color: var(--text); }
.button-outline-light:hover { background: var(--mist); border-color: var(--line); }
.site-footer { background: var(--surface); color: var(--text); padding-block: 38px 24px; }
.site-footer a, .site-footer p { color: var(--muted); }
.site-footer a { min-height: 36px; padding-block: 5px; }
.site-footer .footer-title { color: var(--text) !important; font-size: 12px !important; }
.site-footer .footer-brand { min-height: 0; padding: 2px 6px; }
.jobs-intro { background: var(--surface); gap: 8px 16px; min-height: 68px; padding-block: 10px; }
.job-refresh-status:empty { display: none; }
.jobs-intro h1 { color: var(--text); font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.jobs-intro .kicker { font-size: 11px; }
.job-filter-bar { background: var(--paper); backdrop-filter: none; padding-block: 14px; }
.filters { gap: 10px; }
.filters input, .filters select { background: var(--surface); color: var(--text); border-color: var(--line); border-radius: 10px; font-size: 15px; }
.job-layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 20px; }
.job-board { padding-top: 18px; }
.job-list { background: var(--surface); border-radius: 14px; }
.job-list .role-card { padding: 20px; }
.job-list .role-card.selected { background: var(--mist); box-shadow: inset 3px 0 var(--lime); }
.job-list .role-card h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.02em; margin: 10px 0; }
.job-list .role-source, .job-list .checked-pill { font-size: 12px; padding: 0; line-height: 1.5; }
.job-list .role-tags { margin: 12px 0; gap: 7px; }
.job-list .role-tags span { font-size: 12px; padding: 4px 7px; font-weight: 500; line-height: 1.45; }
.job-list .role-card .role-link { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; }
.detail-panel { background: var(--surface); color: var(--text); padding: 26px; border-radius: 14px; box-shadow: var(--shadow); scrollbar-color: var(--muted) var(--surface); scroll-margin-top: calc(var(--site-header-height,72px) + 16px); }
.detail-panel h2 { font-size: clamp(25px, 2.4vw, 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.detail-panel .kicker, .role-brief-section h3 { color: var(--blue); }
.detail-panel p, .detail-panel .detail-company { color: var(--muted); font-size: 15px; line-height: 1.7; }
.detail-facts { gap: 10px; margin-block: 20px; }
.detail-facts > div { background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.detail-facts .detail-pay { background: var(--mist); border-color: var(--line); }
.detail-facts span { color: var(--muted); font-size: 11px; letter-spacing: .05em; font-weight: 600; }
.detail-facts strong, .detail-facts .detail-pay strong { color: var(--text); font-size: 14px; line-height: 1.5; }
.role-brief-section { border-color: var(--line); padding-block: 21px; }
.role-brief-section h3 { color: var(--text); text-transform: none; font-size: 16px; letter-spacing: 0; font-weight: 600; }
.detail-panel .detail-note { background: var(--mist); color: var(--reading); padding: 16px; font-size: 13px; }
.detail-panel .article-meta { font-size: 12px; }
.job-back { display: none; }
.role-load-state strong { color: var(--text); }
.guide-grid article:first-child, .news-grid article:first-child { background: var(--surface); color: var(--text); }
.guide-grid article:first-child p, .guide-grid article:first-child span, .news-grid article:first-child p, .news-grid article:first-child span { color: var(--muted); }
.guide-grid h2, .news-grid h2 { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; }
.guide-grid span, .news-grid span { color: var(--muted); font-size: 12px; letter-spacing: .04em; font-weight: 500; }
.guide-grid p, .news-grid p { font-size: 15px; line-height: 1.65; }
.guide-grid .article-card-image { aspect-ratio: 16 / 9; height: auto; }
.page-hero { padding-block: 38px 30px; background: var(--surface); }
.page-hero h1, .about-page .page-hero h1 { color: var(--text); max-width: 23ch; font-size: clamp(32px,4vw,48px); line-height: 1.2; letter-spacing: -.04em; }
.page-hero p { color: var(--muted); line-height: 1.65; }
.page-content, .about-page .page-content { width: min(calc(100% - 44px),760px); margin-inline: auto; padding-block: 34px 60px; }
.page-content h2, .about-page .page-content h2 { color: var(--text); font-size: 27px; line-height: 1.3; }
.page-content p, .page-content li, .about-page .page-content p, .about-page .page-content li { color: var(--reading); line-height: 1.75; }
.article-page { width: min(100%,850px); padding: 38px 40px 60px; }
.article-page h1 { color: var(--text); font-size: clamp(32px,4.1vw,47px); line-height: 1.2; letter-spacing: -.04em; }
.article-page h2 { color: var(--text); font-size: 27px; line-height: 1.3; }
.article-page p, .article-page li { color: var(--reading); line-height: 1.75; font-size: 17px; }
.article-page .deck { color: var(--muted); font-size: 19px; }
.article-page .article-meta, .article-page .article-source { color: var(--muted); font-size: 13px; }
.article-page .article-label { color: var(--blue); letter-spacing: .06em; }
.article-cover { box-shadow: none; }
.article-sources { background: var(--surface); }
.article-page .article-links a, .article-sources a { color: var(--blue); }
.callout { background: var(--mist); border-left: 3px solid var(--lime); color: var(--reading); }
.analytics-consent { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
.analytics-consent p { color: var(--muted); }
.analytics-consent a, .analytics-consent .text-button { color: var(--blue); }
.analytics-consent .button-outline { color: var(--text); border: 1px solid var(--line); }
.analytics-consent .button-outline:hover { color: var(--blue); border-color: var(--blue); }
.analytics-settings-copy section { background: var(--mist); border-color: var(--line); }
.analytics-settings-copy h2, .toggle { color: var(--text); }
.analytics-consent .button { min-height: 44px; }
.analytics-consent { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (min-width: 901px) {
  .home-hero { grid-template-columns: 1fr 1fr; align-items: start; padding-inline: clamp(28px, 7vw, 110px); }
  .hero-copy-wrap { padding-top: 22px; }
  .home-hero > .home-jobs { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
  .home-hero .home-jobs .section-intro { margin: 0 0 14px; gap: 12px; }
  .home-hero .home-jobs h2 { font-size: 23px; }
  .home-hero .home-jobs .kicker { display: none; }
  .home-hero .home-jobs .role-preview { grid-template-columns: 1fr; gap: 0; }
  .home-hero .home-jobs .role-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 13px 0; }
  .home-hero .home-jobs .role-card h3 { font-size: 18px; margin-block: 5px; }
  .home-hero .home-jobs .role-tags { margin-block: 7px; }
  .home-hero .home-jobs .role-source, .home-hero .home-jobs .checked-pill { font-size: 11px; }
  .home-hero .home-jobs .source-note { font-size: 12px; }
  .home-hero .impact-dashboard { grid-column: 1/-1; max-width: none; }
}
@media (max-width: 1050px) and (min-width: 721px) {
  .site-header { padding-inline: 22px; gap: 12px; }
  .site-nav { gap: 14px; font-size: 13px; }
  .header-cta { display: none; }
}
@media (max-width: 900px) {
  .job-layout { grid-template-columns: 1fr; }
  .detail-panel { position: static; max-height: none; overflow: visible; }
  .job-detail-open .jobs-intro, .job-detail-open .job-filter-bar, .job-detail-open #job-list { display: none; }
  .job-detail-open .job-board { padding-top: 18px; }
  .job-back { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; margin-bottom: 16px; border: 0; background: transparent; color: var(--blue); font-size: 14px; font-weight: 600; }
  .job-detail-open .detail-panel { padding: 22px; }
  .job-detail-open .detail-panel:focus { outline-offset: 3px; }
  .home-hero { display: flex; flex-direction: column; gap: 24px; }
  .home-hero > * { width: 100%; }
  .home-hero > .home-jobs { padding: 0; }
  .home-hero > .impact-dashboard { order: 3; }
}
@media (max-width: 720px) {
  .site-header { min-height: 64px; gap: 8px; padding: 8px 16px; }
  .brand { flex-basis: 130px; width: 130px; }
  .nav-toggle { min-height: 44px; padding: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
  .theme-toggle { order: 2; font-size: 12px; padding: 8px; }
  .nav-toggle { order: 3; margin-left: 0; }
  .brand { margin-right: auto; }
  .site-nav { background: var(--surface); padding: 10px 20px; border-color: var(--line); max-height: calc(100dvh - 64px); overflow-y: auto; }
  .site-nav a { padding: 12px 0; min-height: 48px; font-size: 15px; }
  .site-nav a::after { right: auto; width: 28px; }
  .home-hero { padding: 28px 20px 24px; }
  .home-hero h1 { font-size: 40px; }
  .hero-actions { display: flex; gap: 8px 18px; }
  .hero-actions .button { width: auto; }
  .lead { font-size: 16px; }
  .section, .page-hero { padding-inline: 20px; }
  .section h2 { font-size: 27px; line-height: 1.25; }
  .section-intro { gap: 12px; flex-wrap: wrap; align-items: center; }
  .section-intro .text-link { font-size: 13px; }
  .impact-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .impact-metric { min-height: 90px; padding: 12px 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .impact-ring { min-width: 0; }
  .impact-ring strong { font-size: 24px; }
  .impact-metric-copy em { display: none; }
  .jobs-intro { padding: 10px 20px; gap: 6px 10px; position: static; min-height: 0; }
  .jobs-intro h1 { font-size: 26px; }
  .job-filter-bar { padding: 10px 20px; top: var(--site-header-height,64px); }
  .filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .filters input { grid-column: 1/-1; font-size: 16px; }
  .filters select { font-size: 14px; padding-inline: 9px; min-width: 0; }
  .job-list .role-card { padding: 20px; }
  .job-list .role-card h3 { font-size: 20px; }
  .job-list .role-source, .job-list .checked-pill { font-size: 11px; }
  .job-list .role-top { gap: 8px; flex-wrap: wrap; }
  .job-list .role-tags span { font-size: 12px; }
  .detail-panel h2 { font-size: 27px; }
  .detail-panel p, .role-brief-section p { font-size: 16px; }
  .detail-facts strong { font-size: 14px; }
  .role-brief-section h3 { font-size: 16px; }
  .page-hero h1, .about-page .page-hero h1 { font-size: 32px; line-height: 1.2; }
  .page-content, .about-page .page-content { width: auto; margin-inline: 20px; padding: 28px 0 50px; }
  .page-content h2, .about-page .page-content h2 { font-size: 25px; }
  .article-page { padding: 26px 20px 50px; }
  .article-page h1 { font-size: 32px; line-height: 1.2; }
  .article-page h2 { font-size: 25px; }
  .article-page p, .article-page li, .page-content p, .page-content li { font-size: 16px; line-height: 1.75; }
  .article-page .deck { font-size: 18px; }
  .article-page .article-meta { font-size: 13px; }
  .article-cta, .article-sources { padding: 21px; }
  .telegram-banner { margin: 28px 20px; padding: 24px; }
  .telegram-banner h2 { font-size: 28px; }
  .social-cta-actions { justify-content: flex-start; }
  .site-footer { padding: 30px 20px 24px; }
  .site-footer a { min-height: 44px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 12px; gap: 6px; }
  .brand { flex-basis: 118px; width: 118px; }
  .theme-toggle { padding-inline: 6px; }
  .nav-toggle { padding-inline: 6px; }
  .home-hero h1 { font-size: 36px; }
  .detail-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}