/* Career Hound /remote/ shared design system.
   Captured from careerhound.io, 2026-08-14.
   Marketing-site language: Tailwind blue-600 hero bands, navy #142033 headings,
   deep navy #090E34 footer, Inter, and compact blue buttons. */
:root{
  --background:#ffffff; --foreground:#09090b;
  --primary:#18181b; --primary-foreground:#fafafa;
  --secondary:#f4f4f5; --secondary-foreground:#18181b;
  --muted:#f4f4f5; --muted-foreground:#4b5563;
  --border:#e4e4e7;
  --blue:#2563eb;          /* bg-blue-600, hero + buttons */
  --blue-hover:#1d4ed8;    /* bg-blue-700 */
  --blue-tint:#f8faff;     /* light blue fill, from their css */
  --navy:#090E34;          /* footer band */
  --headline:#142033;      /* section headings, text-[#142033] */
  --radius:0.5rem; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--background); color:var(--foreground); -webkit-font-smoothing:antialiased;
  line-height:1.5; font-size:16px}
a{color:inherit; text-decoration:none}
.skip-link{position:fixed; top:.75rem; left:.75rem; z-index:100; padding:.65rem 1rem;
  border-radius:6px; background:#fff; color:var(--headline); font-weight:700;
  box-shadow:0 4px 18px rgba(9,14,52,.2); transform:translateY(calc(-100% - 1.5rem))}
.skip-link:focus-visible{transform:translateY(0); outline:3px solid var(--blue); outline-offset:2px}
h1,h2,h3{line-height:1.2; font-weight:700; color:var(--headline)}
h1{font-size:clamp(2.1rem,5vw,3rem); letter-spacing:normal}
h2{font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.111; margin-top:3rem; letter-spacing:-0.025em}
h3{font-size:1.2rem; margin-top:2rem; letter-spacing:-0.01em}
p{margin:1rem 0}
ul{padding-left:1.2rem} li{margin:0.5rem 0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}

/* nav */
header{border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px; position:relative}
.brand{display:flex; align-items:center; gap:0.5rem; font-weight:800; font-size:1.15rem; color:var(--headline)}
.brand .logo{width:32px; height:32px; padding:4px; border-radius:9999px; background:#fff; object-fit:contain; display:block}
.primary-nav{display:flex; align-items:center; gap:.35rem; font-size:1rem}
.desktop-nav-link,.mega-toggle{padding:.55rem .7rem; border-radius:8px; color:var(--muted-foreground); font-weight:500}
.desktop-nav-link:hover,.mega-toggle:hover{background:#f8fafc; color:var(--headline)}
.mega-toggle{display:inline-flex; align-items:center; gap:.35rem; border:0; background:transparent;
  font:inherit; font-weight:500; cursor:pointer; transition:background .16s ease,color .16s ease}
.mega-toggle:focus-visible{outline:3px solid rgba(37,99,235,.28); outline-offset:2px}
.mobile-menu-label,.menu-glyph{display:none}
.mega-chevron{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.site-header:has(.mega-menu:popover-open) .mega-toggle{background:#eff6ff; color:var(--blue-hover)}
.site-header:has(.mega-menu:popover-open) .mega-chevron{transform:rotate(180deg)}
.header-signin{display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-left:.45rem;
  padding:.65rem 1.2rem; border-radius:6px; background:var(--blue); color:#fff; font-weight:500}
.header-signin:hover{background:var(--blue-hover); color:#fff}

/* Mega menu */
.mega-menu{position:fixed; inset:auto; top:74px; left:50%; width:min(calc(100vw - 2rem),var(--maxw));
  max-height:calc(100vh - 88px); margin:0; padding:0; overflow:auto; transform:translateX(-50%); background:#fff;
  border:0; border-radius:14px; box-shadow:0 20px 50px rgba(9,14,52,.2)}
.mega-menu::backdrop{background:transparent}
.mega-topline{display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.15rem 1.35rem; border-bottom:1px solid #e9edf4}
.mega-topline>div{display:flex; align-items:baseline; gap:.75rem}
.mega-topline strong{color:var(--headline); font-size:.96rem}
.mega-topline span{color:#64748b; font-size:.82rem}
.mega-topline>a{color:var(--blue); font-size:.86rem; font-weight:650; white-space:nowrap}
.mega-grid{display:grid; grid-template-columns:1.1fr 2fr 1.1fr; padding:1.25rem}
.mega-group{min-width:0; padding:0 1.1rem}
.mega-group:first-child{padding-left:0}
.mega-group:last-child{padding-right:0}
.mega-group+.mega-group{border-left:1px solid #e9edf4}
.mega-heading{margin:0 0 .6rem; color:#64748b; font-size:.72rem; line-height:1.4; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase}
.mega-rich-link{display:block; padding:.65rem .7rem; border-radius:9px}
.mega-rich-link:hover{background:#f8fafc}
.mega-rich-link span{display:block; color:var(--headline); font-size:.91rem; font-weight:650; line-height:1.35}
.mega-rich-link small{display:block; margin-top:.18rem; color:#64748b; font-size:.77rem; line-height:1.4}
.mega-role-links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.18rem .35rem}
.mega-role-links a{display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:40px;
  padding:.5rem .65rem; border-radius:8px; color:#334155; font-size:.88rem; font-weight:600}
.mega-role-links a span{color:#94a3b8; transition:transform .16s ease,color .16s ease}
.mega-role-links a:hover{background:#f8fafc; color:var(--headline)}
.mega-role-links a:hover span{color:var(--blue); transform:translateX(2px)}
.mega-role-subgroup{margin-top:.65rem; padding-top:.65rem; border-top:1px solid #e9edf4}
.mega-subheading{margin:0 0 .2rem; padding:0 .65rem; color:var(--blue-hover); font-size:.74rem; font-weight:700}
.mega-project-links a{font-size:.84rem}
.mega-mobile-actions{display:none}

/* buttons, matching the live blue-600, 6px radius, and medium weight */
.btn{display:inline-flex; align-items:center; gap:0.4rem; background:var(--blue);
  color:#fff; padding:0.75rem 1.75rem; border-radius:6px;
  font-weight:500; font-size:1rem; border:none; cursor:pointer; transition:background .15s}
.btn:hover{background:var(--blue-hover)}
.btn-ghost{background:transparent; color:var(--headline); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--secondary)}

/* hero: solid blue band, white headline, like their homepage */
.hero{padding:5rem 0 4.5rem; background:var(--blue); color:#fff}
.hero.has-breadcrumbs{padding-top:2.75rem}
.hero h1{color:#fff}
.breadcrumbs{margin:0 0 1.55rem; font-size:.8rem; line-height:1.4; color:#fff}
.breadcrumbs ol{display:flex; align-items:center; min-width:0; margin:0; padding:0; list-style:none; white-space:nowrap}
.breadcrumbs li{display:flex; align-items:center; min-width:0; margin:0}
.breadcrumbs li+li::before{content:""; width:6px; height:6px; margin:0 .7rem 0 .6rem;
  border-top:1.5px solid rgba(255,255,255,.5); border-right:1.5px solid rgba(255,255,255,.5);
  transform:rotate(45deg); flex:none}
.breadcrumbs a{border-radius:3px; color:#fff; transition:color .15s ease}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs a:focus-visible{outline:2px solid #fff; outline-offset:4px}
.breadcrumbs [aria-current="page"]{min-width:0; overflow:hidden; color:#fff; font-weight:600; text-overflow:ellipsis}
.eyebrow{display:flex; align-items:center; gap:0.65rem; font-size:0.78rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:#fff; margin-bottom:1.2rem}
.eyebrow::before{content:""; width:26px; height:2px; background:currentColor; opacity:0.7; flex:none}
.hero p.lede{font-size:1.125rem; line-height:1.44; font-weight:500; color:#fff; max-width:62ch; margin-top:1.3rem}
.hero-cta{display:flex; gap:0.8rem; margin-top:2.2rem; flex-wrap:wrap}
.hero .btn{background:#fff; color:var(--headline)}
.hero .btn:hover{background:#e8eaf6}
.hero .btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,0.1)}

/* stat strip + cards */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:-2.5rem auto 0; position:relative}
.stat,.card{border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; background:#fff;
  box-shadow:0 1px 3px rgba(9,14,52,0.06)}
.stat .num{font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; color:var(--blue)}
.stat .label{color:var(--muted-foreground); font-size:0.9rem; margin-top:0.3rem}

/* content */
.content{padding-block:3rem 1rem}
.content .col{max-width:72ch}
.callout{border:1px solid #d6def0; border-left:3px solid var(--blue);
  background:var(--blue-tint); border-radius:var(--radius); padding:1.2rem 1.4rem; margin:2rem 0}
.callout strong{color:var(--blue-hover)}

/* comparison table */
table.cmp{width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.95rem}
table.cmp th,table.cmp td{border:1px solid var(--border); padding:0.8rem 1rem; text-align:left; vertical-align:top}
table.cmp thead th{background:var(--secondary); font-weight:600}
table.cmp tr.us td{background:var(--blue-tint); font-weight:600}
table.cmp a{color:var(--blue-hover); text-decoration:underline; text-decoration-color:#bfdbfe; text-underline-offset:3px}
table.cmp a:hover{text-decoration-color:var(--blue-hover)}

/* ladder (career path): a quiet trail rather than another card */
.ladder{position:relative; margin:1.5rem 0; padding:.25rem 0}
.ladder::before{content:""; position:absolute; left:19px; top:1.5rem; bottom:1.5rem; width:2px;
  background:#bfdbfe}
.rung{position:relative; display:grid; grid-template-columns:190px 1fr; gap:1.25rem;
  padding:1.2rem 0 1.2rem 3.75rem; border-bottom:1px solid var(--border)}
.rung::before{content:""; position:absolute; left:10px; top:1.35rem; width:16px; height:16px;
  border:4px solid #dbeafe; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px #fff}
.rung:first-child::before,.rung:last-child::before{border-color:var(--blue); background:#fff}
.rung:last-child{border-bottom:none}
.rung .lvl{font-weight:700; color:var(--headline)}
.rung .yrs{color:var(--muted-foreground); font-size:0.85rem; font-weight:400}

/* salary block (role data) */
.salary-table{width:100%; border-collapse:collapse; margin:1rem 0}
.salary-table th,.salary-table td{border-bottom:1px solid var(--border); padding:0.7rem 1rem; text-align:left}
.salary-table th{color:var(--muted-foreground); font-weight:500; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1rem}
.chip{border:1px solid var(--border); border-radius:9999px; padding:0.4rem 0.9rem; font-size:0.88rem; font-weight:500; background:#fff}

/* visual storytelling: subtle search-trail language */
.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}
.trail-kicker{display:block; color:var(--blue); font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase}
.trail-guide{margin:2rem 0 3rem; padding:1.6rem 1.75rem 1.75rem; border:1px solid #dbeafe;
  border-radius:12px; background:#f8fbff}
.trail-guide>figcaption{display:grid; gap:.35rem; margin-bottom:1.5rem}
.trail-guide>figcaption strong{color:var(--headline); font-size:1.25rem}
.trail-guide>figcaption>span:last-child{color:var(--muted-foreground); font-size:.92rem}
.trail-steps{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
  list-style:none; margin:0; padding:0}
.trail-steps::before{content:""; position:absolute; left:20px; right:20px; top:18px; height:2px;
  background:#bfdbfe}
.trail-stop{position:relative; z-index:1; display:grid; align-content:start; gap:.35rem; margin:0; padding-top:3rem}
.trail-stop>strong{color:var(--headline); font-size:.96rem}
.trail-stop>span:last-child{color:var(--muted-foreground); font-size:.84rem; line-height:1.45}
.trail-dot{position:absolute; top:0; left:0; display:grid; place-items:center; width:38px; height:38px;
  border:6px solid #f8fbff; border-radius:50%; background:var(--blue); color:#fff;
  font-size:.72rem; font-weight:700; box-shadow:0 0 0 1px #93c5fd}
.trail-dot-paw{background:#fff; color:var(--blue)}
.trail-dot svg{width:19px; height:19px}

.source-flow{margin:2.5rem 0; padding:1.75rem; border-radius:12px; background:var(--navy); color:#fff}
.source-flow-head{display:grid; grid-template-columns:minmax(0,.8fr) minmax(260px,1.2fr); gap:2rem; align-items:end}
.source-flow-head h3{margin:.35rem 0 0; padding:0; color:#fff; font-size:1.45rem}
.source-flow-head h3::before{display:none}
.source-flow-head p{margin:0; color:#c8cee1; font-size:.92rem}
.source-flow .trail-kicker{color:#93c5fd}
.source-flow-path{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none;
  margin:2rem 0 0; padding:0}
.source-node{position:relative; display:grid; align-content:start; gap:.28rem; min-width:0; margin:0;
  padding:3.35rem 1rem 0 0}
.source-node:not(:last-child)::after{content:""; position:absolute; left:42px; right:-10px; top:18px;
  height:2px; background:rgba(147,197,253,.42)}
.source-marker{position:absolute; top:0; left:0; z-index:1; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:#1e3a8a; color:#bfdbfe; font-size:.72rem; font-weight:700}
.source-node-first .source-marker{background:#fff; color:var(--blue)}
.source-marker svg{width:19px; height:19px}
.source-timing{color:#93c5fd; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.source-node strong{color:#fff; font-size:.98rem}
.source-node>span:last-child{color:#aeb8d3; font-size:.82rem; line-height:1.45}
.source-flow>figcaption{margin-top:1.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14);
  color:#c8cee1; font-size:.84rem}

/* Copyable search patterns: technical enough to use, calm enough to scan. */
.search-recipes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin:1.5rem 0 2.5rem}
.search-recipes article{display:grid; align-content:start; gap:.55rem; min-width:0; margin:0; padding:1.1rem 1.15rem;
  border:1px solid #dbe5f3; border-radius:10px; background:#f8fbff}
.search-recipes article>span{color:var(--blue-hover); font-size:.75rem; font-weight:750; letter-spacing:.07em;
  text-transform:uppercase}
.search-recipes code{display:block; max-width:100%; overflow-x:auto; padding:.7rem .8rem; border:1px solid #dbeafe;
  border-radius:7px; background:#fff; color:var(--headline); font:600 .78rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap}
.search-recipes p{margin:0; color:var(--muted-foreground); font-size:.8rem; line-height:1.5}
.search-recipes-compact article{grid-template-rows:auto 1fr}

/* Worldwide eligibility compass, with a restrained paw marker at the decision point. */
.eligibility-compass{margin:2rem 0 3rem; padding:1.65rem 1.75rem 1.75rem; border:1px solid #dbeafe;
  border-radius:12px; background:#f8fbff}
.eligibility-compass>figcaption{display:grid; gap:.35rem; max-width:58ch}
.eligibility-compass>figcaption strong{color:var(--headline); font-size:1.25rem}
.eligibility-compass>figcaption>span:last-child{color:var(--muted-foreground); font-size:.92rem}
.compass-map{display:grid; grid-template-columns:150px minmax(0,1fr); gap:1.5rem; align-items:center; margin-top:1.5rem}
.compass-center{display:grid; place-items:center; align-content:center; gap:.35rem; width:132px; height:132px;
  border:1px solid #93c5fd; border-radius:50%; background:#fff; color:var(--blue); box-shadow:0 0 0 10px #eff6ff}
.compass-center::before,.compass-center::after{content:""; position:absolute; pointer-events:none}
.compass-center svg{width:30px; height:30px}
.compass-center span{color:var(--headline); font-size:.78rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase}
.compass-map ol{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:0; padding:0; list-style:none}
.compass-map li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:.65rem; align-items:start; min-width:0; margin:0;
  padding:.85rem; border-left:1px solid #bfdbfe}
.compass-number{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff;
  font-size:.68rem; font-weight:750}
.compass-map li>span:last-child{display:grid; gap:.2rem}
.compass-map li strong{color:var(--headline); font-size:.88rem; line-height:1.35}
.compass-map li small{color:var(--muted-foreground); font-size:.76rem; line-height:1.45}

/* Remote job search playbook: a working route, not a decorative stepper. */
.playbook-trail{margin:2rem 0 3rem; padding:1.6rem 1.75rem 1.75rem; border:1px solid #dbeafe;
  border-radius:12px; background:#f8fbff; scroll-margin-top:90px}
.playbook-trail-head{display:grid; gap:.35rem; max-width:60ch; margin-bottom:1.25rem}
.playbook-trail-head>strong{color:var(--headline); font-size:1.25rem}
.playbook-trail-head p{margin:0; color:var(--muted-foreground); font-size:.9rem}
.playbook-trail ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; padding:0;
  border-block:1px solid #dbe5f3; list-style:none}
.playbook-trail li{position:relative; margin:0; border-bottom:1px solid #e5edf8}
.playbook-trail li:nth-last-child(-n+2){border-bottom:0}
.playbook-trail li:nth-child(odd){border-right:1px solid #dbe5f3}
.playbook-trail a{display:grid; grid-template-columns:36px minmax(0,1fr); gap:.75rem; min-height:88px;
  padding:1rem; transition:background .16s ease}
.playbook-trail a:hover{background:#eff6ff}
.playbook-trail a:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:-3px}
.playbook-marker{display:grid; place-items:center; width:30px; height:30px; margin-top:.1rem; border-radius:50%;
  background:var(--blue); color:#fff; font-size:.7rem; font-weight:750; box-shadow:0 0 0 4px #dbeafe}
.playbook-marker-paw{background:#fff; color:var(--blue); box-shadow:0 0 0 1px #93c5fd,0 0 0 5px #dbeafe}
.playbook-marker svg{width:18px; height:18px}
.playbook-trail a>span:last-child{display:grid; align-content:start; gap:.2rem}
.playbook-trail a strong{color:var(--headline); font-size:.9rem}
.playbook-trail a small{color:var(--muted-foreground); font-size:.78rem; line-height:1.45}
.content h2[id]{scroll-margin-top:92px}

.search-brief{margin:1.5rem 0 2.5rem; overflow:hidden; border:1px solid #dbe5f3; border-radius:10px; background:#fff}
.search-brief-head{display:grid; gap:.25rem; padding:1.1rem 1.2rem; border-bottom:1px solid #dbe5f3; background:#f8fbff}
.search-brief-head strong{color:var(--headline); font-size:1.05rem}
.search-brief dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0}
.search-brief dl>div{display:grid; gap:.2rem; min-width:0; padding:.9rem 1.2rem; border-bottom:1px solid var(--border)}
.search-brief dl>div:nth-child(odd){border-right:1px solid var(--border)}
.search-brief dl>div:nth-last-child(-n+2){border-bottom:0}
.search-brief dt{color:#64748b; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.search-brief dd{margin:0; color:var(--headline); font-size:.86rem; line-height:1.45}

.weekly-loop{margin:1.5rem 0 2.5rem; border-block:1px solid var(--border)}
.weekly-loop>div{display:grid; grid-template-columns:minmax(140px,.55fr) minmax(0,1.65fr); gap:1.25rem;
  padding:1rem 0; border-bottom:1px solid var(--border)}
.weekly-loop>div:last-child{border-bottom:0}
.weekly-loop strong{color:var(--blue-hover); font-size:.84rem}
.weekly-loop span{color:#374151; font-size:.9rem; line-height:1.55}

.role-atlas{position:relative; margin:1.5rem 0 2.5rem; border-block:1px solid var(--border)}
.role-atlas::before{content:""; position:absolute; left:27px; top:4.8rem; bottom:1.8rem; width:2px; background:#dbeafe}
.role-atlas-key{display:grid; grid-template-columns:minmax(230px,1.35fr) repeat(3,minmax(82px,.65fr)); gap:1rem;
  padding:.75rem 3.5rem .75rem 4.75rem; color:#6b7280; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border)}
.role-profile{position:relative; border-bottom:1px solid var(--border)}
.role-profile:last-child{border-bottom:0}
.role-profile summary{display:grid; grid-template-columns:3rem minmax(230px,1.35fr) minmax(310px,1.95fr) 3.5rem;
  gap:1rem; align-items:center; min-height:104px; padding:1rem 0; cursor:pointer; list-style:none}
.role-profile summary::-webkit-details-marker{display:none}
.role-trail-marker{position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; margin-left:10px;
  border:5px solid #fff; border-radius:50%; background:#eff6ff; color:var(--blue); font-size:.67rem; font-weight:700;
  box-shadow:0 0 0 1px #bfdbfe}
.role-profile-copy{display:grid; gap:.25rem}
.role-profile-copy strong{color:var(--headline); font-size:1rem}
.role-profile-copy>span{color:var(--muted-foreground); font-size:.82rem; line-height:1.4}
.role-fit-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.fit-metric{display:grid; gap:.38rem; min-width:0}
.fit-label{display:none; color:#6b7280; font-size:.68rem; font-weight:600}
.fit-track{height:6px; overflow:hidden; border-radius:999px; background:#e5e7eb}
.fit-track>span{display:block; height:100%; border-radius:inherit; background:var(--blue)}
.fit-track-inverse>span{background:#93a4bd}
.role-open-label{display:flex; justify-content:flex-end; gap:.35rem; color:var(--blue); font-size:.76rem; font-weight:600}
.role-open-label span{font-size:1rem; line-height:.8; transition:transform .18s cubic-bezier(.22,1,.36,1)}
.role-profile[open] .role-open-label span{transform:rotate(45deg)}
.role-profile>p{margin:0; padding:0 4.5rem 1.35rem; color:#374151; font-size:.92rem; line-height:1.55}
.role-profile summary:hover .role-profile-copy strong{color:var(--blue-hover)}

/* feed slot marker (Tier 2 pages, before data lands) */
.slot{border:1px dashed #b4c6e3; background:#f3f7ff; border-radius:var(--radius); padding:1rem 1.2rem;
  margin:1rem 0; font-size:0.85rem; color:#3b5b8c; font-family:ui-monospace,monospace}
.slot b{color:var(--blue-hover)}

/* CTA band: navy, like the footer */
.band{background:var(--navy); color:#fff; border-radius:calc(var(--radius) + 4px); padding:2.5rem; margin:3rem 0}
.band h2{margin-top:0; color:#fff} .band p{color:#a3aabf} .band .btn{background:var(--blue); color:#fff}
.band .btn:hover{background:var(--blue-hover)}

/* job sample + gate (Tier 3) */
.jobsample{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:1.5rem 0}
.jobrow{display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border); align-items:center}
.jobrow:last-of-type{border-bottom:none}
.jobrow .t{font-weight:600; color:var(--headline)} .jobrow .c{color:var(--muted-foreground); font-size:0.9rem}
.gate{background:var(--blue-tint); padding:1.4rem; text-align:center; border-top:1px solid #d6def0; color:var(--headline)}

/* job feed concept: one component for landing, guide embed, and empty states */
.concept-page{padding-bottom:3rem}
.concept-page>section>p{max-width:72ch; color:#374151; text-wrap:pretty}
.concept-notice{display:flex; align-items:flex-start; gap:1rem; margin-bottom:3.5rem; padding:1.1rem 1.25rem;
  border:1px solid #bfdbfe; border-radius:10px; background:#eff6ff}
.concept-notice strong{flex:none; color:var(--blue-hover); font-size:.88rem}
.concept-notice p{margin:0; color:#374151; font-size:.88rem; line-height:1.55}
.concept-section{margin-top:4.5rem; scroll-margin-top:90px}
.concept-section:first-of-type{margin-top:0}
.concept-step{display:inline-flex; align-items:center; min-height:30px; padding:.35rem .7rem; border-radius:999px;
  background:#eff6ff; color:var(--blue-hover); font-size:.75rem; font-weight:700}
.concept-section h2{max-width:24ch; margin:1rem 0 .75rem}

.job-preview{margin:1.75rem 0 0; overflow:hidden; border:1px solid #dbe3ef; border-radius:12px; background:#fff}
.job-preview-header{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:1rem; align-items:center;
  padding:1.25rem 1.35rem; border-bottom:1px solid #dbe3ef; background:#f8fbff}
.job-preview-mark{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#dbeafe; color:var(--blue)}
.job-preview-mark svg{width:22px; height:22px}
.job-preview-heading h3{margin:0; padding:0; color:var(--headline); font-size:1.12rem; letter-spacing:-.01em}
.job-preview-heading h3::before{display:none}
.job-preview-heading p{margin:.2rem 0 0; color:var(--muted-foreground); font-size:.85rem}
.feed-freshness{display:flex; align-items:center; gap:.45rem; color:#475569; font-size:.76rem; font-weight:600; white-space:nowrap}
.feed-status-dot{width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px #dcfce7}
.job-preview-list{background:#fff}
.job-preview-row{display:grid; grid-template-columns:minmax(0,1fr) auto 104px; gap:1.25rem; align-items:center;
  min-height:108px; padding:1rem 1.35rem; border-bottom:1px solid var(--border)}
.job-preview-row:last-child{border-bottom:0}
.job-preview-copy{display:grid; gap:.22rem; min-width:0}
.job-preview-copy>strong{overflow:hidden; color:var(--headline); font-size:.98rem; text-overflow:ellipsis; white-space:nowrap}
.job-preview-copy>span{color:var(--muted-foreground); font-size:.82rem}
.job-preview-signals{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.28rem}
.job-signal{display:inline-flex; align-items:center; min-height:24px; padding:.2rem .5rem; border-radius:999px;
  background:#f1f5f9; color:#475569; font-size:.68rem; font-weight:650}
.job-salary{background:#ecfdf5; color:#166534}
.job-signal-distinct{background:#eff6ff; color:var(--blue-hover)}
.job-preview-row time,.job-preview-date{color:#64748b; font-size:.76rem; white-space:nowrap}
.job-preview-action{display:inline-flex; align-items:center; justify-content:space-between; gap:.4rem; min-height:40px;
  padding:.5rem .7rem; border:1px solid #bfdbfe; border-radius:7px; color:var(--blue-hover); font-size:.78rem; font-weight:700}
.job-preview-action:hover{border-color:var(--blue); background:#eff6ff}
.job-preview-action:focus-visible{outline:3px solid rgba(37,99,235,.3); outline-offset:2px}
.job-preview-gate{display:flex; justify-content:space-between; align-items:center; gap:2rem; margin:0; padding:1.2rem 1.35rem;
  background:var(--navy)}
.job-preview-gate>div{display:grid; gap:.15rem}
.job-preview-gate strong{color:#fff; font-size:.9rem}
.job-preview-gate span{color:#aeb8d3; font-size:.78rem; line-height:1.45}
.job-preview-gate .btn{flex:none; min-height:42px; padding:.65rem 1rem; font-size:.82rem}
.job-preview-empty{display:flex; align-items:center; gap:1rem; min-height:150px; padding:1.5rem 1.35rem}
.job-preview-empty-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#f1f5f9; color:#94a3b8; flex:none}
.job-preview-empty-mark svg{width:21px; height:21px}
.job-preview-empty strong{color:var(--headline)}
.job-preview-empty p{max-width:62ch; margin:.2rem 0 0; color:var(--muted-foreground); font-size:.86rem}
.job-preview-embedded{max-width:920px; margin-inline:auto}
.job-preview-embedded .job-preview-row{min-height:96px}
.concept-guide-frame{margin-top:1.75rem; padding:1.35rem; border-radius:12px; background:#f8fafc}
.concept-guide-context{display:grid; gap:.15rem; max-width:920px; margin:0 auto 1rem}
.concept-guide-context strong{color:var(--headline); font-size:.82rem}
.concept-guide-context span{color:var(--muted-foreground); font-size:.76rem}
.feed-contract-wrap{max-width:100%; overflow-x:auto; margin-top:1.5rem}
.feed-contract{min-width:760px; margin:0}
.feed-contract code{color:var(--blue-hover); font-size:.82rem}
.feed-rules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.5rem; border-block:1px solid var(--border)}
.feed-rules>div{display:grid; grid-template-columns:84px minmax(0,1fr); gap:.75rem; padding:1rem 0}
.feed-rules>div:nth-child(odd){padding-right:1.25rem}
.feed-rules>div:nth-child(even){padding-left:1.25rem; border-left:1px solid var(--border)}
.feed-rules>div:nth-child(n+3){border-top:1px solid var(--border)}
.feed-rules strong{color:var(--headline); font-size:.82rem}
.feed-rules span{color:#4b5563; font-size:.8rem; line-height:1.5}

/* Search + category-page concept: product proof inside the marketing shell */
.search-concept-page .concept-section h2{max-width:27ch}
.search-concept{margin-top:1.75rem; overflow:hidden; border:1px solid #cbd7e7; border-radius:14px; background:#fff}
.search-concept-head{display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.35rem 1.5rem; background:var(--navy); color:#fff}
.search-concept-head>div{display:flex; align-items:center; gap:.85rem; min-width:0}
.search-concept-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--blue); color:#fff; flex:none}
.search-concept-mark svg{width:22px; height:22px}
.search-concept-head h3{margin:0; padding:0; color:#fff; font-size:1.18rem; letter-spacing:-.015em}
.search-concept-head h3::before{display:none}
.search-concept-head p{margin:.18rem 0 0; color:#cbd5e1; font-size:.8rem; line-height:1.45}
.search-sync{display:flex; align-items:center; gap:.5rem; color:#dbeafe; font-size:.75rem; font-weight:600; white-space:nowrap}
.search-sync i{width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.15)}

.job-search-form{display:grid; grid-template-columns:minmax(230px,1.45fr) repeat(3,minmax(135px,.8fr)); gap:.75rem;
  padding:1.25rem 1.5rem; border-bottom:1px solid #dbe3ef; background:#f8fbff}
.job-search-form label{display:grid; gap:.4rem; min-width:0}
.job-search-form label>span:first-child{color:#475569; font-size:.7rem; font-weight:700}
.job-search-input-wrap{position:relative; display:block}
.job-search-input-wrap svg{position:absolute; left:.8rem; top:50%; color:#64748b; transform:translateY(-50%); pointer-events:none}
.job-search-form input,.job-search-form select{width:100%; height:46px; border:1px solid #b8c6d9; border-radius:7px;
  background:#fff; color:var(--headline); font:inherit; font-size:.84rem; outline:none}
.job-search-form input{padding:.65rem .75rem .65rem 2.45rem}
.job-search-form select{padding:.65rem 2rem .65rem .75rem}
.job-search-form input::placeholder{color:#526174; opacity:1}
.job-search-form input:disabled,.job-search-form select:disabled{background:#f1f5f9; color:#64748b; cursor:not-allowed; opacity:1}
.job-search-form input:focus,.job-search-form select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.job-quick-filters{display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; padding:.8rem 1.5rem;
  border-bottom:1px solid #e5e7eb; background:#fff}
.job-quick-filters>span{margin-right:.15rem; color:#64748b; font-size:.72rem; font-weight:700}
.job-quick-filters button{min-height:32px; padding:.35rem .65rem; border:1px solid #d5deea; border-radius:999px;
  background:#fff; color:#334155; font:inherit; font-size:.72rem; font-weight:600; cursor:pointer}
.job-quick-filters button:hover{border-color:#93c5fd; background:#eff6ff; color:var(--blue-hover)}
.job-quick-filters button:disabled{border-color:#d5deea; background:#f8fafc; color:#64748b; cursor:not-allowed}
.job-quick-filters button:focus-visible,.clear-filters:focus-visible,.search-empty button:focus-visible{
  outline:3px solid rgba(37,99,235,.28); outline-offset:2px}

.search-results-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:64px;
  padding:.9rem 1.5rem; border-bottom:1px solid #e5e7eb}
.search-results-head>div{display:grid; gap:.1rem}
.search-results-head strong{color:var(--headline); font-size:.9rem}
.search-results-head span{color:#64748b; font-size:.72rem}
.search-results-head .static-preview-label{display:inline-flex; min-height:28px; align-items:center; padding:.25rem .6rem;
  border-radius:999px; background:#f1f5f9; color:#64748b; font-weight:700}
.clear-filters{padding:.45rem .1rem; border:0; background:transparent; color:var(--blue-hover); font:inherit;
  font-size:.76rem; font-weight:700; cursor:pointer}
.clear-filters:hover{text-decoration:underline; text-underline-offset:3px}

.search-job-row{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(210px,.7fr) 104px; gap:1.3rem;
  align-items:center; min-height:146px; padding:1.2rem 1.5rem; border-bottom:1px solid #e5e7eb}
.search-job-row[hidden]{display:none}
.search-job-main{min-width:0}
.search-job-titleline{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem}
.search-job-titleline h4{margin:0; color:var(--headline); font-size:1rem; line-height:1.35; letter-spacing:-.01em}
.source-badge{display:inline-flex; align-items:center; min-height:24px; padding:.2rem .5rem; border-radius:999px;
  background:#eff6ff; color:var(--blue-hover); font-size:.64rem; font-weight:700}
.search-job-main>p{margin:.3rem 0 0; color:#4b5563; font-size:.8rem}
.search-job-tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.65rem}
.search-job-tags span{display:inline-flex; align-items:center; min-height:25px; padding:.22rem .52rem; border-radius:999px;
  background:#f1f5f9; color:#465569; font-size:.67rem; font-weight:600}
.search-job-tags .search-job-salary{background:#ecfdf5; color:#166534}
.search-job-proof{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; margin:0}
.search-job-proof div{min-width:0}
.search-job-proof dt{color:#64748b; font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.055em}
.search-job-proof dd{margin:.12rem 0 0; color:#334155; font-size:.72rem; line-height:1.35}
.search-job-proof .company-source{grid-column:1/-1}
.company-source dd span{display:inline-flex; align-items:center; gap:.35rem; color:var(--blue-hover); font-weight:700}
.company-source svg{width:14px; height:14px}
.search-job-action{display:inline-flex; align-items:center; justify-content:space-between; gap:.45rem; min-height:42px;
  padding:.55rem .7rem; border:1px solid #bfdbfe; border-radius:7px; color:var(--blue-hover); font-size:.76rem; font-weight:700}
.search-job-action:hover{border-color:var(--blue); background:#eff6ff}
.search-job-action:focus-visible{outline:3px solid rgba(37,99,235,.28); outline-offset:2px}

.search-empty{display:flex; align-items:center; gap:1rem; min-height:184px; padding:1.5rem; border-bottom:1px solid #e5e7eb; background:#f8fafc}
.search-empty[hidden]{display:none}
.search-empty>span{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#dbeafe; color:var(--blue); flex:none}
.search-empty>span svg{width:23px; height:23px}
.search-empty>div{max-width:64ch}
.search-empty strong{color:var(--headline); font-size:.92rem}
.search-empty p{margin:.25rem 0 0; color:#4b5563; font-size:.8rem; line-height:1.55}
.search-empty button{margin-left:auto; min-height:40px; padding:.5rem .75rem; border:1px solid #bfdbfe; border-radius:7px;
  background:#fff; color:var(--blue-hover); font:inherit; font-size:.75rem; font-weight:700; cursor:pointer; flex:none}
.search-alert{display:flex; align-items:center; gap:.85rem; min-height:92px; padding:1rem 1.5rem; background:#eff6ff}
.search-alert-icon{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#dbeafe; color:var(--blue); flex:none}
.search-alert>div:nth-child(2){display:grid; gap:.12rem; margin-right:auto}
.search-alert strong{color:var(--headline); font-size:.88rem}
.search-alert span{color:#475569; font-size:.76rem; line-height:1.45}
.search-alert .btn{min-height:42px; padding:.65rem 1rem; font-size:.78rem; flex:none}

.route-system{display:grid; grid-template-columns:210px 72px minmax(0,1fr); align-items:center; margin-top:2rem}
.route-source{display:flex; align-items:center; gap:.75rem; min-height:88px; padding:1rem; border:1px solid #93c5fd;
  border-radius:10px; background:#eff6ff}
.route-source>span{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; flex:none}
.route-source>div{display:grid; gap:.18rem}
.route-source strong{color:var(--headline); font-size:.86rem}
.route-source small{color:#4b5563; font-size:.68rem; line-height:1.35}
.route-branch{position:relative; height:2px; background:#93c5fd}
.route-branch::after{content:""; position:absolute; top:50%; right:-4px; width:8px; height:8px; border-top:2px solid #60a5fa;
  border-right:2px solid #60a5fa; transform:translateY(-50%) rotate(45deg)}
.route-types{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #dbe3ef; border-radius:12px; overflow:hidden}
.route-types article{display:grid; align-content:start; gap:.42rem; min-height:142px; padding:1.1rem}
.route-types article:nth-child(even){border-left:1px solid #dbe3ef}
.route-types article:nth-child(n+3){border-top:1px solid #dbe3ef}
.route-types strong{color:var(--headline); font-size:.82rem}
.route-types code{color:var(--blue-hover); font-size:.72rem; overflow-wrap:anywhere}
.route-types span{color:#4b5563; font-size:.74rem; line-height:1.5}
.publish-gates{display:grid; grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr); gap:2rem; align-items:start;
  margin-top:2rem; padding:1.4rem 0; border-block:1px solid #dbe3ef}
.publish-gates h3{margin:0; padding:0; font-size:1.1rem}
.publish-gates h3::before{display:none}
.publish-gates ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; margin:0; padding:0; list-style:none}
.publish-gates li{display:grid; gap:.2rem; margin:0; padding:.8rem 0; border-top:1px solid #e5e7eb}
.publish-gates li:nth-child(-n+2){border-top:0; padding-top:0}
.publish-gates li span{color:var(--blue-hover); font-size:.67rem; font-weight:700}
.publish-gates li strong{color:#334155; font-size:.76rem; line-height:1.45}

/* Representative generated role page */
.category-concept-page{padding-bottom:4rem}
.category-proof{display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:2.5rem; align-items:center;
  margin-bottom:4.5rem; padding:1.45rem 0; border-block:1px solid #dbe3ef}
.category-proof-copy h2{margin:0; font-size:1.25rem; letter-spacing:-.02em}
.category-proof-copy p{margin:.35rem 0 0; color:#4b5563; font-size:.82rem; line-height:1.5}
.category-proof dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; margin:0}
.category-proof dl>div{display:grid; gap:.15rem; padding:.65rem 0; border-top:1px solid #e5e7eb}
.category-proof dl>div:nth-child(-n+2){border-top:0}
.category-proof dt{color:#64748b; font-size:.67rem; font-weight:700}
.category-proof dd{margin:0; color:var(--headline); font-size:.84rem; font-weight:700}
.category-jobs{margin-top:0}
.category-jobs>h2,.title-search-intro h2,.category-signals h2,.related-category-guides h2{max-width:25ch; margin-top:0}

.title-search-section{display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:3rem; align-items:start}
.title-search-intro p{max-width:58ch; color:#374151; text-wrap:pretty}
.title-search-intro>a{display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; color:var(--blue-hover);
  font-size:.84rem; font-weight:700}
.title-search-intro>a:hover span{transform:translateX(2px)}
.title-search-intro>a span{transition:transform .16s cubic-bezier(.22,1,.36,1)}
.pm-title-bands{border-block:1px solid #dbe3ef}
.pm-title-bands>div{display:grid; grid-template-columns:120px minmax(150px,.8fr) minmax(0,1.2fr); gap:1rem; align-items:center;
  min-height:84px; padding:.85rem 0; border-bottom:1px solid #e5e7eb}
.pm-title-bands>div:last-child{border-bottom:0}
.pm-title-bands span{color:var(--blue-hover); font-size:.68rem; font-weight:700}
.pm-title-bands strong{color:var(--headline); font-size:.86rem}
.pm-title-bands small{color:#4b5563; font-size:.74rem; line-height:1.45}

.category-signals{display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:3rem; align-items:start;
  padding:2rem; border-radius:12px; background:var(--navy); color:#fff}
.category-signals h2{color:#fff}
.category-signals p{max-width:55ch; color:#c8cee1; text-wrap:pretty}
.category-signal-ledger{border-top:1px solid rgba(255,255,255,.18)}
.category-signal-ledger>div{display:grid; grid-template-columns:110px minmax(135px,.8fr) minmax(0,1fr); gap:1rem;
  align-items:baseline; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.18)}
.category-signal-ledger span{color:#93c5fd; font-size:.67rem; font-weight:700}
.category-signal-ledger strong{color:#fff; font-size:.82rem}
.category-signal-ledger small{color:#c8cee1; font-size:.72rem; line-height:1.45}

.related-category-guides{display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); gap:3rem; align-items:start;
  margin-top:4.5rem; padding-block:1.5rem; border-block:1px solid #dbe3ef}
.related-category-guides>div p{max-width:48ch; color:#4b5563; font-size:.88rem}
.related-category-guides nav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.related-category-guides nav a{display:grid; gap:.2rem; min-height:86px; padding:1rem; border-bottom:1px solid #e5e7eb}
.related-category-guides nav a:nth-child(even){border-left:1px solid #e5e7eb}
.related-category-guides nav a:nth-child(n+3){border-bottom:0}
.related-category-guides nav a:hover{background:#f8fbff}
.related-category-guides nav span{color:var(--headline); font-size:.84rem; font-weight:700}
.related-category-guides nav small{color:#4b5563; font-size:.72rem; line-height:1.45}

.category-developer-note{margin-top:2rem; border:1px solid #bfdbfe; border-radius:10px; background:#f8fbff}
.category-developer-note summary{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:58px;
  padding:.8rem 1rem; color:var(--blue-hover); font-size:.82rem; font-weight:700; cursor:pointer; list-style:none}
.category-developer-note summary::-webkit-details-marker{display:none}
.category-developer-note summary::after{content:"+"; color:var(--blue); font-size:1rem}
.category-developer-note[open] summary::after{content:"−"}
.category-developer-note>div{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.5rem;
  padding:0 1rem 1rem; border-top:1px solid #dbeafe}
.category-developer-note p{margin:.8rem 0 0; color:#374151; font-size:.76rem; line-height:1.5}
.category-developer-note code{color:var(--blue-hover)}

@media(max-width:900px){
  .job-search-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search-job-row{grid-template-columns:minmax(0,1fr) minmax(190px,.65fr)}
  .search-job-action{grid-column:2; justify-self:start; min-width:104px}
  .route-system{grid-template-columns:180px 48px minmax(0,1fr)}
  .category-proof,.title-search-section,.category-signals,.related-category-guides{grid-template-columns:1fr; gap:1.5rem}
}

@media(max-width:700px){
  .search-concept-head{align-items:flex-start; flex-direction:column; gap:.9rem; padding:1.15rem}
  .search-sync{white-space:normal}
  .job-search-form{grid-template-columns:1fr; padding:1rem}
  .job-quick-filters,.search-results-head{padding-inline:1rem}
  .search-job-row{grid-template-columns:1fr; gap:.85rem; min-height:0; padding:1.15rem 1rem}
  .search-job-proof{grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:.2rem}
  .search-job-action{grid-column:1; justify-self:stretch; justify-content:center}
  .search-alert{align-items:flex-start; flex-wrap:wrap; padding:1.15rem 1rem}
  .search-alert>div:nth-child(2){width:calc(100% - 58px)}
  .search-alert .btn{width:100%; justify-content:center}
  .search-empty{align-items:flex-start; flex-wrap:wrap; padding:1.25rem 1rem}
  .search-empty>div{width:calc(100% - 62px)}
  .search-empty button{width:100%; margin-left:0}
  .route-system{grid-template-columns:1fr; gap:1rem}
  .route-source{min-height:0}
  .route-branch{width:2px; height:30px; margin:-1rem 0 -1rem 32px}
  .route-branch::after{top:auto; right:auto; bottom:-3px; left:50%; transform:translateX(-50%) rotate(135deg)}
  .route-types{grid-template-columns:1fr}
  .route-types article{min-height:0}
  .route-types article:nth-child(even){border-left:0}
  .route-types article+article{border-top:1px solid #dbe3ef}
  .publish-gates{grid-template-columns:1fr; gap:1.25rem}
  .publish-gates ol{grid-template-columns:1fr}
  .publish-gates li:nth-child(2){border-top:1px solid #e5e7eb; padding-top:.8rem}
  .category-proof{margin-bottom:3.75rem}
  .category-proof dl{grid-template-columns:1fr}
  .category-proof dl>div:nth-child(2){border-top:1px solid #e5e7eb}
  .pm-title-bands>div{grid-template-columns:1fr; gap:.2rem; min-height:0; padding:1rem 0}
  .category-signals{padding:1.35rem}
  .category-signal-ledger>div{grid-template-columns:1fr; gap:.2rem}
  .related-category-guides nav{grid-template-columns:1fr}
  .related-category-guides nav a:nth-child(even){border-left:0}
  .related-category-guides nav a:nth-child(n+3){border-bottom:1px solid #e5e7eb}
  .related-category-guides nav a:last-child{border-bottom:0}
  .category-developer-note>div{grid-template-columns:1fr; gap:0}
}

@media(prefers-reduced-motion:reduce){
  .job-search-form input,.job-search-form select,.job-quick-filters button,.search-job-action,.title-search-intro>a span{transition:none}
}

/* testimonials: cards near the CTA, stars in yellow-500 like their homepage */
.testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.5rem 0}
.tcard{border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; background:#fff;
  box-shadow:0 1px 3px rgba(9,14,52,0.06)}
.tcard .stars{color:#eab308; font-size:1rem; letter-spacing:2px}
.tcard .quote{font-size:0.98rem; margin:0.7rem 0 1rem}
.tcard .who{display:flex; align-items:center; gap:0.7rem}
.tcard .who .av{width:36px; height:36px; border-radius:9999px; background:var(--blue-tint);
  color:var(--blue-hover); display:grid; place-items:center; font-weight:700; font-size:0.85rem; flex:none}
.tcard .who .n{font-weight:600; font-size:0.9rem; color:var(--headline); display:block}
.tcard .who .r{color:var(--muted-foreground); font-size:0.8rem}
.tcard .when{margin-left:auto; color:var(--muted-foreground); font-size:0.78rem; white-space:nowrap}

/* footer: deep navy, white, like their site footer */
footer{background:var(--navy); margin-top:3rem; padding:2.5rem 0 1.5rem}
footer, footer a{color:#a3aabf; font-size:0.88rem}
footer a:hover{color:#fff}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:center}
footer .wrap.fgrid{display:grid; grid-template-columns:1.6fr 1.05fr 1.15fr 1fr 1.15fr; gap:1.75rem; align-items:start; padding-bottom:1.5rem}
.fcol{display:flex; flex-direction:column; gap:0.35rem; align-items:flex-start}
.fh{color:#fff; font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem}
.fbrand p{color:#7c8399; font-size:0.85rem; margin:0.6rem 0 0; max-width:30ch}
.flegal{border-top:1px solid rgba(255,255,255,0.12); padding-top:1rem; margin-top:0.5rem}
footer .brand{color:#fff; display:flex; align-items:center; gap:0.5rem; font-weight:800; font-size:1rem}
footer .brand .logo{width:26px; height:26px; padding:3px}

@media(max-width:960px){
  footer .wrap.fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem}
  footer .fbrand{grid-column:1/-1}
}

/* hub directory (guide cards v2) */
.skick{font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); margin-bottom:0.45rem}
.ghead{margin-bottom:0}
.ghead::after{content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--blue); margin-top:0.75rem}
.gsub{color:var(--muted-foreground); margin-top:0.9rem; font-size:0.98rem}
.tintband{background:var(--blue-tint); border-top:1px solid #e4ecfa; border-bottom:1px solid #e4ecfa; margin-top:3rem; padding:0.5rem 0 3rem}
.tintband .content{padding-top:2.5rem}
.ghrow{display:flex; justify-content:space-between; align-items:flex-start; gap:2rem}
.gdeco{width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid #dbe6f8; color:var(--blue-hover);
  display:grid; place-items:center; flex:none}
.gdeco svg{width:22px; height:22px}
.guides{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin:1.4rem 0 0}
.gcard{display:flex; flex-direction:column; align-items:flex-start; border:1px solid #e2e8f4; border-radius:var(--radius);
  padding:1.4rem; background:#fff; box-shadow:0 1px 3px rgba(9,14,52,0.06);
  transition:border-color .15s, transform .15s}
.gcard:hover{border-color:var(--blue); transform:translateY(-2px)}
.gcard .gnum{font-size:0.76rem; font-weight:700; color:#9aa7c7; letter-spacing:0.08em}
.gcard .gicon{width:44px; height:44px; border-radius:12px; background:var(--blue-tint); color:var(--blue-hover);
  display:grid; place-items:center; margin-bottom:0.8rem}
.gcard:hover .gicon{background:var(--blue); color:#fff}
.gcard .gicon svg{width:22px; height:22px}
.gcard .gt{font-weight:700; color:var(--headline); font-size:1.04rem; line-height:1.3; margin-top:0.35rem}
.gcard .gd{color:var(--muted-foreground); font-size:0.88rem; line-height:1.5; margin-top:0.35rem}
.gcard .go{color:var(--blue); font-size:0.86rem; font-weight:600; margin-top:0.8rem}
.gcard.gwide{flex-direction:row; align-items:center; gap:1.5rem; flex-wrap:wrap}
.gcard.gwide .gbody{flex:1; min-width:240px}
.gcard.gwide .gt{margin-top:0}

/* FAQ: native disclosure with the same quiet blue trail language */
.faq-section{margin-top:3rem}
.faq-section h2{margin:0 0 1.1rem}
.faq-list{border-block:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{display:grid; grid-template-columns:minmax(0,1fr) 2.25rem; gap:1rem; align-items:center;
  min-height:64px; padding:.85rem 0; color:var(--headline); cursor:pointer; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-question{font-size:1rem; line-height:1.45; font-weight:650; text-wrap:pretty}
.faq-toggle{position:relative; display:grid; place-items:center; width:32px; height:32px; justify-self:end;
  border-radius:50%; background:#eff6ff; color:var(--blue); transition:background .18s cubic-bezier(.22,1,.36,1)}
.faq-toggle::before,.faq-toggle::after{content:""; position:absolute; width:12px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .18s cubic-bezier(.22,1,.36,1),opacity .18s ease}
.faq-toggle::after{transform:rotate(90deg)}
.faq-item summary:hover .faq-question{color:var(--blue-hover)}
.faq-item summary:hover .faq-toggle{background:#dbeafe}
.faq-item summary:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:4px; border-radius:4px}
.faq-item[open] .faq-toggle{background:var(--blue); color:#fff}
.faq-item[open] .faq-toggle::after{opacity:0; transform:rotate(90deg) scaleX(.2)}
.faq-answer{max-width:68ch; padding:.25rem 3.25rem 1.25rem 0}
.faq-answer p{margin:0; color:#374151; line-height:1.65; text-wrap:pretty}

/* Project manager topic cluster: compact trail navigation and evidence layouts */
.pm-guide-trail{margin:0 0 2.25rem; padding:0 0 1.5rem; border-bottom:1px solid var(--border)}
.pm-guide-trail-head{display:flex; align-items:center; gap:.75rem; margin-bottom:1rem}
.pm-guide-trail-head>svg{width:25px; height:25px; padding:4px; border-radius:50%;
  background:#eff6ff; color:var(--blue); flex:none}
.pm-guide-trail-head>div{display:grid; gap:.08rem}
.pm-guide-trail-head strong{color:var(--headline); font-size:.96rem}
.pm-guide-trail-head span{color:var(--muted-foreground); font-size:.82rem}
.pm-guide-trail ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem .75rem;
  margin:0; padding:0; list-style:none}
.pm-guide-trail li{margin:0}
.pm-guide-trail a{display:grid; grid-template-columns:12px minmax(0,1fr); gap:.65rem; align-items:start;
  min-height:62px; padding:.65rem .75rem; border-radius:8px; transition:background .16s ease,color .16s ease}
.pm-guide-trail a:hover{background:#f8fafc}
.pm-guide-trail a:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:2px}
.pm-guide-trail a.is-current{background:#eff6ff}
.pm-guide-dot{width:9px; height:9px; margin-top:.32rem; border:2px solid #93c5fd; border-radius:50%; background:#fff}
.pm-guide-trail a.is-current .pm-guide-dot{border-color:var(--blue); background:var(--blue)}
.pm-guide-trail a>span:last-child{display:grid; gap:.12rem}
.pm-guide-trail a strong{color:var(--headline); font-size:.88rem; line-height:1.35}
.pm-guide-trail a small{color:var(--muted-foreground); font-size:.76rem; line-height:1.4}
.answer-first{margin-top:0}
.source-note{color:#4b5563; font-size:.84rem; line-height:1.55}
.source-note a,.primary-sources a,.content .col>p a{color:var(--blue-hover); text-decoration:underline;
  text-decoration-color:#bfdbfe; text-underline-offset:3px}
.source-note a:hover,.primary-sources a:hover,.content .col>p a:hover{text-decoration-color:var(--blue-hover)}
.evidence-table td:first-child{min-width:145px}
.signal-list{margin:1.5rem 0 2.5rem; border-block:1px solid var(--border)}
.signal-list>div{display:grid; grid-template-columns:minmax(150px,.75fr) minmax(0,1.8fr); gap:1.25rem;
  margin:0; padding:1rem 0; border-bottom:1px solid var(--border)}
.signal-list>div:last-child{border-bottom:0}
.signal-list strong{color:var(--headline); font-size:.92rem}
.signal-list span{color:#374151; font-size:.9rem; line-height:1.55}
.cert-map{margin:1.5rem 0 2.5rem; border-block:1px solid var(--border)}
.cert-map section{display:grid; grid-template-columns:minmax(180px,.9fr) minmax(280px,1.35fr);
  gap:.6rem 1.5rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--border)}
.cert-map section:last-child{border-bottom:0}
.cert-map-label{display:grid; gap:.2rem}
.cert-map-label strong{color:var(--headline); font-size:.96rem}
.cert-map-label span,.cert-map section>p{color:var(--muted-foreground); font-size:.78rem; line-height:1.45}
.cert-map-route{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem}
.cert-map-route span{display:inline-flex; align-items:center; min-height:34px; padding:.42rem .72rem;
  border:1px solid #bfdbfe; border-radius:999px; background:#f8fbff; color:var(--blue-hover);
  font-size:.82rem; font-weight:700}
.cert-map-route b{color:#93a4bd; font-size:.9rem}
.cert-map section>p{grid-column:2; margin:0}
.primary-sources{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.5rem;
  margin:1rem 0 2rem; padding-left:1.2rem}
.primary-sources li{margin:0; padding-left:.15rem}

/* section h3 marker (all content pages) */
.content h3{position:relative; padding-left:0.95rem}
.content h3::before{content:""; position:absolute; left:0; top:0.42em; width:4px; height:1em;
  background:var(--blue); border-radius:2px}

@media(max-width:640px){
  .hero.has-breadcrumbs{padding-top:2rem}
  .breadcrumbs{margin-bottom:1.35rem}
  .breadcrumbs li:first-child{display:none}
  .breadcrumbs li:nth-child(2)::before{display:none}
  .rung{grid-template-columns:1fr; gap:.45rem; padding-left:3.2rem} .jobrow{grid-template-columns:1fr}
  footer .wrap.fgrid{grid-template-columns:1fr; gap:1.25rem}
  table.cmp{display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  table.cmp th,table.cmp td{min-width:9rem}
  table.cmp th:first-child,table.cmp td:first-child{min-width:7rem}
}

@media(max-width:760px){
  .concept-page{padding-top:2.25rem}
  .concept-notice{display:grid; gap:.35rem; margin-bottom:3rem}
  .concept-section{margin-top:3.75rem}
  .concept-guide-frame{padding:.75rem}
  .job-preview-header{grid-template-columns:40px minmax(0,1fr); gap:.85rem; align-items:start; padding:1rem}
  .job-preview-mark{width:40px; height:40px}
  .feed-freshness{grid-column:1/-1; white-space:normal; padding-left:.1rem}
  .job-preview-row{grid-template-columns:minmax(0,1fr) auto; gap:.7rem 1rem; min-height:0; padding:1rem}
  .job-preview-copy{grid-column:1/-1}
  .job-preview-copy>strong{overflow:visible; text-overflow:clip; white-space:normal}
  .job-preview-row time,.job-preview-date{align-self:center}
  .job-preview-action{min-width:104px}
  .job-preview-gate{align-items:stretch; flex-direction:column; gap:1rem; padding:1.1rem 1rem}
  .job-preview-gate .btn{width:100%; justify-content:center}
  .job-preview-empty{align-items:flex-start; padding:1.25rem 1rem}
  .feed-rules{grid-template-columns:1fr}
  .feed-rules>div,.feed-rules>div:nth-child(odd),.feed-rules>div:nth-child(even){padding:1rem 0; border-left:0}
  .feed-rules>div+div{border-top:1px solid var(--border)}
  .trail-guide{padding:1.35rem}
  .trail-steps{grid-template-columns:1fr; gap:1rem}
  .trail-steps::before{left:18px; right:auto; top:18px; bottom:18px; width:2px; height:auto}
  .trail-stop{min-height:64px; padding:0 0 0 3.25rem}
  .source-flow{padding:1.35rem}
  .source-flow-head{grid-template-columns:1fr; gap:.75rem}
  .source-flow-path{grid-template-columns:1fr; gap:1rem}
  .source-node{min-height:70px; padding:0 0 0 3.25rem}
  .source-node:not(:last-child)::after{left:18px; right:auto; top:38px; bottom:-16px; width:2px; height:auto}
  .search-recipes{grid-template-columns:1fr}
  .eligibility-compass{padding:1.35rem}
  .compass-map{grid-template-columns:1fr; justify-items:center; gap:1.25rem}
  .compass-map ol{grid-template-columns:1fr; width:100%}
  .compass-map li{min-height:58px}
  .playbook-trail{padding:1.35rem}
  .playbook-trail ol{grid-template-columns:1fr}
  .playbook-trail li,.playbook-trail li:nth-last-child(-n+2){border-bottom:1px solid #e5edf8}
  .playbook-trail li:last-child{border-bottom:0}
  .playbook-trail li:nth-child(odd){border-right:0}
  .playbook-trail a{min-height:82px; padding:.9rem .35rem}
  .search-brief dl{grid-template-columns:1fr}
  .search-brief dl>div,.search-brief dl>div:nth-child(odd),.search-brief dl>div:nth-last-child(-n+2){border-right:0; border-bottom:1px solid var(--border)}
  .search-brief dl>div:last-child{border-bottom:0}
  .weekly-loop>div{grid-template-columns:1fr; gap:.3rem}
  .role-atlas::before{left:20px; top:2rem}
  .role-atlas-key{display:none}
  .role-profile summary{grid-template-columns:2.5rem 1fr; gap:.75rem; padding:1rem 0}
  .role-trail-marker{width:30px; height:30px; margin-left:5px; border-width:4px}
  .role-fit-metrics{grid-column:2; gap:.55rem}
  .fit-label{display:block}
  .role-open-label{grid-column:2; justify-content:flex-start}
  .role-profile>p{padding:0 0 1.25rem 3.25rem}
  .faq-item summary{min-height:60px; gap:.75rem; padding:.8rem 0}
  .faq-answer{padding:.3rem 2.75rem 1.15rem 0}
  .pm-guide-trail ul{grid-template-columns:1fr}
  .signal-list>div{grid-template-columns:1fr; gap:.3rem}
  .cert-map section{grid-template-columns:1fr; gap:.8rem}
  .cert-map section>p{grid-column:1}
  .primary-sources{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .breadcrumbs a,.faq-toggle,.faq-toggle::before,.faq-toggle::after,.pm-guide-trail a{transition:none}
}

@media(max-width:720px){
  header{box-shadow:0 1px 0 rgba(20,32,51,.06)}
  .nav{height:68px}
  .brand{font-size:1.02rem}
  .brand .logo{width:29px; height:29px}
  .desktop-nav-link,.header-signin,.desktop-menu-label,.mega-chevron{display:none}
  .mobile-menu-label,.menu-glyph{display:inline-flex}
  .mega-toggle{min-height:44px; gap:.55rem; padding:.6rem .75rem; background:#eff6ff; color:var(--headline)}
  .menu-glyph{width:18px; height:14px; flex-direction:column; justify-content:center; gap:5px}
  .menu-glyph span{display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
    transform-origin:center; transition:transform .2s cubic-bezier(.22,1,.36,1)}
  .site-header:has(.mega-menu:popover-open) .mega-toggle{background:var(--blue); color:#fff}
  .site-header:has(.mega-menu:popover-open) .menu-glyph span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .site-header:has(.mega-menu:popover-open) .menu-glyph span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mega-menu{position:fixed; top:78px; left:12px; right:12px; width:auto; max-height:calc(100vh - 90px);
    margin:0; transform:none; border-radius:14px; box-shadow:0 18px 44px rgba(9,14,52,.2)}
  .mega-topline{align-items:flex-start; padding:1rem 1rem .85rem}
  .mega-topline>div{display:block}
  .mega-topline>div span{display:none}
  .mega-topline>a{display:inline-flex; align-items:center; min-height:42px; padding:.45rem .25rem; font-size:.82rem}
  .mega-grid{grid-template-columns:1fr; padding:.85rem 1rem .65rem}
  .mega-group{padding:.65rem 0}
  .mega-group+.mega-group{border-left:0; border-top:1px solid #e9edf4}
  .mega-rich-link{display:flex; flex-direction:column; justify-content:center; min-height:42px; padding:.5rem .55rem}
  .mega-rich-link small{display:none}
  .mega-role-links{gap:.12rem .3rem}
  .mega-role-links a{min-height:42px; padding:.45rem .55rem; font-size:.84rem}
  .mega-role-subgroup{margin-top:.45rem; padding-top:.55rem}
  .mega-subheading{padding:0 .55rem}
  .mega-mobile-actions{display:grid; grid-template-columns:1fr 1fr; gap:.45rem; padding:.8rem 1rem 1rem;
    border-top:1px solid #e9edf4}
  .mega-mobile-actions a{display:flex; align-items:center; min-height:42px; padding:.55rem .65rem;
    border-radius:8px; background:#f8fafc; color:#334155; font-size:.84rem; font-weight:600}
  .mega-mobile-actions .mega-mobile-signin{grid-column:1/-1; justify-content:center; background:var(--blue); color:#fff}
}

@media(prefers-reduced-motion:reduce){
  .mega-toggle,.mega-chevron,.menu-glyph span,.mega-role-links a span,.role-open-label span{transition:none}
}

/* ============================================================
   Hub page (remote/index.html), directory restyle 2026-08-19.
   Everything here is scoped to body.hub so guide pages keep the
   base system above. Structure from the approved mock; colors
   aligned to the live main site (verified 2026-08-19): brand
   blue-600 #2563eb, hover blue-700 #1d4ed8, headline navy
   #142033, tints blue-50/100/200, and Inter throughout.
   ============================================================ */
.hub{
  --h-primary:#2563eb; --h-primary-dim:#1d4ed8;
  --h-ink:#142033; --h-gray:#4b5563; --h-num:#4b5563;
  --h-bg:#fff; --h-tint:#eff6ff; --h-tint-mid:#dbeafe; --h-tint-deep:#bfdbfe;
  --h-outline:#c3c6d7;
  background:var(--h-bg); color:var(--h-gray); font-size:1rem;
}
.hub h1,.hub h2,.hub h3,.hub .stat .num,.hub .gcard .gt{
  color:var(--h-ink)}
.hub .hero h1{color:#fff; font-weight:700; line-height:1.2; letter-spacing:normal}

/* nav: text brand in primary, sign in as a link not a button */
.hub .nav .brand{color:var(--h-primary); font-weight:800}
.hub .desktop-nav-link,.hub .mega-toggle{color:var(--h-gray)}
.hub .desktop-nav-link:hover,.hub .mega-toggle:hover{color:var(--h-primary)}

/* hero: deep blue band with the dot pattern and white text */
.hub .hero{position:relative; overflow:hidden; background:var(--h-primary); padding:5.5rem 0 7.5rem}
.hub .hero::before{content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,#fff 1px,transparent 0); background-size:32px 32px}
.hub .hero .wrap{position:relative}
.hub .hero h1{font-size:clamp(2rem,5vw,3rem)}
.hub .hero .lede{color:#fff; font-size:1.125rem; font-weight:500; line-height:1.44}
.hub .hero .btn{background:#fff; color:var(--h-primary)}
.hub .hero .btn:hover{background:var(--h-tint)}
.hub .hero .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.hub .hero .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* stat cards overlapping the hero, centered, big display number */
.hub .stats{margin:-3.25rem auto 0; gap:1rem; position:relative; z-index:2}
.hub .stat{text-align:center; display:flex; flex-direction:column; align-items:center;
  padding:2rem 1.5rem; border-color:rgba(195,198,215,.45); border-radius:.75rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05)}
.hub .stat .num{font-size:3rem; font-weight:700; line-height:1.2; letter-spacing:normal; color:var(--h-primary)}
.hub .stat .label{color:var(--h-ink); font-weight:600; font-size:1.2rem; margin-top:.6rem; line-height:1.4}
.hub .stat .desc{color:var(--h-gray); font-size:.9rem; margin-top:.5rem; line-height:1.5; max-width:32ch}

/* section headers: mono caps pill, h2 with primary bar */
.hub .skick{display:inline-block; font-weight:600;
  letter-spacing:.12em; font-size:.7rem; color:var(--h-primary); background:var(--h-tint);
  border-radius:9999px; padding:.4rem .85rem; margin-bottom:.8rem}
.hub .ghead{font-size:2.25rem; font-weight:600; letter-spacing:-.025em; margin:0}
.hub .ghead::after{width:64px; height:4px; margin-top:.7rem}
.hub .gsub{font-size:1rem; margin-top:.9rem; max-width:56ch}

/* guide cards: airy white cards, free floating icon, mono number */
.hub .guides{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; margin-top:1.75rem}
.hub .content .guides{grid-template-columns:repeat(2,1fr)} /* essentials and career fits: exact pairs */
.hub .gcard{padding:2rem; border:1px solid rgba(195,198,215,.45); border-radius:.75rem; background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.05); transition:border-color .15s}
.hub .gcard:hover{border-color:rgba(37,99,235,.5); transform:none}
.hub .gcard:hover .gt{color:var(--h-primary)}
.hub .gcard .gicon{width:auto; height:auto; background:none; border:none; margin:0 0 1rem;
  color:var(--h-outline); display:block}
.hub .gcard:hover .gicon{background:none; color:var(--h-primary)}
.hub .gcard .gicon svg{width:34px; height:34px}
.hub .gcard .gnum{font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--h-num)}
.hub .gcard .gt{font-size:1.22rem; font-weight:600; margin-top:.45rem; line-height:1.35}
.hub .gcard .gd{font-size:.95rem; margin-top:.45rem}
.hub .gcard .go{color:var(--h-primary); font-size:.95rem; font-weight:600; margin-top:1.4rem}
.hub .gcard .go .arr{display:inline-block; margin-left:.2rem; transition:transform .15s}
.hub .gcard:hover .go .arr{transform:translateX(3px)}

/* directory: rounded tinted container instead of the full-bleed band */
.hub .dirbox{background:var(--h-tint); border-radius:.75rem; padding:2.5rem 2rem 2.5rem; margin-top:3rem}
.hub .dirbox .skick{background:var(--h-tint-deep)}
.hub .dirbox .ghrow{align-items:flex-end}
.hub .dirbox .gdeco{background:none; border:none; color:rgba(37,99,235,.22)}
.hub .dirbox .gdeco svg{width:56px; height:56px}
.hub .dirbox .gcard{padding:1.5rem; border-color:rgba(195,198,215,.3); border-radius:.5rem;
  box-shadow:0 1px 3px rgba(15,23,42,.04)}
.hub .dirbox .gcard:hover{box-shadow:0 10px 30px rgba(15,23,42,.07)}
.hub .dirbox .gcard .gt{font-size:1.1rem}
.hub .dirbox .gcard .gd{font-size:.9rem}
.hub .gcard.gwide{margin-top:1.5rem; padding:1.5rem; border-radius:.5rem;
  box-shadow:0 1px 3px rgba(15,23,42,.04)}
.hub .gcard.gwide .gt{margin-top:0}
.hub .gcard.gwide .go{background:var(--h-tint-mid); border-radius:.5rem; padding:.65rem 1.1rem;
  margin-top:0; white-space:nowrap}
.hub .gcard.gwide:hover .go{background:var(--h-tint-deep)}

/* CTA band + shared dark footer */
.hub .band{border-radius:.75rem}
.hub .band h2{color:#fff}
.hub footer{margin-top:4rem}

@media(max-width:640px){
  .hub .hero{text-align:center}
  .hub .hero-cta{justify-content:center}
  .hub .stat .num{font-size:2.5rem}
  .hub .dirbox{padding:2rem 1.25rem}
  .hub .content .guides{grid-template-columns:1fr}
}

@media(max-width:720px){
  .hub .site-header:has(.mega-menu:popover-open) .mega-toggle{color:#fff}
}

/* Homepage trailheads and editorial directories. */
.hub .trailhead-wrap{position:relative; z-index:2; margin-top:-3.4rem; scroll-margin-top:90px}
.hub .trailheads{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden;
  border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.12)}
.hub .trailheads>a{display:grid; align-content:start; gap:.55rem; min-height:196px; padding:4rem 1.6rem 1.6rem;
  border-right:1px solid #e2e8f0; color:var(--h-gray); transition:background-color .16s ease}
.hub .trailheads>a:last-child{border-right:0}
.hub .trailheads>a:hover{background:var(--h-tint)}
.hub .trailheads>a:focus-visible{outline:3px solid var(--h-primary); outline-offset:-4px}
.hub .trailhead-name{color:var(--h-ink); font-size:1.22rem; font-weight:750; line-height:1.3}
.hub .trailheads>a>span:nth-child(2){max-width:30ch; font-size:.92rem; line-height:1.5}
.hub .trailheads strong{align-self:end; margin-top:.55rem; color:var(--h-primary); font-size:.9rem}
.hub .trailheads strong span,.hub .guide-list>a>span:last-child{display:inline-block; transition:transform .16s ease}
.hub .trailheads>a:hover strong span,.hub .guide-list>a:hover>span:last-child{transform:translateX(4px)}
.hub .trail-route{position:absolute; top:0; left:0; right:0; height:48px; pointer-events:none}
.hub .trail-route-line{position:absolute; top:25px; left:15%; right:15%; height:1px; background:var(--h-tint-deep)}
.hub .trail-paw{position:absolute; top:10px; left:calc(50% - 15px); display:grid; width:30px; height:30px;
  place-items:center; border-radius:50%; background:var(--h-primary); box-shadow:0 0 0 6px #fff}
.hub .trail-paw svg{width:19px; height:19px; fill:#fff}

.hub .hub-section{padding-top:4.75rem; scroll-margin-top:90px}
.hub .hub-section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-bottom:1.25rem; border-bottom:1px solid #dbe3ef}
.hub .hub-section-head h2{margin:0; font-size:clamp(1.9rem,4vw,2.45rem); letter-spacing:-.035em; line-height:1.15}
.hub .hub-section-head p{max-width:65ch; margin:.7rem 0 0; color:var(--h-gray); line-height:1.65}
.hub .hub-section-head>span{flex:none; padding-bottom:.18rem; color:var(--h-primary); font-size:.83rem; font-weight:750}

.hub .field-note{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:1.4rem; align-items:start;
  margin:2rem 0 .6rem; padding:2rem; border-radius:12px; background:var(--h-ink); color:#fff}
.hub .field-note-mark{display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:var(--h-primary); color:#fff}
.hub .field-note-mark svg{width:25px; height:25px}
.hub .field-note-copy>span{color:#93c5fd; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.hub .field-note h3{margin:.4rem 0 .55rem; color:#fff; font-size:1.35rem; line-height:1.3}
.hub .field-note p{max-width:64ch; margin:0; color:#dbe5f5; font-size:.94rem; line-height:1.6}
.hub .field-note-actions{display:grid; justify-items:start; gap:.85rem; min-width:12.8rem}
.hub .field-note .btn{width:100%; min-height:46px; background:#fff; color:var(--h-primary)}
.hub .field-note .btn:hover{background:var(--h-tint)}
.hub .field-note-actions>a:last-child{color:#bfdbfe; font-size:.84rem; font-weight:700}
.hub .field-note-actions>a:last-child:hover{color:#fff}

.hub .guide-list{display:grid; margin-top:1rem}
.hub .guide-list-two{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.5rem}
.hub .guide-list>a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.25rem; align-items:center;
  min-height:92px; padding:1.2rem 0; border-bottom:1px solid #dbe3ef; color:var(--h-ink)}
.hub .guide-list>a:focus-visible{outline:3px solid var(--h-primary); outline-offset:4px}
.hub .guide-list strong{display:block; font-size:1.04rem; line-height:1.35; transition:color .16s ease}
.hub .guide-list small{display:block; margin-top:.3rem; color:var(--h-gray); font-size:.85rem; line-height:1.5}
.hub .guide-list>a>span:last-child{color:var(--h-primary); font-size:1.2rem; font-weight:700}
.hub .guide-list>a:hover strong{color:var(--h-primary)}
.hub .guide-list-wide{grid-column:1/-1}

.hub .role-directory{margin-top:4.75rem; padding:3rem 2rem; border-radius:12px; background:var(--h-tint)}
.hub .role-directory .hub-section-head{border-bottom-color:var(--h-tint-deep)}
.hub .role-directory .guide-list>a{border-bottom-color:var(--h-tint-deep)}
.hub .hub-final-cta{margin-top:4.5rem}

@media(max-width:720px){
  .hub .hero{padding:4.5rem 0 6.25rem}
  .hub .trailhead-wrap{margin-top:-3.1rem}
  .hub .trailheads{grid-template-columns:1fr}
  .hub .trailheads>a{min-height:0; padding:1.35rem 1.2rem 1.35rem 4.6rem; border-right:0; border-bottom:1px solid #e2e8f0}
  .hub .trailheads>a:last-child{border-bottom:0}
  .hub .trailheads>a>span:nth-child(2){max-width:none}
  .hub .trailheads strong{margin-top:.2rem}
  .hub .trail-route{top:0; bottom:0; left:22px; right:auto; width:32px; height:auto}
  .hub .trail-route-line{top:13%; bottom:13%; left:15px; right:auto; width:1px; height:auto}
  .hub .trail-paw{top:calc(50% - 15px); left:0}
  .hub .hub-section{padding-top:3.75rem}
  .hub .hub-section-head{display:block}
  .hub .hub-section-head>span{display:block; margin-top:.7rem}
  .hub .field-note{grid-template-columns:1fr; padding:1.5rem 1.25rem}
  .hub .field-note-mark{width:44px; height:44px}
  .hub .field-note-actions{min-width:0}
  .hub .field-note .btn{width:auto}
  .hub .guide-list-two{grid-template-columns:1fr}
  .hub .guide-list-wide{grid-column:auto}
  .hub .role-directory{margin-top:3.75rem; padding:2.25rem 1.25rem}
  .hub .hub-final-cta{margin-top:3.5rem}
}

@media(prefers-reduced-motion:reduce){
  .hub .trailheads>a,.hub .trailheads strong span,.hub .guide-list strong,.hub .guide-list>a>span:last-child{transition:none}
}

/* Independent review verdict: one editorial summary, not a card collection. */
.review-verdict{margin:0 0 2.5rem; padding:1.75rem 1.8rem; border-radius:12px; background:var(--navy); color:#fff}
.review-verdict .review-label{color:#93c5fd; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.review-verdict h2{margin:.35rem 0 .7rem; color:#fff}
.review-verdict>p{margin:0; color:#dbe5f5}
.review-verdict dl{margin:1.4rem 0 0; border-top:1px solid rgba(255,255,255,.16)}
.review-verdict dl>div{display:grid; grid-template-columns:10rem minmax(0,1fr); gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.16)}
.review-verdict dt{color:#93c5fd; font-weight:750}
.review-verdict dd{margin:0; color:#fff}

@media(max-width:640px){
  .review-verdict{padding:1.4rem 1.25rem}
  .review-verdict dl>div{grid-template-columns:1fr; gap:.3rem}
}