.jb-page {
    --jb-primary: var(--primary-600);
    --jb-primary-deep: var(--primary-700);
    --jb-focus: var(--primary-500);
    --jb-primary-wash: var(--primary-50);
    --jb-primary-line: var(--primary-100);
    --jb-ink: var(--stone-900);
    --jb-body: var(--stone-700);
    --jb-muted: var(--stone-600);
    --jb-faint: var(--stone-500);
    --jb-border: var(--stone-200);
    --jb-border-strong: var(--stone-300);
    /* Two different jobs, so two tokens. --jb-ground is the page itself;
       --jb-canvas is the inset surface *inside* white cards (refine groups,
       logo chips) and stays warm neutral — one variable doing both meant
       tinting the page tinted the insides of the cards too. */
    --jb-ground: var(--primary-50);
    --jb-canvas: var(--stone-50);
    width: 100%;
    min-height: 70vh;
    /* No top padding: the masthead is the first thing on the page and it
       runs to the header. Everything after it gets its space from the
       masthead's own bottom margin. */
    padding: 0 max(1rem, env(safe-area-inset-left))
             clamp(2rem, 5vw, 4.5rem);
    /* primary-50, the ground /assessment already stands on. Every ink measures
       the same on it as on stone-50 to two decimal places, and white cards
       finally separate from it — against stone-50 they were white on near-white
       and did not read as cards at all. */
    background: var(--jb-ground);
    color: var(--jb-body);
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.jb-page > * {
    width: min(1120px, 100%);
    margin-inline: auto;
}

/* The masthead carries a photograph of people using the thing. The product is
   a career agent, and a page of white cards and numbers reads as though nobody
   is involved in it.

   The scrim is stepped rather than flat, and the steps are measured against the
   photograph rather than guessed. The top 40px carry no text, so the picture
   runs at 56% there; the scrim closes to 76% by 84px, which is inside the
   heading, and the heading's worst line still reads 4.3:1 against a floor of
   3.0. The subtitle sits below that at 5.9:1. Under the card it opens again,
   because nothing is written there either.

   The catalogue card stays opaque, and that is what makes the rest possible:
   the teal figures come out at 2.3:1 against the photograph and need 3.0.
   Getting them to pass would mean dropping the picture to 8%, at which point
   there is no picture. background-color is the page's own ground, so the text
   is legible before the image arrives.

   Framed at 20%, which puts the "Career Pathways" caption in the open strip
   above the heading and the standing figures behind it. The middle of this
   photograph is a rendered dashboard; the people are in a band across it, and
   the people are the point. */
/* Full bleed. It breaks out of the page's gutter with a negative margin of
   exactly that gutter, and re-imposes the content width on its own children, so
   the photograph runs edge to edge and meets the header with no seam while the
   copy stays in the same column as everything below it. Square corners: a
   rounded box that touches the header on one side reads as a mistake. */
.jb-masthead {
    position: relative;
    width: auto;
    max-width: none;
    margin: 0 calc(-1 * max(1rem, env(safe-area-inset-left))) 1.75rem;
    padding: 3.25rem max(1rem, env(safe-area-inset-left)) 2.25rem;
    background-color: var(--jb-ground);
    background-image:
        linear-gradient(rgb(250 250 249 / 40%) 0px,
                        rgb(250 250 249 / 44%) 40px,
                        rgb(250 250 249 / 76%) 84px,
                        rgb(250 250 249 / 76%) 38%,
                        rgb(250 250 249 / 20%) 50%,
                        rgb(250 250 249 / 20%) 100%),
        url("../images/career-path.jpg");
    /* 14%, not 20%. The masthead is full bleed now, so `cover` crops harder on
       a wide viewport than a narrow one and the framing drifts with the window.
       14% keeps the "Career Pathways" caption inside the visible band at both
       ends of the range rather than only at the width it was tuned on. */
    background-position: center 14%;
    background-size: cover;
    overflow: hidden;
}

.jb-masthead > * {
    width: min(1120px, 100%);
    margin-inline: auto;
}

.jb-masthead .jb-hero {
    margin-bottom: 1.25rem;
}

.jb-masthead .jb-catalogue {
    margin-bottom: 0;
}

/* The panel is the green, not the masthead: deep brand green with the
   photograph reading through it, as the band at the foot of /home does.

   No backdrop-filter. It was blurring by 20px, and the blur is what made this
   read as flat paint — the silhouettes are the transparency. Blur destroys
   exactly the edges the eye uses to see through a wash, so the panel looked
   opaque at a density where it is not.

   74%, and primary-900 rather than the Search green. What the type competes
   with is the bright half of the picture, so the deeper colour lets MORE of the
   photograph through, not less: in 700 the small rows measure 3.4:1 and in 800
   4.2:1 against a floor of 4.5, where 900 at this density gives 4.79:1. The
   instinct to lighten the green to see more of the picture is backwards.

   Every row is white. The pale-teal labels were the binding constraint — they
   measure 4.25:1 here where white measures 4.79:1, and paying for them in
   opacity would have cost six points of the photograph. Weight and size carry
   the hierarchy instead, which they were already doing. */
.jb-masthead .jb-catalogue {
    border-color: rgb(255 255 255 / 22%);
    border-left-color: var(--primary-500);
    background: rgb(19 78 74 / 74%);
    box-shadow: 0 8px 28px rgb(19 78 74 / 24%);
}

.jb-masthead .jb-catalogue-title,
.jb-masthead .jb-catalogue-number,
.jb-masthead .jb-catalogue-caption,
.jb-masthead .jb-catalogue-detail dt,
.jb-masthead .jb-catalogue-detail dd,
.jb-masthead .jb-catalogue-item,
.jb-masthead .jb-catalogue-item b,
.jb-masthead .jb-catalogue-item i,
.jb-masthead .jb-catalogue-asof {
    color: #fff;
}

.jb-masthead .jb-catalogue-detail {
    border-top-color: rgb(255 255 255 / 24%);
}

@media (max-width: 640px) {
    .jb-masthead {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }
}

.jb-hero {
    margin-bottom: 1.75rem;
}

.jb-hero h1,
.jb-section-heading h2,
.jb-upsell h2,
.jb-offer h2 {
    margin: 0;
    color: var(--jb-ink);
    font-family: Fraunces, "Noto Serif SC", Georgia, "Songti SC", serif;
    font-weight: 700;
    text-wrap: balance;
}

.jb-hero h1 {
    margin-bottom: .5rem;
    font-size: 2.75rem;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.jb-hero p {
    max-width: 68ch;
    margin: 0;
    color: var(--jb-body);
    font-size: 1.05rem;
    line-height: 1.65;
    text-wrap: pretty;
}

/* One step deeper than the page. These were primary-50 — which is now the
   ground — so they would have dissolved into it and left two 1px borders where
   the two largest blocks on the page used to be. The border moves with them:
   it was #ccfbf1 written out, which is primary-100 by another name and is now
   the fill.

   Deeper, rather than white like the job cards, because a recommended role and
   a searched one are not the same thing — one the product chose, one the reader
   filtered for — and the colour is what says so. Nothing here loses contrast:
   the only ink that would (stone-500, 4.26:1 on this tint) does not appear on
   these rails; it sits on white cards and on the page ground, where it still
   measures 4.60:1. */
.jb-recs,
.jb-upsell,
.jb-offer {
    margin-bottom: 1.5rem;
    border: 1px solid var(--primary-200);
    border-radius: 12px;
    background: var(--primary-100);
}

.jb-recs {
    padding: 1.5rem;
}

.jb-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.jb-section-heading h2,
.jb-upsell h2,
.jb-offer h2 {
    font-size: 1.45rem;
    line-height: 1.25;
}

.jb-recs-sub {
    margin: 0;
    color: var(--jb-muted);
    font-size: .875rem;
}

/* Wraps rather than scrolls sideways. A horizontal rail hides its own contents:
   cards past the fold are only reachable by dragging, and with the
   recommendations now split into fit sections the reader would be dragging three
   separate rails to see what is in each one. */
/* A rail, not a grid. Recommendations accumulate now: a build folds into what
   earlier builds found rather than replacing it, so a rail holds up to twelve
   and a wrapping grid would push the filters off the screen. Sideways keeps the
   shape of the page while the shelf grows.

   scroll-snap so a swipe lands on a card rather than between two, and
   overscroll-contain so reaching the end of the rail does not start scrolling
   the page underneath it. */
.jb-recs .jb-cards {
    display: flex;
    gap: .75rem;
    padding: 2px 2px .35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.jb-recs .jb-card-wrap {
    flex: 0 0 clamp(268px, 31%, 340px);
    scroll-snap-align: start;
}

/* Thin, and only on the rail: the page's own scrollbar is the browser's. */
.jb-recs .jb-cards::-webkit-scrollbar {
    height: 6px;
}

.jb-recs .jb-cards::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(19 78 74 / 22%);
}

.jb-card-wrap {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.jb-card-wrap > .jb-card {
    flex: 1;
}

/* Under the card rather than on it. These are not what the reader came to do —
   the card is a link to a job — so they stay quiet until wanted, and they never
   sit inside the anchor, where a button is invalid and every click would open
   the posting as well. */
.jb-card-actions {
    display: flex;
    gap: .4rem;
    padding: .4rem .15rem 0;
}

.jb-card-action {
    padding: .25rem .55rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--jb-faint);
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.jb-card-action:hover {
    border-color: var(--jb-border-strong);
    color: var(--jb-body);
}

/* The one action here that moves the reader forward, so it carries the brand
   colour the two quiet ones do not. Still text-weight: the card is the star. */
.jb-card-tailor {
    padding: .25rem .55rem;
    border-radius: 7px;
    color: var(--primary-700);
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}

.jb-card-tailor:hover {
    background: var(--primary-50);
}

.jb-card-action:disabled {
    cursor: default;
    opacity: .5;
}

/* Leaving, not gone: a card that vanishes under the cursor makes the reader
   wonder which one they hit. */
.jb-card-wrap.is-dismissing {
    opacity: .35;
    transition: opacity .25s;
}

.jb-recs .jb-card {
    background: rgba(255, 255, 255, .92);
}

.jb-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
}

.jb-upsell-copy p {
    max-width: 66ch;
    margin: .45rem 0 0;
    line-height: 1.6;
}

/* The price, the renewal and the way out, above the button rather than
   under it. There is no reminder email before the first charge (CEO,
   2026-09-15: write it on the claim screen instead), so this line is the
   only notice the reader gets and it is not styled like a footnote. */
.jb-upsell-terms {
    margin-top: .6rem;
    color: var(--jb-body);
    font-size: .84rem;
    line-height: 1.5;
}

/* Two ways in for a non-member (CEO, 2026-11-02): membership at $19.99 with
   the free month, or matching alone at $39.99. Side by side, the better deal
   marked, each price above its own button. */
.jb-upsell-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.jb-upsell-alt { font-size: .84rem; font-weight: 600; color: var(--jb-primary); text-decoration: none; }
.jb-upsell-alt:hover { text-decoration: underline; }
.jb-offer { padding: 1.5rem; }
.jb-offer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.jb-offer-option { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem;
                   border: 1px solid var(--jb-border-strong); border-radius: 12px; background: #fff; }
.jb-offer-option-best { border: 2px solid var(--jb-primary); }
.jb-offer-option h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.jb-offer-pill { align-self: flex-start; font-size: .72rem; font-weight: 700; color: #fff; background: var(--jb-primary);
                 border-radius: 9999px; padding: .15rem .6rem; }
.jb-offer-price { margin: .25rem 0 0; font-size: 1.15rem; font-weight: 700; }
.jb-offer-terms { margin: 0 0 .6rem; font-size: .84rem; color: var(--jb-body); line-height: 1.5; }
.jb-offer-option .jb-cta { margin-top: auto; align-self: stretch; }
.jb-cta-quiet { background: #fff; color: var(--jb-primary); border-color: var(--jb-primary); }
.jb-cta-quiet:hover { background: var(--jb-primary); color: #fff; }
.jb-resume-only { display: flex; align-items: center; gap: .75rem; margin-block: -.75rem 1.5rem; padding: .85rem 1rem;
                  border: 1px solid var(--jb-border-strong); border-radius: 10px; background: #fff; font-size: .86rem; }
.jb-resume-only i { color: var(--jb-primary); }
.jb-resume-only p { margin: 0; flex: 1; line-height: 1.5; }
@media (max-width: 720px) {
    .jb-offer-options { grid-template-columns: minmax(0, 1fr); }
    .jb-resume-only { flex-direction: column; align-items: flex-start; }
}

/* ---------- Buttons (shared anatomy) ---------- */
.jb-cta,
.jb-search-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--jb-primary);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.jb-cta {
    padding: .7rem 1rem;
}

.jb-cta:hover,
.jb-search-button:hover {
    background: var(--jb-primary-deep);
    color: #fff;
    transform: translateY(-1px);
}

.jb-search-button {
    padding: .7rem 1.15rem;
}

.jb-search-button i {
    font-size: .82em;
}

/* ---------- Consent: asking before reading ---------- */
/* The most important thing on the page when it is there, and gone the moment it
   is answered — so it is allowed to be the brightest element, and it is the only
   one that gets a gradient. Every colour is a --jb-* token, which resolve to the
   design system's own primary and stone ramps, so this cannot drift from the
   rest of the product. */
.jb-consent {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border: 1px solid var(--jb-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, var(--jb-primary-wash) 0%, #fff 58%);
    box-shadow: 0 18px 40px -34px rgba(13, 148, 136, .55);
}

/* A soft bloom behind the top-right corner. Decoration, and aria-hidden, but it
   is what stops the card reading as a cookie banner. */
.jb-consent-glow {
    position: absolute;
    top: -7rem;
    right: -5rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(20 184 166 / 18%), transparent 68%);
    pointer-events: none;
}

.jb-consent-body {
    position: relative;
    max-width: 60ch;
}

.jb-consent-eyebrow {
    margin: 0 0 .4rem;
    color: var(--jb-primary-deep);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.jb-consent-title {
    margin: 0 0 .6rem;
    color: var(--jb-ink);
    font-family: Fraunces, "Noto Serif SC", Georgia, "Songti SC", serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.jb-consent-lede {
    margin: 0 0 1.25rem;
    color: var(--jb-body);
    font-size: .98rem;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Three lines answering the three questions someone actually has: what do you
   read, what do you do with it, where does it go. */
.jb-consent-points {
    display: grid;
    gap: .55rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.jb-consent-points li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--jb-body);
    font-size: .88rem;
    line-height: 1.5;
}

.jb-consent-points i {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
    color: var(--jb-primary);
    font-size: .72rem;
}

.jb-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.jb-consent-yes {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--jb-primary) 0%, var(--jb-primary-deep) 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 22px -14px rgba(13, 148, 136, .9);
    transition: transform .15s, box-shadow .15s;
}

.jb-consent-yes:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -14px rgba(13, 148, 136, 1);
}

.jb-consent-yes:disabled {
    cursor: default;
    opacity: .8;
    transform: none;
}

/* While the answer is being recorded. The label does not change — the reload
   that follows says everything. */
.jb-consent-spinner {
    display: none;
    animation: jb-consent-spin 1s linear infinite;
}

.jb-consent-yes.is-working .jb-consent-icon {
    display: none;
}

.jb-consent-yes.is-working .jb-consent-spinner {
    display: inline-block;
}

@keyframes jb-consent-spin {
    to { transform: rotate(360deg); }
}

.jb-consent-no {
    padding: .8rem 1rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--jb-muted);
    font-size: .9rem;
    cursor: pointer;
}

.jb-consent-no:hover {
    color: var(--jb-ink);
}

.jb-consent-fineprint {
    margin: .9rem 0 0;
    color: var(--jb-faint);
    font-size: .78rem;
}

/* The card in its answered state — on or off. Same object, same radius, same
   ground as the one that asked; it does not vanish when it is answered, because
   a permission that leaves no trace of itself is one the reader cannot check or
   take back. The control sits on the right where a control belongs, rather than
   as a line of small print under the results. */
.jb-consent-bar {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.75rem;
    padding: .95rem 1.15rem;
    border: 1px solid var(--jb-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(28 25 23 / 5%);
}

/* Granted: the quiet one. It reports a state and asks for nothing, so it keeps
   the plain white ground of the base bar. */
.jb-consent-bar-on {
    border-color: var(--jb-border);
}

.jb-consent-bar-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
    font-size: .9rem;
}

.jb-consent-bar-on .jb-consent-bar-icon {
    color: var(--jb-primary);
}

/* Switched off, and drawn to be noticed. The page's own subtitle promises roles
   "matched to your career profile" — when that is off, this bar is the only
   thing standing between the reader and what they were promised, and a grey
   minus sign reads like disabled furniture.

   In the Search button's emerald, not a second accent. A colour that appears
   exactly once on a page reads as a warning; the same green the page already
   uses for its primary action reads as an invitation, which is what this is.
   The two states are told apart by weight rather than by hue: this one is
   tinted and filled because it wants an answer, the granted one is white and
   outlined because it does not. */
.jb-consent-bar-off {
    border-color: transparent;
    /* Deep-to-primary rather than flat: the copy sits over the left, deep end,
       where white clears 4.5:1 against the ground. Flat primary-600 is 3.7:1,
       which is under the bar for 14px semibold — the one place a screenshot
       looks fine and a reader in daylight does not. */
    background: linear-gradient(115deg, var(--jb-primary-deep) 0%, var(--jb-primary) 100%);
    box-shadow: 0 1px 3px rgb(13 148 136 / 22%);
}

.jb-consent-bar-off .jb-consent-bar-text strong {
    color: #fff;
}

.jb-consent-bar-off .jb-consent-bar-text span {
    color: rgb(255 255 255 / 88%);
}

.jb-consent-bar-off .jb-consent-bar-icon {
    background: #fff;
    color: var(--jb-primary-deep);
}

/* Inverted here, outlined in the granted state. The asymmetry is the point:
   this is the page asking, that one is the reader's way out. */
.jb-consent-bar-off .jb-consent-bar-action {
    border-color: transparent;
    background: #fff;
    color: var(--jb-primary-deep);
}

.jb-consent-bar-off .jb-consent-bar-action:hover {
    background: #fff;
    color: var(--jb-primary-deep);
    box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
}

/* The page's focus ring is primary-500, which is nearly invisible on this
   ground. Keyboard users get a white one instead. */
.jb-consent-bar-off .jb-consent-bar-action:focus-visible {
    outline-color: #fff;
}

.jb-consent-bar-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .1rem;
    margin-right: auto;
}

.jb-consent-bar-text strong {
    color: var(--jb-ink);
    font-size: .9rem;
    font-weight: 650;
}

.jb-consent-bar-text span {
    color: var(--jb-muted);
    font-size: .8rem;
}

/* Findable without being loud: bordered rather than filled, because turning
   this off is a thing the reader may want and not a thing the page asks for. */
.jb-consent-bar-action {
    flex-shrink: 0;
    padding: .5rem 1rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--jb-body);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s;
}

.jb-consent-bar-action:hover {
    border-color: var(--jb-primary);
    color: var(--jb-primary-deep);
}

.jb-consent-bar-action:disabled {
    cursor: default;
    opacity: .6;
}

@media (max-width: 560px) {
    .jb-consent-bar {
        flex-wrap: wrap;
    }

    .jb-consent-bar-text {
        margin-right: 0;
        width: calc(100% - 2.85rem);
    }

    .jb-consent-bar-action {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .jb-consent {
        padding: 1.5rem 1.25rem;
    }

    .jb-consent-title {
        font-size: 1.35rem;
    }

    .jb-consent-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jb-consent-yes,
    .jb-consent-no {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jb-consent-yes,
    .jb-consent-spinner {
        transition: none;
        animation: none;
    }
}

/* ---------- Catalogue band: the denominator behind the results ---------- */
/* Every colour here is a --jb-* token, and those map to the design system's own
   primary/stone ramps — no local palette, so a brand change reaches this too. */
.jb-catalogue {
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--jb-border);
    border-left: 3px solid var(--jb-primary);
    border-radius: 12px;
    background: #fff;
}

.jb-catalogue-title {
    margin: 0 0 .75rem;
    color: var(--jb-faint);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.jb-catalogue-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin-bottom: 1.1rem;
}

.jb-catalogue-figure {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.jb-catalogue-number {
    color: var(--jb-primary-deep);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.jb-catalogue-caption {
    color: var(--jb-muted);
    font-size: .8rem;
}

.jb-catalogue-detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1.1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--jb-border);
}

.jb-catalogue-detail dt {
    color: var(--jb-faint);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.jb-catalogue-detail dd {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .85rem;
    margin: 0;
}

.jb-catalogue-item {
    color: var(--jb-body);
    font-size: .8rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* The count carries the emphasis; the share is a quieter aside beside it. */
.jb-catalogue-item b {
    color: var(--jb-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.jb-catalogue-item i {
    color: var(--jb-faint);
    font-style: normal;
}

.jb-catalogue-asof {
    margin: .9rem 0 0;
    color: var(--jb-faint);
    font-size: .72rem;
}

@media (max-width: 640px) {
    .jb-catalogue-detail {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .jb-catalogue-detail dt {
        margin-top: .6rem;
    }
}

/* ---------- Search + filters ---------- */
.jb-search {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--jb-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(28 25 23 / 6%);
}

.jb-search-primary {
    display: grid;
    /* query, function, country, city, job type, button */
    grid-template-columns: minmax(13rem, 2fr) repeat(4, minmax(8rem, 1fr)) auto;
    align-items: end;
    gap: .875rem;
}

.jb-field {
    min-width: 0;
}

.jb-field label {
    display: block;
    margin-bottom: .375rem;
    color: var(--jb-ink);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.4;
}

.jb-field input,
.jb-field select {
    width: 100%;
    min-height: 44px;
    padding: .65rem .75rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--jb-ink);
    font: inherit;
    font-size: .9rem;
    line-height: 1.2;
}

.jb-field input::placeholder {
    color: var(--jb-muted);
    opacity: 1;
}

.jb-field input:focus-visible,
.jb-field select:focus-visible {
    border-color: var(--jb-focus);
    outline: 2px solid rgb(20 184 166 / 28%);
    outline-offset: 1px;
}

/* The keyword and the Search button, after every filter. Its own row because
   it is a different kind of thing from the controls above it: those narrow by
   structured fields, this one greps the posting. */
.jb-keyword {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--jb-border);
}

.jb-keyword .jb-field-query {
    flex: 1 1 auto;
    min-width: 0;
}

.jb-keyword .jb-search-button {
    flex: 0 0 auto;
    margin-top: 1.55rem;   /* clears the label, sits on the input */
}

.jb-field-hint {
    margin: .35rem 0 0;
    color: var(--jb-faint);
    font-size: .76rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .jb-keyword {
        flex-direction: column;
    }

    .jb-keyword .jb-search-button {
        width: 100%;
        margin-top: 0;
    }
}

/* City combobox. A <select> would forbid the cities this list does not carry,
   and a <datalist> filters itself by whatever is already typed — so once a city
   was in the box it was the only suggestion left. */
.jb-combo {
    position: relative;
}

.jb-combo-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--jb-faint);
    font-size: .7rem;
    cursor: pointer;
}

.jb-combo-toggle:hover {
    color: var(--jb-primary-deep);
}

.jb-combo input {
    padding-right: 2rem;
}

.jb-combo-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem;
    list-style: none;
    border: 1px solid var(--jb-border-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .45);
}

.jb-combo-list li {
    padding: .4rem .6rem;
    border-radius: 6px;
    color: var(--jb-body);
    font-size: .85rem;
    cursor: pointer;
}

.jb-combo-list li:hover,
.jb-combo-list li:focus {
    background: var(--jb-primary-wash);
    color: var(--jb-primary-deep);
    outline: none;
}

.jb-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-height: 1px;
}

.jb-search-actions:empty {
    display: none;
}

.jb-clear {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    color: var(--jb-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: color 140ms ease, background-color 140ms ease;
}

.jb-clear:hover {
    color: var(--jb-primary-deep);
    background: var(--jb-primary-wash);
}

.jb-clear i {
    font-size: .85em;
}

/* ---------- Results grid + cards ---------- */
.jb-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.jb-card {
    display: flex;
    min-width: 0;
    gap: .875rem;
    padding: 1.15rem;
    border: 1px solid var(--jb-border);
    border-radius: 12px;
    background: #fff;
    color: var(--jb-body);
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(28 25 23 / 5%);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.jb-card:hover {
    border-color: var(--jb-border-strong);
    color: var(--jb-body);
    box-shadow: 0 4px 8px rgb(28 25 23 / 8%);
    transform: translateY(-2px);
}

.jb-card:focus-visible,
.jb-cta:focus-visible,
.jb-search-button:focus-visible,
.jb-clear:focus-visible,
.jb-card-action:focus-visible,
.jb-consent-bar-action:focus-visible,
.jb-consent-yes:focus-visible,
.jb-consent-no:focus-visible,
.jb-empty-action:focus-visible,
.jb-relax-link:focus-visible,
.jb-pagination a:focus-visible,
.jb-attribution a:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: 2px;
}

.jb-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--jb-border);
    border-radius: 10px;
    background: var(--jb-canvas);
    object-fit: contain;
}

.jb-main {
    min-width: 0;
    flex: 1;
}

.jb-title {
    overflow-wrap: anywhere;
    color: var(--jb-ink);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
}

.jb-meta,
.jb-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.jb-meta > span,
.jb-tags > span,
.jb-why > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.jb-meta {
    margin-top: .35rem;
    color: var(--jb-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.jb-company {
    color: var(--jb-body);
    font-weight: 600;
}

.jb-dot {
    color: var(--jb-muted);
}

.jb-tags {
    margin-top: .75rem;
}

.jb-chip {
    display: inline-flex;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #f5f5f4;
    color: var(--jb-muted);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.4;
}

.jb-chip-sponsor {
    background: #f0fdf4;
    color: #15803d;
}

.jb-posted {
    margin-left: auto;
    color: var(--jb-muted);
    font-size: .72rem;
    line-height: 1.4;
}

.jb-why {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    color: var(--jb-muted);
    font-size: .74rem;
    line-height: 1.45;
}

.jb-why-label {
    font-weight: 650;
}

/* ---------- Empty / unavailable states ---------- */
/* The search form, the pagination and the relaxation links all point at
   #jb-results, so a search lands on its results instead of at the top of the
   page. The site header is sticky, so the jump needs to clear it. */
.jb-results {
    scroll-margin-top: 5.5rem;
}

.jb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    margin: 0;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--jb-border-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--jb-muted);
    text-align: center;
}

.jb-empty-icon {
    font-size: 1.5rem;
    color: var(--jb-border-strong);
}

.jb-unavailable .jb-empty-icon {
    color: #d19a44;
}

.jb-recs-pending {
    margin-bottom: 1.5rem;
}

/* Cold-cache recommendations placeholder. A quiet pulse, not a spinner: the
   wait is up to a minute and the rest of the page is usable meanwhile, so this
   should read as "working on it", not demand attention. */
.jb-recs-loading {
    margin-bottom: 1.5rem;
    gap: .6rem;
}

.jb-alert-line { display: block; margin-top: .25rem; font-size: .82rem; color: var(--stone-500, #78716c); }
.jb-alert-toggle {
    margin-left: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--jb-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.jb-alert-toggle:hover { text-decoration: underline; }

.jb-assess-more {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--jb-primary);
    border-radius: .9rem;
    background: var(--white, white);
}

.jb-assess-more p { margin: 0; flex: 1; line-height: 1.5; font-weight: 600; }

/* "Still matching", in the first rail's heading. A turning ring rather than the
   breathing dot: the dot read as decoration, and this has to say "working". */
.jb-recs-live {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--white, white);
    color: var(--jb-primary);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--primary-200);
}

.jb-recs-spinner {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2.5px solid var(--primary-200);
    border-top-color: var(--jb-primary);
    border-radius: 50%;
    animation: jb-recs-spin .8s linear infinite;
}

@keyframes jb-recs-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .jb-recs-spinner { animation-duration: 2.4s; }
}

@media (max-width: 640px) {
    .jb-assess-more { flex-direction: column; align-items: flex-start; }
}

.jb-recs-spark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jb-accent, #14b8a6), #e0900f);
    opacity: .35;
    animation: jb-recs-breathe 2.4s ease-in-out infinite;
}

.jb-recs-loading-sub {
    max-width: 52ch;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--jb-muted);
}

@keyframes jb-recs-breathe {
    0%, 100% { opacity: .25; transform: scale(.94); }
    50%      { opacity: .6;  transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .jb-recs-spark { animation: none; opacity: .4; }
}

.jb-empty-title {
    max-width: 46ch;
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
}

.jb-empty-sub {
    margin: -.35rem 0 0;
    color: var(--jb-faint);
    font-size: .82rem;
}

.jb-relax {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.jb-relax-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--jb-body);
    font-size: .82rem;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.jb-relax-link:hover {
    border-color: var(--jb-primary);
    color: var(--jb-primary-deep);
}

.jb-relax-link b {
    color: var(--jb-primary-deep);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.jb-empty-action {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem .9rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 8px;
    color: var(--jb-primary-deep);
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease;
}

button.jb-empty-action {
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.jb-empty-action:hover {
    border-color: var(--jb-primary);
    background: var(--jb-primary-wash);
}

/* ---------- Pagination ---------- */
.jb-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.jb-pagination a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .45rem;
    padding: .6rem .9rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--jb-body);
    font-size: .875rem;
    font-weight: 650;
    text-decoration: none;
    transition: border-color 140ms ease, color 140ms ease;
}

.jb-pagination a:hover {
    border-color: var(--jb-primary);
    color: var(--jb-primary-deep);
}

.jb-pagination a i {
    font-size: .82em;
}

.jb-page-indicator {
    color: var(--jb-muted);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.jb-pagination-prev {
    margin-right: auto;
}

.jb-pagination-next {
    margin-left: auto;
}

/* ---------- Attribution ---------- */
.jb-attribution {
    margin-top: 2.25rem;
    color: var(--jb-faint);
    font-size: .75rem;
    text-align: center;
}

.jb-attribution a {
    color: inherit;
    text-decoration: none;
}

.jb-attribution a:hover {
    color: var(--jb-primary-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .jb-search-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jb-field-query {
        grid-column: 1 / -1;
    }

    .jb-search-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .jb-cards {
        grid-template-columns: 1fr;
    }

    .jb-recs .jb-cards {
        grid-template-columns: none;
    }
}

@media (max-width: 540px) {
    .jb-page {
        padding-block: 2rem 3rem;
    }

    .jb-hero h1 {
        font-size: 2.1rem;
    }

    .jb-hero p {
        font-size: .95rem;
    }

    .jb-section-heading,
    .jb-upsell {
        align-items: stretch;
        flex-direction: column;
    }

    .jb-recs,
    .jb-upsell,
    .jb-catalogue,
    .jb-search {
        padding: 1rem;
    }

    .jb-recs .jb-cards {
        grid-auto-columns: minmax(270px, 88vw);
    }

    .jb-search-primary {
        grid-template-columns: 1fr;
    }

    .jb-field-query {
        grid-column: auto;
    }

    .jb-card {
        padding: 1rem;
    }

    .jb-posted {
        width: 100%;
        margin-left: 0;
    }

    .jb-pagination {
        flex-wrap: wrap;
    }

    .jb-page-indicator {
        order: 3;
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jb-card,
    .jb-cta,
    .jb-search-button,
    .jb-clear,
    .jb-empty-action,
    .jb-pagination a {
        transition: none;
    }

    .jb-card:hover,
    .jb-cta:hover,
    .jb-search-button:hover {
        transform: none;
    }
}

/* ---------- Judge verdict (LLM_JOB_MATCHING_ENABLED) ---------- */
/* Shown in place of .jb-why. The category is the headline: a score of 62 means
   two different things depending on whether the role is one the candidate could
   start tomorrow or one worth growing into, and the chip is what says which. */
.jb-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
}

.jb-match-chip {
    display: inline-flex;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
}

.jb-match-current {
    background: #f0fdf4;
    color: #15803d;
}

.jb-match-growth {
    background: #eff6ff;
    color: #1d4ed8;
}

.jb-match-pivot {
    background: #fefce8;
    color: #a16207;
}

.jb-match-score {
    color: var(--jb-muted);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.4;
}

.jb-match-summary {
    margin-top: .4rem;
    color: var(--jb-body);
    font-size: .78rem;
    line-height: 1.5;
}

.jb-match-list {
    margin: .4rem 0 0;
    padding-left: 1.05rem;
    color: var(--jb-muted);
    font-size: .74rem;
    line-height: 1.5;
}

.jb-match-list-head {
    margin-left: -1.05rem;
    list-style: none;
    font-weight: 650;
}

.jb-match-list-gaps .jb-match-list-head {
    color: #a16207;
}

/* The step is the answer to the gap above it, so it reads in the brand colour
   rather than the warning one: the gap is the problem, this is the way out. */
.jb-match-list-steps .jb-match-list-head {
    color: var(--jb-primary-deep);
}

/* ---------- Refine row (client-side filters) ---------- */
/* Checkbox pills rather than selects: "Director or VP" is a normal thing to want
   and a <select multiple> cannot say it without a modifier key. */
.jb-refine {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(220px, 1fr)
                           minmax(250px, 1.1fr) minmax(210px, .9fr);
    align-items: stretch;
    gap: .875rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jb-border);
}

.jb-refine-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--jb-border);
    border-radius: 10px;
    background: var(--jb-canvas);
}

.jb-refine-group legend {
    margin-bottom: .45rem;
    padding: 0;
    color: var(--jb-faint);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.jb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-content: flex-start;
}

.jb-pill {
    display: inline-flex;
    cursor: pointer;
}

.jb-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.jb-pill span {
    display: inline-flex;
    align-items: center;
    padding: .32rem .7rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--jb-body);
    font-size: .78rem;
    line-height: 1.4;
    transition: background .12s, border-color .12s, color .12s;
}

.jb-pill:hover span {
    border-color: var(--jb-primary);
}

.jb-pill input:checked + span {
    border-color: var(--jb-primary);
    background: var(--jb-primary-wash);
    color: var(--jb-primary-deep);
    font-weight: 650;
}

/* Keyboard focus has to survive the visually-hidden input. */
.jb-pill input:focus-visible + span {
    outline: 2px solid var(--jb-focus);
    outline-offset: 2px;
}

.jb-refine-group-narrow {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.jb-refine-number {
    width: 100%;
    min-height: 38px;
    padding: .34rem .6rem;
    border: 1px solid var(--jb-border-strong);
    border-radius: 8px;
    font-size: .82rem;
}

.jb-pill-standalone {
    margin-top: .1rem;
}

.jb-refine-count {
    margin: .9rem 0 0;
    color: var(--jb-muted);
    font-size: .82rem;
}

.jb-refine-clear {
    margin-left: .6rem;
    color: var(--jb-primary);
    font-weight: 650;
}

.jb-navigation-progress {
    position: sticky;
    z-index: 20;
    top: .75rem;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 2rem);
    align-items: center;
    gap: .65rem;
    margin: -.5rem auto 1rem;
    padding: .7rem 1rem;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: rgb(240 253 250 / 96%);
    box-shadow: 0 8px 24px rgb(15 118 110 / 16%);
    color: var(--jb-primary-deep);
    font-size: .86rem;
    font-weight: 650;
    backdrop-filter: blur(8px);
}

.jb-navigation-progress[aria-hidden="true"] { display: none; }

.jb-navigation-spinner {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid #99f6e4;
    border-top-color: var(--jb-primary);
    border-radius: 50%;
    animation: jb-spin .7s linear infinite;
}

.jb-search-button:disabled,
.jb-pagination a.is-loading {
    cursor: wait;
    opacity: .78;
    transform: none;
}

@keyframes jb-spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
    .jb-refine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
    .jb-refine { grid-template-columns: 1fr; }
}

/* Capability sits beside the match score only when the two diverge; muted, because
   the number that decides whether to apply is the match. */
.jb-match-capability {
    color: var(--jb-faint);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
}