/* =========================================================
   DownloadHub - public site
   Loaded after style.css, so the admin area is untouched.

   The idea: this is a place where you *earn a credential*, not
   just watch lessons. So the seal and the verification code are
   the signature, and everything else stays quiet around them.
   ========================================================= */

:root {
    /* Indigo carries the brand, amber marks anything earned or verified. */
    --ink:        #141233;
    --ink-2:      #4b4873;
    --ink-3:      #767398;

    --indigo:     #3a2fd6;
    --indigo-600: #2f26b0;
    --indigo-900: #16124a;
    --indigo-50:  #eeecfd;

    --amber:      #f2a516;
    --amber-700:  #a86a05;
    --amber-50:   #fef5e2;

    --paper:      #f6f6fb;
    --card:       #ffffff;
    --line:       #e3e2f0;
    --line-soft:  #efeef7;

    --ok:         #13795b;
    --ok-50:      #e4f4ee;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;

    --shadow-card: 0 1px 2px rgba(20, 18, 51, .04), 0 10px 30px -12px rgba(20, 18, 51, .18);
    --shadow-lift: 0 2px 6px rgba(20, 18, 51, .06), 0 22px 50px -20px rgba(20, 18, 51, .3);

    --display: "Bricolage Grotesque", "Segoe UI", Helvetica, Arial, sans-serif;
    --body:    "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
    --code:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

    --gutter: 20px;
    --max:    1240px;
}

/* ---------------- base ---------------- */

body.site {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.site * { box-sizing: border-box; }

.site h1, .site h2, .site h3, .site h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 .5em;
    text-wrap: balance;
}

.site h1 { font-size: clamp(2.1rem, 6.2vw, 3.9rem); letter-spacing: -.035em; }
.site h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -.028em; }
.site h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }

.site p { margin: 0 0 1em; max-width: 68ch; }
.site a { color: var(--indigo); text-decoration: none; }
.site a:hover { text-decoration: underline; }
.site img { max-width: 100%; display: block; }

.site :focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
    border-radius: 4px;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.band { padding: 56px 0; }
.band-tight { padding: 38px 0; }
.band-paper { background: var(--paper); }
.band-white { background: var(--card); }

.band-head { margin-bottom: 26px; }
.band-head h2 { margin-bottom: .25em; }
.band-head p { color: var(--ink-2); margin: 0; }

.band-head.with-link {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

/* ---------------- buttons ---------------- */

.b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    font-family: var(--body);
    font-size: .98rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
    line-height: 1.2;
}
.b:hover { text-decoration: none; }

.site .b-primary { background: var(--indigo); color: #fff; }
.site .b-primary:hover { background: var(--indigo-600); color: #fff; }

.site .b-amber { background: var(--amber); color: #231a00; }
.site .b-amber:hover { background: #dd9609; }

.site .b-line { border-color: var(--line); background: var(--card); color: var(--ink); }
.site .b-line:hover { border-color: var(--indigo); color: var(--indigo); }

.site .b-ondark { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.site .b-ondark:hover { background: rgba(255,255,255,.12); color: #fff; }

.b-sm { padding: 9px 15px; font-size: .88rem; }
.b-block { width: 100%; }

/* ---------------- the seal ---------------- */

.seal .seal-ring       { fill: none; stroke: var(--amber); stroke-width: 2; opacity: .45; }
.seal .seal-ring-inner { fill: none; stroke: var(--amber); stroke-width: 1; opacity: .3; }
.seal .seal-star       { fill: var(--amber); opacity: .16; }
.seal .seal-tick       { fill: none; stroke: var(--amber-700); stroke-width: 4.5;
                         stroke-linecap: round; stroke-linejoin: round; }

.seal-on-dark .seal-ring       { stroke: var(--amber); opacity: .6; }
.seal-on-dark .seal-ring-inner { stroke: var(--amber); opacity: .4; }
.seal-on-dark .seal-star       { fill: var(--amber); opacity: .25; }
.seal-on-dark .seal-tick       { stroke: var(--amber); }

/* =========================================================
   Masthead
   ========================================================= */

.mast { position: sticky; top: 0; z-index: 60; }

/* The four audiences ride above the logo, the way a school
   separates its faculties before it says its own name. */
.sector-bar {
    background: var(--indigo-900);
    color: #c7c3ef;
    font-size: .86rem;
}
.sector-bar .wrap {
    display: flex;
    align-items: center;
    gap: 4px 18px;
}
/* The audience tabs take whatever room is left and scroll sideways on a
   narrow screen. The scrolling is on this row, not on .wrap, so the contact
   details beside it stay put instead of scrolling away with the tabs. */
.sector-links {
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.sector-links::-webkit-scrollbar { display: none; }

.sector-contact {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex: none;
}
.sector-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c7c3ef;
    padding: 9px 0;
    white-space: nowrap;
    font-weight: 500;
}
.sector-contact a:hover { color: #fff; text-decoration: none; }
.sector-contact svg { flex: none; opacity: .75; }

.sector-bar a {
    color: #c7c3ef;
    padding: 11px 14px;
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    font-weight: 500;
}
.sector-bar a:hover { color: #fff; text-decoration: none; }
.sector-bar a.on { color: #fff; border-bottom-color: var(--amber); }

.mast-main {
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.mast-main .wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
}

.site .logo {
    font-family: var(--display);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--ink);
    flex: 0 0 auto;
}
.site .logo:hover { text-decoration: none; }
.site .logo em { font-style: normal; color: var(--indigo); }

.mast-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.mast-nav a {
    color: var(--ink-2);
    font-weight: 500;
    font-size: .95rem;
    padding: 9px 12px;
    border-radius: var(--r-sm);
}
.mast-nav a:hover { color: var(--ink); background: var(--indigo-50); text-decoration: none; }
.mast-nav a.on { color: var(--indigo); font-weight: 600; }

.mast-nav .b { margin-left: 6px; }

.burger {
    margin-left: auto;
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    cursor: pointer;
}
.burger span {
    display: block;
    width: 19px; height: 2px;
    background: var(--ink);
    position: relative;
}
.burger span::before,
.burger span::after {
    content: ""; position: absolute; left: 0;
    width: 19px; height: 2px; background: var(--ink);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

.drawer { display: none; }

/* =========================================================
   Hero
   ========================================================= */

.stage {
    background: var(--indigo-900);
    color: #fff;
    padding: 54px 0 64px;
    position: relative;
    overflow: hidden;
}

/* A faint ruled grid, like the guilloche on a printed certificate. */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 75%);
    pointer-events: none;
}

.stage .wrap { position: relative; }

.stage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.stage h1 { color: #fff; max-width: 15ch; }
.stage-lead {
    color: #bdb8e8;
    font-size: 1.08rem;
    max-width: 48ch;
    margin-bottom: 26px;
}

.stage-search {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 7px;
    max-width: 520px;
    flex-wrap: wrap;
}
.stage-search input {
    flex: 1 1 200px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    padding: 11px 13px;
}
.stage-search input::placeholder { color: #9a95cc; }
.stage-search input:focus { outline: none; }
.stage-search .b { flex: 0 0 auto; }

.stage-facts {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 26px;
    color: #a8a3d8;
    font-size: .92rem;
}
.stage-facts b { color: #fff; font-weight: 600; }

/* The credential itself, shown rather than described. */
.credential {
    background: linear-gradient(170deg, #fffdf8 0%, #fff 48%);
    border-radius: var(--r-md);
    padding: 26px 24px 22px;
    box-shadow: var(--shadow-lift);
    max-width: 400px;
    width: 100%;
    margin-inline: auto;
    border-top: 4px solid var(--amber);
}
.credential-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.credential-org {
    font-family: var(--display);
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: -.02em;
    color: var(--ink);
}
.credential h3 {
    font-size: 1.38rem;
    margin: 0 0 4px;
    letter-spacing: -.03em;
}
.credential-holder { color: var(--ink-2); font-size: .92rem; margin: 0 0 18px; }
.credential-rule { height: 1px; background: var(--line); margin: 0 0 14px; }
.credential-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.credential-code {
    font-family: var(--code);
    font-size: .74rem;
    color: var(--ink-3);
    letter-spacing: .02em;
}
.verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ok-50);
    color: var(--ok);
    font-size: .76rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
}
.verified::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ok);
}

/* =========================================================
   Sector strip - four doors, divided by rules not boxes
   ========================================================= */

.sectors {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
}
.site .sector-door {
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    display: block;
    color: inherit;
}
.site .sector-door:hover { text-decoration: none; }
.sector-door:hover .sector-name { color: var(--indigo); }
.sector-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.14rem;
    letter-spacing: -.02em;
    margin-bottom: 5px;
    transition: color .15s ease;
}
.sector-door p {
    margin: 0;
    color: var(--ink-2);
    font-size: .94rem;
    max-width: 38ch;
}

/* =========================================================
   Certificate cards
   ========================================================= */

.cert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.cert-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cert-card:hover {
    border-color: #cbc7ea;
    box-shadow: var(--shadow-card);
}

.cert-shot {
    aspect-ratio: 16 / 9;
    background: var(--indigo-50);
    position: relative;
    overflow: hidden;
}
.cert-shot img { width: 100%; height: 100%; object-fit: cover; }
.cert-shot .fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(90% 120% at 15% 0%, #e7e4fc 0%, #f3f1fe 60%, #eeecfd 100%);
}

.cert-body {
    padding: 18px 19px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
}
.cert-cat {
    font-size: .78rem;
    font-weight: 600;
    color: var(--indigo);
}
.cert-card h3 { margin: 0; font-size: 1.1rem; }
.cert-card .blurb {
    margin: 0;
    color: var(--ink-2);
    font-size: .92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag {
    font-size: .74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--line-soft);
}
.tag-exam { background: var(--amber-50); color: var(--amber-700); border-color: #f3dfb4; }

.cert-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.price {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}
.price small { font-weight: 500; font-size: .74rem; color: var(--ink-3); display: block; }

/* ---------------- category chips ---------------- */

.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.site .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: .92rem;
    font-weight: 500;
}
.site .chip:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }
.site .chip.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.site .chip .n { color: var(--ink-3); font-size: .8rem; }
.site .chip.on .n { color: #c9c4f5; }

/* =========================================================
   Careers
   ========================================================= */

.career-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.site .career {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: inherit;
}
.site .career:hover { text-decoration: none; border-color: #cbc7ea; box-shadow: var(--shadow-card); }
.career-shot {
    aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, var(--amber-50), #fdf0f2);
    overflow: hidden;
}
.career-shot img { width: 100%; height: 100%; object-fit: cover; }
.career-body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.career-body h3 { margin: 0; font-size: 1.04rem; }
.career-body p {
    margin: 0; color: var(--ink-2); font-size: .9rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.career-stats {
    margin-top: auto;
    padding-top: 12px;
    display: grid;
    gap: 3px;
    font-size: .86rem;
    color: var(--ink-2);
}
.career-stats b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Reviews
   ========================================================= */

.reviews { background: var(--indigo-900); color: #fff; }
.reviews h2 { color: #fff; }
.reviews .band-head p { color: #bdb8e8; }

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.review {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-md);
    padding: 22px 21px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.review blockquote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #ece9ff;
}
.review-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-who img {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.review-initial {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--amber);
    color: #231a00;
    font-family: var(--display);
    font-weight: 700;
    flex: 0 0 auto;
}
.review-name { font-weight: 600; font-size: .95rem; }
.review-role { color: #a8a3d8; font-size: .83rem; }
.stars { color: var(--amber); font-size: .9rem; letter-spacing: .08em; }

/* =========================================================
   Questions
   ========================================================= */

.faq-list { border-top: 1px solid var(--line); max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 19px 44px 19px 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.04rem;
    letter-spacing: -.015em;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 8px; top: 50%;
    width: 11px; height: 11px;
    border-right: 2px solid var(--indigo);
    border-bottom: 2px solid var(--indigo);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item .answer { padding: 0 0 20px; color: var(--ink-2); }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* =========================================================
   Closing call to action
   ========================================================= */

.closer {
    background: linear-gradient(135deg, var(--indigo) 0%, #5b3fe0 55%, #7b4fd8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 40px 28px;
    text-align: center;
}
.closer h2 { color: #fff; margin-bottom: .3em; }
.closer p { color: #ddd9ff; margin: 0 auto 22px; max-width: 52ch; }
.closer .b-amber { box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }

/* =========================================================
   Footer
   ========================================================= */

.foot {
    background: var(--ink);
    color: #a8a5c8;
    padding: 50px 0 28px;
    font-size: .93rem;
}
.foot a { color: #cfccea; }
.foot a:hover { color: #fff; }

.foot-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 34px;
}
.foot h4 {
    font-family: var(--display);
    font-size: .98rem;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -.01em;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

/* ---------------- social accounts ----------------
   A row of round buttons under the brand, which is where people look for
   them, and clear of the link columns so neither crowds the other. */
.foot-social {
    display: flex !important;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px !important;
}
.foot-social a {
    display: grid;
    place-items: center;
    /* 36px is the smallest a thing you tap with a thumb should be, so the
       button keeps that size on every screen - the column was widened to
       make room rather than the buttons shrunk to fit it. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #cfccea;
    transition: background .18s, color .18s, transform .18s;
}
.foot-social a:hover {
    background: var(--indigo-600, #4f3ddb);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

/* The letter shown when no icon has been uploaded. Same size, same weight,
   same position in every button, so six of them read as one set. */
.foot-social a span {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    /* Capitals sit high in their own box; this drops them onto the middle
       of the circle rather than a hair above it. */
    transform: translateY(.5px);
}

/* An uploaded icon is boxed to the same square as the letter, whatever
   size the file is, so one oversized PNG cannot break the row. */
.foot-social a img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
/* The button is the target, so the focus ring belongs on it, not on a
   rectangle the size of the icon inside. */
.foot-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.foot-base {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 22px;
    display: flex;
    gap: 14px 26px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: .86rem;
}
.foot-policy { display: flex; gap: 8px 18px; flex-wrap: wrap; }

/* =========================================================
   Page shells used by the inner pages
   ========================================================= */

.page-head {
    background: var(--indigo-900);
    color: #fff;
    padding: 44px 0 50px;
}
.page-head h1 { color: #fff; margin-bottom: .25em; }
.page-head p { color: #bdb8e8; margin: 0; }

.crumbs { font-size: .87rem; color: #9a95cc; margin-bottom: 14px; }
.crumbs a { color: #c7c3ef; }

.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; margin-top: 1.7em; }
.prose h3 { font-size: 1.16rem; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--ink-2); }
.prose li { margin-bottom: .5em; }

.callout {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    color: var(--ink-2);
}

.empty-note {
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    padding: 34px 24px;
    text-align: center;
    color: var(--ink-2);
}

.flash {
    border-radius: var(--r-sm);
    padding: 13px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    background: var(--card);
}
.flash.success { background: var(--ok-50); border-color: #b9e0d1; color: #0f5c46; }
.flash.error   { background: #fdeceb; border-color: #f3c4bf; color: #8f2e21; }
.flash.info    { background: var(--amber-50); border-color: #f3dfb4; color: var(--amber-700); }

/* =========================================================
   File library
   ========================================================= */

.file-list { display: grid; gap: 14px; }

.file-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 21px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.file-row:hover { border-color: #cbc7ea; }
.file-main { min-width: 0; }
.file-main h3 { margin: 0 0 6px; font-size: 1.1rem; }
.file-main p { margin: 0 0 10px; color: var(--ink-2); font-size: .94rem; }

.file-meta {
    display: flex;
    gap: 7px 18px;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--ink-3);
}
.file-meta b { color: var(--ink-2); font-weight: 600; }

.file-action { flex: 0 0 auto; }
.file-action .b { width: 100%; }

/* =========================================================
   Two-column text and picture
   ========================================================= */

.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.split-media img {
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}

.ticked { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 11px; }
.ticked li {
    position: relative;
    padding-left: 30px;
    color: var(--ink-2);
}
.ticked li::before {
    content: "";
    position: absolute;
    left: 2px; top: .46em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--amber-700);
    border-bottom: 2px solid var(--amber-700);
    transform: rotate(-45deg);
}

/* =========================================================
   Blog - the list
   ========================================================= */

/* Three to a row on a desktop, two on a tablet, one on a phone. */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.post-card:hover {
    border-color: #cbc7ea;
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.site a.post-card-shot {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--indigo-50);
    overflow: hidden;
}
.post-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-blank {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: radial-gradient(90% 120% at 15% 0%, #e7e4fc 0%, #f3f1fe 60%, #eeecfd 100%);
}

/* The subject sits on the picture, so the card can lead with its title. */
.post-card-tag {
    position: absolute;
    left: 12px; top: 12px;
    background: rgba(22, 18, 74, .9);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}

.post-card-body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}
.post-card-title { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.site .post-card-title a { color: var(--ink); }
.site .post-card-title a:hover { color: var(--indigo); text-decoration: none; }
.post-card-sum { margin: 0; color: var(--ink-2); font-size: .93rem; }

.site a.post-card-cat {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--indigo);
    background: var(--indigo-50);
    padding: 5px 11px;
    border-radius: 999px;
}
.site a.post-card-cat:hover { background: #e2def9; text-decoration: none; }

/* Who wrote it and when. Pushed to the bottom so cards of different text
   lengths still line their last row up with each other. */
.post-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}
.post-by { display: flex; align-items: center; gap: 9px; min-width: 0; }
.post-face {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--indigo-50);
}
.post-face-text {
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .74rem;
    color: var(--indigo);
}
.post-face.lg { width: 46px; height: 46px; flex-basis: 46px; font-size: .95rem; }
.post-face.xl { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.2rem; }

.post-by-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.post-by-who b { font-size: .87rem; font-weight: 600; }
.post-by-who i { font-style: normal; font-size: .77rem; color: var(--ink-3); }

.post-when { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .79rem; color: var(--ink-3); }

/* ---------------- the piece across the top ---------------- */

.lead-post {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.site a.lead-shot { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--indigo-50); overflow: hidden; }
.lead-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lead-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.lead-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lead-pin {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber-700);
    background: var(--amber-50);
    border: 1px solid #f3dfb4;
    padding: 4px 10px;
    border-radius: 999px;
}
.lead-body h2 { margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.05rem); line-height: 1.22; }
.site .lead-body h2 a { color: var(--ink); }
.site .lead-body h2 a:hover { color: var(--indigo); text-decoration: none; }
.lead-body p { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.lead-body .post-card-foot { border-top: 1px solid var(--line-soft); }
.lead-go { align-self: flex-start; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.pager-count { color: var(--ink-2); font-size: .9rem; }

/* =========================================================
   Blog - one article
   ========================================================= */

/* How far through you are. Fixed to the very top, 3px tall, no layout cost. */
.read-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 60;
    pointer-events: none;
}
.read-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--amber);
}

/* Only the admin ever sees this, above a draft. */
.preview-flag {
    background: var(--amber-50);
    border-bottom: 1px solid #f3dfb4;
    padding: 11px 0;
    font-size: .92rem;
    color: #7a5208;
}
.preview-flag a { color: #7a5208; font-weight: 600; }

.post-head { background: var(--indigo-900); color: #fff; padding: 46px 0 40px; }
.post-head .crumbs { color: #a8a3d8; margin-bottom: 18px; }
.site .post-head .crumbs a { color: #cfccee; }
.post-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 2.85rem);
    line-height: 1.16;
    max-width: 24ch;
}
.site a.post-head-cat {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber);
    background: rgba(242, 165, 22, .13);
    border: 1px solid rgba(242, 165, 22, .35);
    padding: 5px 12px;
    border-radius: 999px;
}
.site a.post-head-cat:hover { background: rgba(242, 165, 22, .22); text-decoration: none; }
.site .post-stand {
    margin: 20px 0 0;
    color: #c9c5ea;
    font-size: 1.09rem;
    line-height: 1.6;
    max-width: 62ch;
}

.post-byline { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.post-byline .post-face { background: rgba(255, 255, 255, .13); }
.post-byline .post-face-text { color: #d6d2f4; }
.post-byline-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.post-byline-text .by-name b { color: #fff; font-weight: 600; }
.post-byline-text .by-name i {
    font-style: normal;
    color: #a8a3d8;
    font-size: .88rem;
}
.post-byline-text .by-name i::before { content: " \2014  "; }
.post-byline-text .by-when { color: #a8a3d8; font-size: .86rem; }

.post-cover { margin: -36px 0 0; position: relative; }
.post-cover img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
}
.band-after-cover { padding-top: 40px; }

/* One column on a phone, contents list beside the article on a wide screen. */
.read-layout { display: grid; grid-template-columns: 1fr; gap: 30px; }
.read-main { min-width: 0; }

/* ---------------- the contents list ---------------- */

.toc { min-width: 0; }
.toc-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 4px 16px;
}
.toc-box summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    font-family: var(--display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    list-style: none;
}
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .18s ease;
    flex: 0 0 auto;
    align-self: center;
}
.toc-box[open] summary::after { transform: rotate(-135deg); }
.toc-count { font-size: .78rem; color: var(--ink-3); font-family: var(--body); font-weight: 400; }

.toc-box ol {
    list-style: none;
    margin: 0 0 14px;
    padding: 10px 0 0;
    border-top: 1px solid var(--line-soft);
    counter-reset: toc;
}
.toc-box li { margin: 0 0 2px; }
.toc-box li.lvl-3 { padding-left: 16px; }
.site .toc-box a {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid transparent;
    font-size: .89rem;
    line-height: 1.45;
    color: var(--ink-2);
}
.site .toc-box a:hover { color: var(--indigo); text-decoration: none; }
.site .toc-box a.here {
    color: var(--indigo);
    border-left-color: var(--indigo);
    font-weight: 600;
}
.toc-box li.lvl-3 a { font-size: .85rem; }

/* ---------------- the article itself ---------------- */

.post-body { font-size: 1.08rem; line-height: 1.78; max-width: 68ch; }
.post-body > p:first-child { font-size: 1.16rem; color: var(--ink-2); }

/* The net under pasted design code.
   Somebody pastes a section built for a 1400px-wide page and it pushes the
   whole article sideways on a phone - the reader gets a horizontal scrollbar
   and a layout that looks broken. A max-width always beats a width on the
   same element, so these two lines stop that however the pasted CSS is
   written.

   The second line is why it is min() and not a plain cap: paragraphs are
   held to 68 characters because that is comfortable to read, and ".site p"
   further up is more specific than a bare :where(*), so it would win and the
   overflow would come back. min() keeps the reading measure on a wide screen
   and the container width on a narrow one.

   :where() gives these no weight of their own, so an author who deliberately
   sets a max-width in pasted CSS still gets it. */
.site .post-body :where(*) { max-width: 100%; }
.site .post-body :where(p, li, dd, figcaption) { max-width: min(100%, 68ch); }
.site .post-body :where(p, li, h2, h3, h4, td, th, figcaption) { overflow-wrap: break-word; }

/* ---------------- a page the admin designed themselves ----------------
   A pasted design was written for a whole page: its own full-width bands,
   its own centred container, its own breakpoints. So it is given the whole
   width and the reading measure is lifted - 68 characters is right for an
   article and wrong for a row of three cards. The 100% cap stays, so a
   stray fixed width still cannot push the page sideways on a phone. */
.site .post-body-wide {
    max-width: none;
    width: 100%;
    font-size: 1rem;
    line-height: 1.6;
}
.site .post-body-wide :where(p, li, dd, figcaption) { max-width: 100%; }

/* The site's own article spacing must not reach inside a pasted design.
   It was giving every h2 a 96px top margin - on top of the 75px the design
   already puts between its sections - so a design written with tight
   headings came out with a screenful of empty space above each one. The
   author wrote their CSS against a plain browser page, so that is what they
   get back: "revert" hands each margin to the browser's own default, and
   any rule in the pasted stylesheet still wins over it. */
.site .post-body-wide :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd,
                             blockquote, figure, pre, hr, table) {
    margin: revert;
}

/* Plain writing on a designed page still needs a column to be read in -
   a line of text 1400px wide is no easier to read here than anywhere else.
   Only DIRECT children are centred, so a pasted design (whose outermost
   element is a div or a section) still runs the full width. */
.site .post-body-wide > :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote,
                               figure, table, pre) {
    /* A rem, not a ch. "ch" is the width of a 0 in the element's OWN font,
       so a 48px heading and a 16px paragraph given 68ch come out hundreds of
       pixels apart and the left edges no longer line up. */
    max-width: 41rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter, 20px);
    padding-right: var(--gutter, 20px);
    box-sizing: content-box;
}

.site .post-body-wide > :first-child { margin-top: 0; }
.site .post-body-wide > :last-child { margin-bottom: 0; }
/* The lead-paragraph treatment is for articles; a design sets its own. */
.site .post-body-wide > p:first-child { font-size: inherit; color: inherit; }

/* Read aloud and read by search engines, seen by nobody. Used for the real
   h1 on a designed page, whose own heading is printed by the design. */
.only-read {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.post-body h2 {
    margin-top: 2em;
    font-size: clamp(1.32rem, 3.2vw, 1.6rem);
    line-height: 1.26;
    scroll-margin-top: 90px;
}
.post-body h3 {
    margin-top: 1.7em;
    font-size: 1.16rem;
    scroll-margin-top: 90px;
}
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.post-body figure { margin: 1.9em 0; }
.post-body figcaption {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--ink-3);
    text-align: center;
}
.post-body blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--amber);
    color: var(--ink-2);
    font-size: 1.1rem;
}
.post-body blockquote p { margin: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.post-body pre {
    background: var(--ink);
    color: #e8e6f7;
    padding: 18px;
    border-radius: var(--r-sm);
    overflow-x: auto;
    font-family: var(--code);
    font-size: .88rem;
    line-height: 1.6;
}
.post-body code { font-family: var(--code); font-size: .9em; }
.post-body :not(pre) > code {
    background: var(--indigo-50);
    padding: 2px 6px;
    border-radius: 4px;
}
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.9em 0;
    font-size: .95rem;
    display: block;
    overflow-x: auto;
}
.post-body th, .post-body td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.post-body thead th { background: var(--paper); font-weight: 600; white-space: nowrap; }

/* ---------------- after the article ---------------- */

/* ---------------- video ---------------- */

/* The frame has to keep its shape while it loads, or the article jumps
   about as each video arrives. The padding trick does that without
   depending on aspect-ratio, which older phones do not have. */
.post-body .embed { margin: 2em 0; }
.embed-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;              /* 16 by 9 */
    background: var(--ink);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------- the questions ---------------- */

.faqs {
    margin: 48px 0 0;
    max-width: 68ch;
    scroll-margin-top: 90px;
}
.faqs h2 {
    margin: 0 0 18px;
    font-size: clamp(1.32rem, 3.2vw, 1.6rem);
}
.faq {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    margin-bottom: 10px;
    overflow: hidden;
}
.faq[open] { border-color: #cbc7ea; }
.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--ink);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px; height: 9px;
    margin-top: 7px;
    border-right: 2px solid var(--indigo);
    border-bottom: 2px solid var(--indigo);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--indigo); }
.faq-answer {
    padding: 0 18px 18px;
    color: var(--ink-2);
    line-height: 1.72;
}
.faq-answer a { color: var(--indigo); }

/* ---------------- who wrote it ---------------- */

.author-box {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 48px 0 0;
    padding: 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    max-width: 68ch;
}
.author-face {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--indigo-50);
    display: grid;
    place-items: center;
    font-size: 1.7rem;
}
.author-text { flex: 1 1 260px; min-width: 0; }
.author-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.author-box h3 { margin: 6px 0 2px; font-size: 1.22rem; color: var(--indigo); }
.site .author-box p.author-role {
    margin: 0 0 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
}
.site .author-box p.author-bio {
    margin: 0 0 .9em;
    color: var(--ink-2);
    font-size: .95rem;
    line-height: 1.72;
}
.site .author-box p.author-bio:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
    .author-face { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.25rem; }
    .author-box { gap: 16px; padding: 20px; }
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    max-width: 68ch;
}
.share-label {
    font-family: var(--display);
    font-weight: 600;
    font-size: .92rem;
    margin-right: 4px;
}


/* =========================================================
   Landing pages
   -------------------------------------------------------
   A page selling a course has one job above the fold: say what it is, who
   it is for, and what to press. Everything here serves that, and every part
   disappears cleanly when the admin leaves its box empty.
   ========================================================= */

.lander-head {
    background: var(--indigo-900);
    color: #fff;
    padding: 40px 0 46px;
}
.lander-head .crumbs { color: #9a95cc; margin-bottom: 20px; }
.site .lander-head .crumbs a { color: #cfccee; }

.lander-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.lander-say { min-width: 0; }

.lander-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--amber);
    background: rgba(242, 165, 22, .13);
    border: 1px solid rgba(242, 165, 22, .35);
    padding: 6px 13px;
    border-radius: 999px;
}
.lander-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 5.4vw, 3.1rem);
    line-height: 1.12;
    max-width: 18ch;
}
.site .lander-head p.lander-lead {
    margin: 20px 0 0;
    color: #c9c5ea;
    font-size: clamp(1rem, 2.2vw, 1.16rem);
    line-height: 1.6;
    max-width: 54ch;
}
.lander-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* A quiet outlined button that works on the dark heading. */
.site .b-ghost-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
}
.site .b-ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.lander-shot { min-width: 0; }
.lander-shot img {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
}

/* ---------------- the facts strip ---------------- */

.lander-facts { background: var(--card); border-bottom: 1px solid var(--line); }
.fact-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.fact {
    padding: 20px 0;
    border-bottom: 1px solid var(--line-soft);
}
.fact:last-child { border-bottom: 0; }
.fact b {
    display: block;
    font-family: var(--display);
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--ink);
}
.fact span {
    display: block;
    margin-top: 3px;
    color: var(--ink-2);
    font-size: .92rem;
    line-height: 1.5;
}

/* ---------------- what you will learn ---------------- */

.learn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 40px;
}
.learn-list li {
    position: relative;
    padding-left: 34px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 46ch;
}
.learn-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 2px;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: var(--ok-50);
}
.learn-list li::after {
    content: "";
    position: absolute;
    left: 6px; top: 8px;
    width: 9px; height: 5px;
    border-left: 2px solid var(--ok);
    border-bottom: 2px solid var(--ok);
    transform: rotate(-45deg);
}

/* ---------------- the questions, on a page ---------------- */

.faq-wrap { max-width: 72ch; }

/* ---------------- getting in touch ---------------- */

.enquire {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px;
}
.enquire-say h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 3.4vw, 1.85rem); }
.site .enquire-say p { margin: 0 0 12px; color: var(--ink-2); max-width: 44ch; }
.site .enquire-or { font-size: .92rem; }

.enquire-form { min-width: 0; }
.enquire-form .eq-field { margin-bottom: 16px; }
.site .enquire-form label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.enquire-form .opt { font-weight: 400; color: var(--ink-3); }
.enquire-form input[type="text"],
.enquire-form input[type="email"],
.enquire-form input[type="tel"],
.enquire-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    font: inherit;
    color: var(--ink);
}
.enquire-form textarea { resize: vertical; min-height: 96px; }
.enquire-form input:focus,
.enquire-form textarea:focus {
    outline: 2px solid var(--indigo);
    outline-offset: 1px;
    border-color: var(--indigo);
}
.eq-pair { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

/* The box only a robot fills in. Moved off screen rather than hidden with
   display:none, which some robots check for. */
.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enquire-done {
    background: var(--ok-50);
    border: 1px solid #b6ddcc;
    border-radius: var(--r-sm);
    padding: 22px;
}
.enquire-done h3 { margin: 0 0 8px; color: var(--ok); font-size: 1.15rem; }
.site .enquire-done p { margin: 0; color: var(--ink-2); }

.site .page-stamp {
    margin-top: 2.5em;
    color: var(--ink-3);
    font-size: .88rem;
}

/* =========================================================
   Wider screens
   ========================================================= */

@media (min-width: 620px) {
    .file-row { flex-direction: row; align-items: center; justify-content: space-between; }
    .file-main { flex: 1 1 auto; }
    .file-action .b { width: auto; }
    .sectors { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
    .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .learn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eq-pair { grid-template-columns: 1fr 1fr; }
    .fact-row { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
    /* auto-fit, not a fixed count: a column with nothing in it is never
       printed, so the footer may have three columns or five and the row
       should fill either way instead of leaving a gap on the right. */
    .foot-cols { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    /* From the first multi-column width upwards the brand takes two tracks.
       It carries the social buttons, and six of those need more room than a
       column of links does - in one track they wrap onto a second row. */
    .foot-brand { grid-column: span 2; }
    .closer { padding: 52px 40px; }
}

@media (min-width: 900px) {
    :root { --gutter: 28px; }
    .band { padding: 72px 0; }
    .stage { padding: 72px 0 86px; }
    .stage-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
    .credential { margin-inline: 0 0; transform: rotate(1.4deg); }
    .sectors { grid-template-columns: repeat(4, 1fr); column-gap: 28px; }
    .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .career-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .review-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .foot-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px 26px; }

    .split { grid-template-columns: 1.15fr .85fr; gap: 50px; }
    /* Three articles to a row - what the blog front page was asked for. */
    .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .lander-head { padding: 54px 0 62px; }
    .lander-grid { grid-template-columns: 1.08fr .92fr; gap: 54px; }

    /* The facts sit in one row, divided by lines rather than gaps. */
    .fact-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
    .fact {
        padding: 24px 28px;
        border-bottom: 0;
        border-left: 1px solid var(--line-soft);
    }
    .fact:first-child { padding-left: 0; border-left: 0; }

    .enquire { grid-template-columns: .85fr 1.15fr; gap: 48px; padding: 40px; }

    .lead-post { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
    .site a.lead-shot { aspect-ratio: auto; height: 100%; min-height: 330px; }
    .lead-body { padding: 40px 38px; justify-content: center; }

    /* The contents list moves to the left of the article and stays put while
       you scroll, so a long piece is always navigable. */
    .read-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 54px; }
    .read-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
    .toc { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 150px); overflow-y: auto; }
    .toc-box { background: transparent; border: 0; padding: 0; }
    .toc-box summary { cursor: default; padding-top: 0; }
    .toc-box summary::after { display: none; }
}

/* ---------------- phone navigation ---------------- */

@media (max-width: 899px) {
    .mast-nav { display: none; }
    .burger { display: flex; }

    /* The top strip on a phone. There is no room for a number AND an
       address beside four scrolling tabs, so the address goes and the
       number becomes the icon on its own - still one tap to call. The
       touch target stays 36px even though the label is gone. */
    .sector-bar .wrap { gap: 0 10px; }
    .sector-contact {
        gap: 4px;
        /* The tabs scroll underneath, so without a line the last half-word
           looks like a mistake rather than something you can swipe. */
        padding-left: 10px;
        border-left: 1px solid rgba(255, 255, 255, .14);
    }
    .sector-contact .mail { display: none; }
    .sector-contact .call span { display: none; }
    .sector-contact .call {
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
    }
    .sector-contact svg { width: 16px; height: 16px; opacity: 1; }

    .drawer {
        display: block;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        max-height: 0;
        overflow: hidden;
        transition: max-height .22s ease;
    }
    .drawer.open { max-height: 70vh; overflow-y: auto; }
    .drawer-inner { padding: 10px var(--gutter) 18px; display: grid; gap: 2px; }
    .drawer a {
        padding: 13px 4px;
        color: var(--ink);
        font-weight: 500;
        border-bottom: 1px solid var(--line-soft);
    }
    .drawer a:hover { text-decoration: none; color: var(--indigo); }
    .drawer .b { margin-top: 12px; }

    .stage h1 { max-width: none; }
    .credential { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site *, .site *::before, .site *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* A logo image standing in for the site name. */
.site .logo img { max-height: 40px; width: auto; display: block; }
.foot-logo { max-height: 38px; width: auto; margin-bottom: 14px; }

/* The not-found page: a clear way back rather than a dead end. */
.lost-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.lost-search {
    display: flex;
    gap: 8px;
    max-width: 520px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 7px;
    background: var(--card);
    flex-wrap: wrap;
}
.lost-search input {
    flex: 1 1 200px;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    padding: 11px 13px;
    color: var(--ink);
}
.lost-search input:focus { outline: none; }

/* =========================================================
   Pages still on the older markup
   (sign in, create account, dashboard, checkout, the exam)

   site.css loads after style.css, so its base rules for `a` and the
   headings were winning on equal specificity and painting dark text onto
   the dark panels. These put the original colours back, with one extra
   class so they win cleanly.
   ========================================================= */

.site .hero h1 { color: #fff; }
.site .hero p  { color: #b9c3cc; }
.site .hero .eyebrow { color: #7fb5a2; }
.site .hero a { color: #7fb5a2; }

.site .btn            { color: #fff; }
.site .btn-ghost      { color: var(--pine); }
.site .btn-ghost:hover{ color: var(--pine); }
.site .btn-danger,
.site .btn-dark       { color: #fff; }

/* The dark bar across the top of the exam, and its clock. */
.site .exam-top,
.site .exam-top a,
.site .exam-top .exam-title { color: #fff; }

/* Headings inside white panels keep the old ink, not the new indigo,
   so the exam and dashboard still read as one piece. */
.site .panel h1,
.site .panel h2,
.site .panel h3,
.site .q-card h2,
.site .q-card h3 { color: var(--ink); }

/* ======================================================================
   Verify a certificate
   ----------------------------------------------------------------------
   One box, one button, one answer. The whole page has to work for
   somebody in an HR department who has never been here before and will
   never come back, so there is nothing on it to learn.

   The four answers are told apart by a word first and a colour second -
   the word is what carries the meaning, the colour only backs it up.
   ====================================================================== */

/* One column on a phone, two from 960px up: the box and its answer on the
   left, the short explainer on the right. Two columns rather than one
   centred column because a 640px card alone on a 1440px screen leaves a
   wide empty strip with nothing in it, and what belongs in that strip is
   the thing an employer reads while deciding what to type. */
.verify-grid {
    display: grid;
    gap: 30px;
    align-items: start;
}

.verify-main { min-width: 0; }

@media (min-width: 960px) {
    .verify-grid {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 48px;
    }
}

.verify-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 22px;
    max-width: 640px;
}

.site .verify-form label {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: 8px;
}

/* Stacked on a phone, side by side the moment there is room. */
.verify-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.verify-row input[type="text"] {
    width: 100%;
    min-width: 0;                 /* lets it shrink inside the flex row */
    box-sizing: border-box;
    padding: 13px 14px;
    font-family: var(--code);
    font-size: 1.02rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
}

.verify-row input[type="text"]::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
}

.verify-row input[type="text"]:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-50);
}

.verify-row .btn { flex: 0 0 auto; }

.site .verify-hint {
    margin: 10px 0 0;
    font-size: .85rem;
    color: var(--ink-3);
    max-width: none;
}

@media (min-width: 560px) {
    .verify-row { flex-direction: row; align-items: stretch; }
    .verify-row input[type="text"] { flex: 1 1 auto; }
    .verify-row .btn { padding-left: 26px; padding-right: 26px; }
}

/* ---------------- the answer ---------------- */

.verify-result {
    margin-top: 22px;
    max-width: 640px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 5px solid var(--ink-3);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 22px;
}

.verify-mark {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.15rem, 3.6vw, 1.4rem);
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--ink);
    overflow-wrap: anywhere;      /* a long word must not widen the page */
}

.site .verify-result p {
    margin: 0 0 14px;
    color: var(--ink-2);
    max-width: none;
}

.site .verify-result p:last-child { margin-bottom: 0; }

.verify-result.is-valid   { border-left-color: var(--ok);     background: var(--ok-50); }
.verify-result.is-valid   .verify-mark { color: var(--ok); }
.verify-result.is-expired { border-left-color: var(--amber-700); background: var(--amber-50); }
.verify-result.is-expired .verify-mark { color: var(--amber-700); }
.verify-result.is-revoked { border-left-color: #b4232b; background: #fdeced; }
.verify-result.is-revoked .verify-mark { color: #9a1f26; }
.verify-result.is-missing { border-left-color: var(--ink-3); }
.verify-result.is-missing .verify-mark { color: var(--ink-2); }
.verify-result.is-wait    { border-left-color: var(--indigo); background: var(--indigo-50); }
.verify-result.is-wait    .verify-mark { color: var(--indigo-600); }

/* The facts, as rows of label and value. Stacked on a phone; two columns
   from 480px up, where the labels line up without squeezing the values. */
.verify-facts {
    margin: 0 0 14px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(20, 18, 51, .12);
    display: grid;
    gap: 12px;
}

.verify-facts > div { display: grid; gap: 2px; min-width: 0; }

.site .verify-facts dt {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
}

.site .verify-facts dd {
    margin: 0;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.site .verify-facts dd.mono { font-family: var(--code); letter-spacing: .03em; }

@media (min-width: 480px) {
    .verify-facts > div {
        grid-template-columns: 9.5rem minmax(0, 1fr);
        gap: 14px;
        align-items: baseline;
    }
}

.site .verify-aside {
    font-size: .85rem;
    color: var(--ink-3);
    border-top: 1px solid rgba(20, 18, 51, .1);
    padding-top: 12px;
    margin-bottom: 0;
}

.site .verify-why {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--ink-2);
    font-size: .94rem;
}

.site .verify-why li { margin-bottom: 6px; }

/* ---------------- the page before anything is typed ---------------- */

.verify-blurb {
    max-width: 640px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
}

@media (min-width: 960px) {
    .verify-blurb {
        border-top: 0;
        border-left: 1px solid var(--line);
        padding: 4px 0 4px 28px;
        max-width: none;
    }
}

.site .verify-blurb h2 {
    font-size: 1.1rem;
    margin: 26px 0 8px;
    color: var(--ink);
}

.site .verify-blurb h2:first-child { margin-top: 0; }
.site .verify-blurb p { color: var(--ink-2); max-width: none; }

.verify-key { margin: 0; display: grid; gap: 10px; }
.verify-key > div { display: grid; gap: 2px; min-width: 0; }

.site .verify-key dt {
    font-family: var(--display);
    font-weight: 700;
    font-size: .95rem;
}

.site .verify-key dd { margin: 0; color: var(--ink-2); font-size: .94rem; }

.verify-key .k-valid   { color: var(--ok); }
.verify-key .k-expired { color: var(--amber-700); }
.verify-key .k-revoked { color: #9a1f26; }
.verify-key .k-missing { color: var(--ink-3); }

@media (min-width: 480px) {
    .verify-key > div {
        grid-template-columns: 9.5rem minmax(0, 1fr);
        gap: 14px;
        align-items: baseline;
    }
}

/* In the narrow side column there is no room for two, so the word sits
   above its line again - which is also how it reads on a phone. */
@media (min-width: 960px) {
    .verify-blurb .verify-key > div { grid-template-columns: none; gap: 2px; }
    .verify-blurb .verify-key { gap: 14px; }
}

/* ======================================================================
   What employers may see - the candidate's own switches.

   Set apart from the rest of the account page on purpose: this is the one
   place on the site where somebody decides who may look at them, and it
   should not read like another settings row.
   ====================================================================== */

.visibility {
    max-width: 640px;
    margin: 0 0 30px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--indigo);
    border-radius: var(--r-md);
}

.site .visibility h2 { margin: 0 0 10px; font-size: 1.15rem; }
.site .vis-lead { margin: 0 0 18px; color: var(--ink-2); font-size: .94rem; max-width: none; }

.vis-switch {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    cursor: pointer;
    border-top: 1px solid var(--line-soft);

    /* style.css styles every bare <label> as a small uppercase monospace
       caption, which is right for a form field and wrong for a sentence
       somebody has to read before deciding who may see them. These three
       are inherited properties, so they have to be put back here or the
       whole block comes out shouting. */
    font-family: var(--body);
    text-transform: none;
    letter-spacing: normal;
}
.vis-switch:first-of-type { border-top: 0; padding-top: 0; }

.vis-switch input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin: 2px 0 0;
    accent-color: var(--indigo);
    cursor: pointer;
}

.vis-switch span { display: grid; gap: 3px; min-width: 0; }
.site .vis-switch strong { font-size: .97rem; font-weight: 600; color: var(--ink); }
.site .vis-switch span { font-size: .86rem; color: var(--ink-3); line-height: 1.5; }

/* The two finer choices sit under the main one, visibly dependent on it. */
.vis-sub {
    margin: 4px 0 16px 10px;
    padding-left: 18px;
    border-left: 2px solid var(--line);
}

.site .vis-seen {
    margin: 16px 0 0;
    padding: 11px 14px;
    background: var(--indigo-50);
    border-radius: var(--r-sm);
    font-size: .88rem;
    color: var(--ink-2);
    max-width: none;
}

.site .vis-note {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
    font-size: .84rem;
    color: var(--ink-3);
    max-width: none;
}

@media (max-width: 559px) {
    .visibility { padding: 16px; }
    .vis-sub { margin-left: 2px; padding-left: 13px; }
}

/* The way in for a company.

   Last of the audience tabs rather than in the main menu: most people on
   this page are learners, and a hiring link beside "Blog" would read as
   one more thing for them. Marked out so it does not look like a fifth
   audience. */
.sector-links .for-hire {
    border-left: 1px solid rgba(255, 255, 255, .18);
    margin-left: 6px;
    padding-left: 16px;
    font-weight: 600;
}
.sector-links .for-hire.on { color: #fff; }

@media (max-width: 699px) {
    /* The tabs scroll sideways here, so it keeps its place in the row and
       simply arrives when you swipe - no border to break the rhythm. */
    .sector-links .for-hire { border-left: 0; margin-left: 0; padding-left: 12px; }
}

/* ======================================================================
   Jobs - the public side
   ====================================================================== */

.job-filters { margin-bottom: 22px; display: grid; gap: 12px; }

.jf-search { display: flex; gap: 9px; flex-wrap: wrap; }
.jf-search input[type="search"] {
    flex: 1 1 240px; min-width: 0; box-sizing: border-box;
    padding: 12px 14px; font: inherit; font-size: .97rem;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.jf-search input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }

.jf-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.site .jf-chips .chip {
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    padding: 5px 13px; font-size: .84rem; font-weight: 600; color: var(--ink-2);
}
.site .jf-chips .chip.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.site .job-count-line { margin: 0 0 14px; color: var(--ink-2); max-width: none; }

.job-cards { display: grid; gap: 14px; }
@media (min-width: 800px) { .job-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.job-card {
    position: relative; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-card); padding: 20px; min-width: 0;
}
.job-card.featured { border-color: var(--amber); }
.job-flag {
    position: absolute; top: 14px; right: 14px;
    background: var(--amber-50); color: var(--amber-700);
    font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.site .job-card h2 { margin: 0 0 4px; font-size: 1.12rem; padding-right: 70px; }
.site .job-card h2 a { color: var(--ink); }
.site .job-card h2 a:hover { color: var(--indigo); }
.site .job-by { font-size: .88rem; color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }

.job-card .job-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.job-card .job-facts span {
    background: var(--paper); border-radius: 999px; padding: 3px 11px;
    font-size: .79rem; color: var(--ink-2);
}
.site .job-snip { margin: 0 0 14px; font-size: .9rem; color: var(--ink-2); max-width: none; }
.job-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.site .job-foot .muted { font-size: .8rem; color: var(--ink-3); }

.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.site .pager a {
    border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
    padding: 7px 13px; font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.site .pager a.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* ---------------- one job ---------------- */

.job-page { display: grid; gap: 24px; align-items: start; }
@media (min-width: 940px) { .job-page { grid-template-columns: minmax(0, 1fr) 330px; } }

.job-body { min-width: 0; }
.site .job-body h2 { font-size: 1.25rem; margin: 28px 0 12px; }

.job-spec {
    margin: 0 0 26px; display: grid; gap: 12px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 18px;
}
@media (min-width: 560px) { .job-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.job-spec > div { min-width: 0; }
.site .job-spec dt {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3); font-weight: 600; margin-bottom: 2px;
}
.site .job-spec dd { margin: 0; font-size: .95rem; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

.job-side { min-width: 0; }
.apply-card {
    background: var(--card); border: 1px solid var(--line);
    border-left: 4px solid var(--indigo);
    border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 20px;
}
@media (min-width: 940px) { .apply-card { position: sticky; top: 20px; } }

.site .apply-card h3 { margin: 0 0 9px; font-size: 1.1rem; }
.site .apply-card p { margin: 0 0 13px; font-size: .9rem; color: var(--ink-2); max-width: none; }
.site .apply-with { font-weight: 600; color: var(--ink); margin-bottom: 7px; }

.apply-certs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.apply-certs li {
    background: var(--ok-50); color: var(--ok); border-radius: var(--r-sm);
    padding: 7px 11px; font-size: .85rem; font-weight: 600;
}

.site .apply-note, .site .apply-alt {
    font-size: .82rem; color: var(--ink-3); margin: 12px 0 0;
    padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.site .apply-alt { border-top: 0; padding-top: 0; }

.apply-card .eq-field { margin-bottom: 14px; }
.apply-card textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    font: inherit; font-size: .9rem; line-height: 1.55;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); resize: vertical;
}
.apply-card textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }

/* ======================================================================
   The candidate's own interviews, on their dashboard
   ====================================================================== */

.iv-mine { display: grid; gap: 14px; }

.iv-mine-card {
    display: grid; gap: 14px; align-items: start;
    border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; background: #fff; min-width: 0;
}
@media (min-width: 620px) { .iv-mine-card { grid-template-columns: 62px minmax(0, 1fr); } }
.iv-mine-card.off { opacity: .6; }

/* The date, as a little tear-off calendar. */
.iv-mine-when {
    display: grid; place-items: center; gap: 0;
    background: var(--pine, #16124a); color: #fff;
    border-radius: 11px; padding: 9px 4px;
}
.iv-mine-when strong { font-size: 1.5rem; line-height: 1; }
.iv-mine-when span {
    font-size: .7rem; text-transform: uppercase;
    letter-spacing: .07em; margin-top: 2px;
}
.iv-mine-card.off .iv-mine-when { background: #9a99ad; }

.iv-mine-body { display: grid; gap: 7px; min-width: 0; }
.iv-mine-body h3 {
    margin: 0; font-size: 1.05rem;
    display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.iv-mine-meta  { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.iv-mine-time  { margin: 0; font-size: .95rem; line-height: 1.6; }
.iv-mine-where { margin: 0; font-size: .9rem; line-height: 1.6; }
.iv-mine-note {
    margin: 0; font-size: .89rem; line-height: 1.6;
    background: #f4f6fb; border-radius: 9px; padding: 10px 12px;
}
.iv-mine-nolink { margin: 0; font-size: .86rem; }

.iv-mine-join { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.iv-mine-join .muted { font-size: .82rem; }

.iv-mine-history { margin: 2px 0 0; font-size: .85rem; }
.iv-mine-history summary { cursor: pointer; color: var(--pine, #16124a); font-weight: 600; }
.iv-mine-history ul { margin: 9px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.iv-mine-history li { line-height: 1.5; }
.iv-mine-history .muted { font-size: .8rem; }

.pill-grey { background: #eef0f5; color: #5b6170; }

/* ======================================================================
   The jobs a candidate has applied for
   ====================================================================== */

.myapp-list { display: grid; gap: 14px; }

.myapp-card {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; background: #fff; min-width: 0;
    display: grid; gap: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.myapp-card:hover { border-color: #cfd4e4; box-shadow: 0 2px 10px rgba(20,18,51,.05); }
.myapp-card.closed { background: #fbfbfd; }
.myapp-card.closed .myapp-what h3 { color: var(--ink-soft); }

.myapp-head {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: flex-start; justify-content: space-between;
}
.myapp-what { min-width: 0; display: grid; gap: 3px; }
.myapp-what h3 { margin: 0; font-size: 1.06rem; line-height: 1.3; }
.myapp-what h3 a { color: inherit; text-decoration: none; }
.myapp-what h3 a:hover { color: var(--pine, #16124a); text-decoration: underline; }
.myapp-by { margin: 0; font-size: .85rem; color: var(--ink-soft); }

.myapp-chip {
    flex: 0 0 auto; font-size: .74rem; font-weight: 700;
    letter-spacing: .02em; padding: 5px 12px; border-radius: 20px;
    background: #eef0f5; color: #5b6170; white-space: nowrap;
}
.myapp-chip.tone-blue  { background: #e8efff; color: #2550b8; }
.myapp-chip.tone-green { background: #e3f6ee; color: #0b6446; }
.myapp-chip.tone-grey  { background: #eef0f5; color: #5b6170; }

/* ---- how far along it is ---- */
.myapp-track {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    position: relative;
}
.myapp-track li {
    display: grid; justify-items: center; gap: 6px;
    position: relative; min-width: 0; text-align: center;
}
/* The line between the dots. Drawn behind them, and only between - the
   first and last stop at their own dot rather than running off the end. */
.myapp-track li::before {
    content: ""; position: absolute; top: 6px; left: -50%;
    width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.myapp-track li:first-child::before { display: none; }
.myapp-track li.done::before,
.myapp-track li.now::before { background: #0f8a5f; }

.myapp-track .dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--line);
    position: relative; z-index: 1;
}
.myapp-track li.done .dot { background: #0f8a5f; border-color: #0f8a5f; }
.myapp-track li.now .dot {
    background: #0f8a5f; border-color: #0f8a5f;
    box-shadow: 0 0 0 4px rgba(15,138,95,.16);
}
.myapp-track .myapp-step {
    font-size: .72rem; line-height: 1.3; color: var(--ink-soft);
    overflow-wrap: anywhere;
}
.myapp-track li.done .myapp-step,
.myapp-track li.now .myapp-step { color: #0b6446; font-weight: 650; }

@media (max-width: 520px) {
    /* Five labels across a phone is unreadable, so only the one they are
       on keeps its words; the rest stay as dots on the line. */
    .myapp-track .myapp-step { display: none; }
    .myapp-track li.now .myapp-step {
        display: block; position: absolute; top: 22px;
        white-space: nowrap; font-size: .74rem;
    }
    .myapp-track { margin-bottom: 20px; }
}

.myapp-says { margin: 0; font-size: .89rem; color: var(--ink-soft); line-height: 1.55; }
.myapp-offer {
    margin: 0; font-size: .89rem; line-height: 1.6;
    background: #e3f6ee; color: #0b6446;
    border-radius: 10px; padding: 10px 13px;
}
.myapp-more { margin: 14px 0 0; font-size: .88rem; }
.myapp-more a { font-weight: 600; }

/* ---- the application form on a job page ---- */
.apply-form { display: grid; gap: 13px; }
.apply-two { display: grid; gap: 13px; }
@media (min-width: 420px) { .apply-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apply-form .eq-field { min-width: 0; }
.apply-form input[type="file"] {
    width: 100%; box-sizing: border-box; font-size: .86rem;
    padding: 9px 10px; border: 1px dashed var(--line); border-radius: 10px;
    background: #fbfbfd;
}
.apply-form small { display: block; margin-top: 4px; font-size: .8rem;
                    color: var(--ink-soft); line-height: 1.45; }
.apply-check {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: .88rem; font-weight: 500;
    text-transform: none; letter-spacing: normal; font-family: inherit;
}
.apply-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pine, #16124a); }

/* =========================================================
   The candidate's own page
   ---------------------------------------------------------
   Rebuilt around one question: has anything moved? The old
   page opened with four counters that read 0, 0, 0 B, 0 and
   buried the offer somebody was waiting on four screens down.
   So the top now carries the single next thing, the counters
   only appear when they have something behind them, and the
   settings move to a column of their own instead of running
   down the middle of the page.
   ========================================================= */

.dash-hero {
    background:
        radial-gradient(900px 300px at 85% -10%, rgba(58, 47, 214, .55), transparent 60%),
        linear-gradient(170deg, var(--indigo-900) 0%, #1d1766 100%);
    color: #fff;
    padding: 40px 0 92px;
}
.dash-hero-in {
    display: flex; flex-wrap: wrap; gap: 26px;
    align-items: flex-start; justify-content: space-between;
}
.dash-hello { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }

.dash-avatar {
    flex: 0 0 auto;
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--display); font-size: 1.6rem; font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.3);
}
.dash-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 6px;
}
.dash-hero h1 {
    font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.1; margin: 0 0 8px; color: #fff;
}
.dash-welcome { margin: 0; color: rgba(255,255,255,.76); max-width: 46ch; font-size: .95rem; }

/* The one thing worth saying. Given a card of its own so it cannot be
   mistaken for part of the greeting. */
.dash-next {
    flex: 1 1 320px; max-width: 420px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-left: 3px solid var(--amber);
    border-radius: var(--r-md);
    padding: 16px 18px;
    backdrop-filter: blur(6px);
}
.dash-next-good { border-left-color: #35d6a4; }
.dash-next-warn { border-left-color: var(--amber); }
.dash-next-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 7px;
}
.dash-next-head { font-weight: 700; font-size: 1.04rem; color: #fff; line-height: 1.35; }
.dash-next-body { color: rgba(255,255,255,.78); font-size: .9rem; margin-top: 4px; }
/* Written strongly because this sits on a dark panel inside the page
   body, where the ordinary link colour would be all but unreadable. */
.dash-next a.dash-next-go,
.dash-next a.dash-next-go:visited {
    display: inline-block; margin-top: 12px;
    color: #fff; font-weight: 600; font-size: .9rem;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5);
    padding-bottom: 1px;
}
.dash-next a.dash-next-go:hover,
.dash-next a.dash-next-go:focus { color: #fff; border-bottom-color: #fff; text-decoration: none; }

.dash-main { padding-bottom: 60px; }

/* Counters, lifted over the edge of the hero. */
/* Flex rather than grid, because a grid with a capped track width lays
   out four tiles and wraps the fifth onto a row of its own while there
   is still room beside it. These shrink to fit instead, down to a floor,
   and stop growing at a width that keeps two of them from stretching
   half a metre wide. */
.dash-tiles {
    display: flex; flex-wrap: wrap; gap: 12px; margin: -62px 0 26px;
}
.dash-tiles > .dash-tile { flex: 1 1 158px; max-width: 232px; }
.dash-tile {
    display: block; text-decoration: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 15px 16px;
    box-shadow: var(--shadow-card);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.dash-tile:hover {
    transform: translateY(-2px); text-decoration: none;
    border-color: #cfd4e4; box-shadow: var(--shadow-lift);
}
.dash-tile-n {
    display: block; font-family: var(--display);
    font-size: 1.85rem; font-weight: 700; line-height: 1; color: var(--ink);
}
.dash-tile-l {
    display: block; margin-top: 7px;
    font-size: .84rem; font-weight: 600; color: var(--ink);
}
.dash-tile-s { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-3); }
.dash-tile.hot { border-color: #bcd9cc; background: linear-gradient(180deg, var(--ok-50), #fff 70%); }
.dash-tile.hot .dash-tile-n { color: var(--ok); }

/* Two columns: what is moving, and what is settings. */
.dash-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.dash-col, .dash-side { display: grid; gap: 20px; min-width: 0; }

.dash-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
.dash-card-head {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line-soft);
}
.dash-card-head h2 {
    font-family: var(--display); font-size: 1.08rem; font-weight: 700;
    margin: 0; color: var(--ink); letter-spacing: -.01em;
}
.dash-count {
    margin-left: auto; flex: 0 0 auto;
    font-size: .76rem; font-weight: 600; color: var(--ink-3);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}
.dash-count.hot { color: var(--ok); background: var(--ok-50); border-color: #bcd9cc; }
.dash-more { margin: 16px 0 0; }

/* An empty section says its one line quietly, instead of drawing the
   big "Nothing yet" block the old page used in four places at once. */
.dash-quiet { margin: 0; color: var(--ink-2); font-size: .9rem; max-width: 56ch; }

/* Anything folded away: history, password. */
.dash-fold > summary {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; list-style: none;
    font-family: var(--display); font-size: 1.08rem; font-weight: 700; color: var(--ink);
}
.dash-fold > summary::-webkit-details-marker { display: none; }
.dash-fold > summary::after {
    content: ""; margin-left: auto; flex: 0 0 auto;
    width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); transition: transform .15s ease;
}
.dash-fold[open] > summary::after { transform: rotate(-135deg); }
.dash-fold > summary .dash-count { margin-left: 0; }
.dash-fold[open] > summary {
    padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}

/* How far along the profile is. */
.dash-meter { margin-bottom: 14px; }
.dash-meter-bar {
    height: 7px; border-radius: 20px; background: var(--line-soft); overflow: hidden;
}
.dash-meter-bar span {
    display: block; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--indigo), #6b5bff);
    transition: width .4s ease;
}
.dash-meter-say { margin-top: 7px; font-size: .82rem; color: var(--ink-3); }
.dash-meter-say strong { color: var(--ink); }

.dash-todo { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.dash-todo li {
    position: relative; padding-left: 24px;
    font-size: .86rem; color: var(--ink-2);
}
.dash-todo li::before {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid var(--line); background: #fff;
}
.dash-todo li.have { color: var(--ink-3); }
.dash-todo li.have::before { background: var(--ok); border-color: var(--ok); }
.dash-todo li.have::after {
    content: ""; position: absolute; left: 5px; top: 6px;
    width: 4px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(42deg);
}

.dash-facts {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
    margin: 0 0 16px; font-size: .85rem;
}
.dash-facts dt { color: var(--ink-3); }
.dash-facts dd { margin: 0; color: var(--ink); font-weight: 500; word-break: break-word; }
.dash-hint { margin: 0 0 14px; }
.dash-form { max-width: 100%; }

/* The privacy switches sit in the narrow column now, so they lose the
   wide-page indent they were drawn with. */
.dash-card .visibility { margin: 0; border: 0; padding: 0; background: none; }

@media (max-width: 1040px) {
    .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .dash-hero { padding: 28px 0 80px; }
    .dash-hero-in { gap: 20px; }
    .dash-avatar { width: 48px; height: 48px; font-size: 1.25rem; }
    .dash-next { max-width: none; }
    .dash-tiles { margin-top: -58px; gap: 10px; }
    /* Two to a row, and an odd last one stays half-width rather than
       stretching across the phone on its own. */
    .dash-tiles > .dash-tile { flex: 1 1 136px; max-width: calc(50% - 5px); }
    .dash-tile { padding: 13px 14px; }
    .dash-tile-n { font-size: 1.55rem; }
    .dash-card { padding: 18px 16px; border-radius: var(--r-md); }
}

/* =========================================================
   The jobs page
   ---------------------------------------------------------
   A search at the top, categories under it, then filters
   beside the list. Everything here is prefixed j- so it
   cannot reach the employer screens, which share this
   stylesheet and have their own job cards.
   ========================================================= */

.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;
}

/* A tick that is drawn, so the page needs no icon font. */
.tick {
    flex: 0 0 auto; display: inline-block; position: relative;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--ok); vertical-align: -3px; margin-right: 8px;
}
.tick::after {
    content: ""; position: absolute; left: 6px; top: 4px;
    width: 4px; height: 8px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(42deg);
}

/* ---------------- Hero ---------------- */
.jhero {
    background:
        radial-gradient(760px 320px at 88% 0%, rgba(58, 47, 214, .10), transparent 62%),
        linear-gradient(180deg, #eef1fe 0%, #f6f6fb 100%);
    border-bottom: 1px solid var(--line);
    padding: 44px 0 40px;
}
.jhero-in { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; }
.jhero h1 {
    font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    line-height: 1.08; margin: 0 0 10px; color: var(--ink); letter-spacing: -.02em;
}
.jhero-say > p { margin: 0 0 22px; color: var(--ink-2); font-size: 1.02rem; max-width: 54ch; }

.jsearch {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; padding: 8px; box-shadow: var(--shadow-card);
}
.jsearch-box { position: relative; flex: 1 1 210px; min-width: 0; }
.jsearch-box input {
    width: 100%; border: 0; background: transparent; padding: 12px 12px 12px 38px;
    font: inherit; font-size: .95rem; color: var(--ink);
}
.jsearch-box input:focus { outline: none; }
.jsearch-box:focus-within { background: var(--indigo-50); border-radius: 9px; }
.jsearch-box + .jsearch-box { border-left: 1px solid var(--line-soft); }
.jsearch-go { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }

/* The little marks inside the search boxes and on a job card. */
.ic-find::before, .ic-pin::before, .ic-user::before {
    content: ""; position: absolute; left: 12px; top: 50%; width: 17px; height: 17px;
    transform: translateY(-50%); opacity: .55;
    background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.ic-find::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.ic-pin::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.ic-user::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0114 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0114 0'/%3E%3C/svg%3E");
}

.jpop { margin: 16px 0 0; font-size: .87rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.site .jpop-chip {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 4px 12px; color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.site .jpop-chip:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }

.jhero-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jhero-usp li {
    display: flex; align-items: flex-start; gap: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: 11px;
    padding: 12px 14px; font-size: .87rem; font-weight: 500; color: var(--ink);
    box-shadow: var(--shadow-card); line-height: 1.4;
}

/* ---------------- Categories ---------------- */
.jmain { padding: 28px 0 56px; }
.jcats { margin-bottom: 26px; }
.jcats-head, .jbox-head, .jlist-head {
    display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
.jcats-head h2, .jbox-head h2, .jlist-head h2 {
    font-family: var(--display); font-size: 1.18rem; margin: 0; color: var(--ink);
}
.jcats-head a, .jbox-head a { margin-left: auto; font-size: .86rem; font-weight: 600; white-space: nowrap; }

.jcats-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site .jcat {
    display: block; text-decoration: none; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 16px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.site .jcat:hover {
    transform: translateY(-2px); text-decoration: none;
    border-color: #cfd4e4; box-shadow: var(--shadow-lift);
}
.site .jcat.on { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }
.jcat-ic {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 11px; background: var(--indigo-50); color: var(--indigo); margin-bottom: 11px;
}
.jcat-ic svg { width: 21px; height: 21px; }
.jcat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); }
.jcat-n { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }

/* ---------------- Filters beside the list ---------------- */
.jgrid { display: grid; gap: 20px; grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
.jside { display: grid; gap: 16px; min-width: 0; }

.jfilters {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.jfilters > summary { display: none; }       /* a fold on a phone only */
.jf-body { padding: 18px 18px 8px; }
.jf-top { display: flex; align-items: baseline; margin-bottom: 4px; }
.jf-top h2 { font-family: var(--display); font-size: 1.02rem; margin: 0; color: var(--ink); }
.site .jf-clear { margin-left: auto; font-size: .82rem; font-weight: 600; }

.jf-group { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.jf-group:first-of-type { border-top: 0; }
.jf-group h3 {
    font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 9px;
}
.jf-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site .jf-group a {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 6px; margin: 0 -6px; border-radius: 7px;
    font-size: .87rem; color: var(--ink-2); text-decoration: none;
}
.site .jf-group a:hover { background: var(--paper); text-decoration: none; color: var(--ink); }
.site .jf-group a.on { color: var(--ink); font-weight: 600; }
.jf-group li.none a { opacity: .42; }

.jf-box {
    flex: 0 0 auto; position: relative; width: 16px; height: 16px;
    border: 1.5px solid #c6c9db; border-radius: 4px; background: #fff;
}
.jf-box.round { border-radius: 50%; }
.jf-group a.on .jf-box { background: var(--indigo); border-color: var(--indigo); }
.jf-group a.on .jf-box::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(42deg);
}
.jf-group a.on .jf-box.round::after { left: 4px; top: 2px; }
.jf-label { min-width: 0; overflow-wrap: anywhere; }
.jf-n { margin-left: auto; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.jf-pay { display: flex; gap: 7px; }
.jf-pay input {
    width: 100%; min-width: 0; padding: 8px 10px; font: inherit; font-size: .85rem;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.jf-pay input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }
.jf-note { margin: 9px 0 0; font-size: .78rem; color: var(--ink-3); line-height: 1.45; }

/* ---------------- The list ---------------- */
.jlist-head { flex-wrap: wrap; }
.jlist-n { color: var(--ink-3); font-weight: 500; }
.jsort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-3); }
.jsort label { white-space: nowrap; margin: 0; font-size: inherit; color: inherit;
               text-transform: none; letter-spacing: normal; font-weight: 500; }
.jsort select {
    font: inherit; font-size: .85rem; padding: 7px 10px; color: var(--ink);
    border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.jsort select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }

.jcards { display: grid; gap: 12px; }
.jcard {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 16px 18px; box-shadow: var(--shadow-card);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.jcard:hover { border-color: #cfd4e4; box-shadow: var(--shadow-lift); }
.jcard.feat { border-left: 3px solid var(--amber); }
.jcard-top { display: flex; gap: 14px; align-items: flex-start; }
.jcard-head { flex: 1 1 auto; min-width: 0; }
.jcard-head h3 {
    font-family: var(--display); font-size: 1.04rem; margin: 0 0 3px;
    line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.site .jcard-head h3 a { color: var(--ink); text-decoration: none; }
.site .jcard-head h3 a:hover { color: var(--indigo); }
.jcard-by { margin: 0 0 7px; font-size: .86rem; color: var(--ink-2); }

.jcard-facts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.jcard-facts li { position: relative; padding-left: 21px; font-size: .83rem; color: var(--ink-2); }
/* The same marks are used inside the search boxes, where they are inset
   from the edge of a padded field. On a list item there is no padding to
   clear, so they sit at the start instead of on top of the words. */
.jcard-facts li::before { left: 0; }

.jcard-chips, .jcard-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.jcard-skills { margin-top: 8px; }
.jtag {
    display: inline-block; font-size: .74rem; font-weight: 600; border-radius: 6px;
    padding: 3px 9px; background: var(--ok-50); color: var(--ok); white-space: nowrap;
}
.jtag.mode { background: var(--indigo-50); color: var(--indigo-600); }
.jtag.feat { background: var(--amber-50); color: var(--amber-700); }
.jskill {
    display: inline-block; font-size: .76rem; border-radius: 6px; padding: 3px 9px;
    background: var(--paper); border: 1px solid var(--line); color: var(--ink-2);
}
.jcard-cert { display: flex; align-items: center; margin: 10px 0 0; font-size: .8rem; font-weight: 600; color: var(--ok); }
.jcard-cert.hard { color: var(--amber-700); }
.jcard-cert.hard .tick { background: var(--amber-700); }

.jcard-side { flex: 0 0 auto; width: 168px; text-align: right; }
.jcard-pay { font-weight: 700; font-size: .92rem; color: var(--ink); }
.jcard-when { font-size: .78rem; color: var(--ink-3); margin-top: 3px; }
.jcard-do { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: 12px; }
.jcard-do .btn { width: 100%; text-align: center; }
.jsave-form { width: 100%; }
.jsave {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer;
    padding: 8px 12px; border-radius: 8px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
}
.jsave:hover { border-color: var(--indigo); color: var(--indigo); }
.jsave.on { background: var(--indigo-50); border-color: var(--indigo); color: var(--indigo-600); }
.jsave-mark {
    width: 12px; height: 15px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a1 1 0 011 1v17l-7-4-7 4V4a1 1 0 011-1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a1 1 0 011 1v17l-7-4-7 4V4a1 1 0 011-1z'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: .55;
}
.jsave.on .jsave-mark { opacity: 1; }

/* A company's mark: its logo, or its initials in a colour of its own. */
.cmark {
    flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
    width: 46px; height: 46px; border-radius: 11px;
    background: var(--paper); border: 1px solid var(--line);
}
.cmark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.cmark.noimg {
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    color: hsl(var(--mark-hue, 250) 52% 38%);
    background: hsl(var(--mark-hue, 250) 70% 95%);
    border-color: hsl(var(--mark-hue, 250) 50% 88%);
}

.jempty {
    background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-md);
    padding: 44px 24px; text-align: center;
}
.jempty h3 { font-family: var(--display); font-size: 1.1rem; margin: 0 0 8px; color: var(--ink); }
.jempty p { margin: 0 0 14px; color: var(--ink-2); }

/* ---------------- The one promotional band ---------------- */
.jpromo {
    display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 260px; align-items: center;
    background:
        radial-gradient(600px 240px at 88% 0%, rgba(58, 47, 214, .5), transparent 62%),
        linear-gradient(160deg, var(--indigo-900), #241b7a);
    color: #fff; border-radius: var(--r-md); padding: 24px 26px;
}
.jpromo-eyebrow {
    margin: 0 0 7px; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.6);
}
.jpromo h3 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 8px; color: #fff; line-height: 1.22; }
.jpromo-say > p { margin: 0; color: rgba(255,255,255,.8); font-size: .92rem; max-width: 52ch; }
.jpromo-do { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px !important; }
.site .jpromo-do .btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.site .jpromo-do .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.jpromo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jpromo-list li { display: flex; align-items: flex-start; font-size: .85rem; color: rgba(255,255,255,.92); line-height: 1.4; }
.jpromo-list .tick { background: #35d6a4; }

/* ---------------- Pages ---------------- */
.jpager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 22px; }
.site .jpager a {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px; border-radius: 8px; font-size: .88rem; font-weight: 600;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-2); text-decoration: none;
}
.site .jpager a:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }
.site .jpager a.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.site .jpager a.off { opacity: .4; pointer-events: none; }
.jpager-gap { align-self: center; color: var(--ink-3); padding: 0 2px; }

/* ---------------- Under the list ---------------- */
.jbelow { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 30px; }
.jcard-box {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-card);
}
.jfirms { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.site .jfirm {
    display: block; text-align: center; text-decoration: none; padding: 13px 8px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.site .jfirm:hover { border-color: var(--indigo); text-decoration: none; }
.site .jfirm.on { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }
.jfirm-logo { margin: 0 auto 8px; }
.jfirm-name { display: block; font-size: .83rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.jfirm-n { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 1px; }

.jreads { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site .jreads a {
    display: block; padding: 11px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none;
}
.site .jreads a:hover { background: var(--paper); text-decoration: none; }
.jread-title { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
.jread-say { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 1040px) {
    .jhero-in { grid-template-columns: 1fr; }
    .jhero-usp { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .jgrid { grid-template-columns: 1fr; }
    .jpromo { grid-template-columns: 1fr; }

    /* The filters become a fold, so the jobs are the first thing read. */
    .jfilters > summary {
        display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
        padding: 14px 18px; font-family: var(--display); font-weight: 700; color: var(--ink);
    }
    .jfilters > summary::-webkit-details-marker { display: none; }
    .jfilters > summary::after {
        content: ""; margin-left: auto; width: 9px; height: 9px;
        border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
        transform: rotate(45deg); transition: transform .15s ease;
    }
    .jfilters[open] > summary::after { transform: rotate(-135deg); }
    .jfilters[open] > summary { border-bottom: 1px solid var(--line-soft); }
    .jf-on {
        background: var(--indigo); color: #fff; font-size: .74rem; font-weight: 700;
        border-radius: 20px; padding: 1px 9px;
    }
    .jf-top { display: none; }                /* the summary already says it */
    .jf-body { padding-top: 6px; }
}

@media (max-width: 720px) {
    .jhero { padding: 26px 0 28px; }
    .jsearch { padding: 6px; }
    .jsearch-box + .jsearch-box { border-left: 0; border-top: 1px solid var(--line-soft); }
    .jsearch-go { width: 100%; }
    .jcats-row { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

    /* The card stacks: the pay and the buttons move under the detail
       rather than squeezing into a column a thumb cannot hit. */
    .jcard-top { flex-wrap: wrap; }
    .jcard-side { width: 100%; text-align: left; border-top: 1px solid var(--line-soft); padding-top: 12px; }
    .jcard-do { flex-direction: row; align-items: stretch; }
    .jcard-do .btn, .jsave-form { flex: 1 1 0; }
    .jcard-logo { width: 40px; height: 40px; }
}

/* =========================================================
   One job, in full
   ---------------------------------------------------------
   A summary card at the top with the Apply button in it, the
   detail in a column beside a panel of facts, and the form
   at the foot with the certificates that fit the job sitting
   just above it.
   ========================================================= */

.jd-top {
    background: linear-gradient(180deg, #eef1fe 0%, #f6f6fb 100%);
    border-bottom: 1px solid var(--line);
    padding: 20px 0 0;
}
.jd-card {
    display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 240px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px 24px; box-shadow: var(--shadow-card); margin-top: 12px;
}
.jd-card-main { min-width: 0; }
.jd-firm { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.jd-logo { width: 50px; height: 50px; }
.jd-firm-name { margin: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.site .jd-firm-link { font-size: .82rem; }
.jd-flags { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.jd-when { font-size: .79rem; color: var(--ink-3); white-space: nowrap; }

.jd-card h1 {
    font-family: var(--display); font-size: clamp(1.45rem, 3.2vw, 2rem);
    line-height: 1.15; margin: 0 0 12px; color: var(--ink); letter-spacing: -.015em;
}
.jd-facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.jd-facts li { position: relative; padding-left: 22px; font-size: .87rem; color: var(--ink-2); }
.jd-facts li::before { left: 0; }

.jd-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.jskill.must { background: var(--amber-50); border-color: #f0d9a6; color: var(--amber-700); font-weight: 600; }
.jd-must-note { margin: 9px 0 0; font-size: .79rem; color: var(--ink-3); }

.jd-card-do { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.jd-pay { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); text-align: right; margin-bottom: 4px; }
.jd-card-do .btn { text-align: center; }
.site .btn-done {
    background: var(--ok-50); color: var(--ok); border: 1px solid #bcd9cc;
    cursor: default; text-align: center;
}
.jd-share-mark {
    width: 15px; height: 15px; background: currentColor; opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Anchors styled as tabs: they go to the section rather than swapping
   panels, so they work with no JavaScript and can be linked to. */
.jd-tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 16px; padding-bottom: 1px; }
.site .jd-tabs a {
    flex: 0 0 auto; padding: 11px 15px; font-size: .88rem; font-weight: 600;
    color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent;
}
.site .jd-tabs a:hover { color: var(--indigo); border-bottom-color: #c9c4f5; text-decoration: none; }
.site .jd-tabs a:target, .site .jd-tabs a:focus { color: var(--indigo); }

.jd-main { padding: 24px 0 56px; }
.jd-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.jd-col, .jd-side { display: grid; gap: 18px; min-width: 0; }

.jd-box {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-card);
    scroll-margin-top: 18px;
}
.jd-box > h2 {
    font-family: var(--display); font-size: 1.12rem; margin: 0 0 14px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.jd-box h3 {
    font-size: .95rem; font-weight: 700; margin: 22px 0 9px; color: var(--ink);
}
.jd-box h3:first-of-type { margin-top: 0; }
.jd-box > p { color: var(--ink-2); }

.jd-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.jd-perks li {
    display: flex; align-items: flex-start; font-size: .88rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line-soft);
    border-radius: 10px; padding: 11px 13px; line-height: 1.4;
}

.jd-firm-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.jd-firm-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .87rem; }
.jd-firm-facts li { color: var(--ink); }
.jd-firm-facts span { display: inline-block; min-width: 86px; color: var(--ink-3); }

/* ---- the panel of facts ---- */
.jd-overview dl { margin: 0; display: grid; gap: 1px; }
.jd-overview dl > div {
    display: flex; gap: 14px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.jd-overview dl > div:last-child { border-bottom: 0; }
.jd-overview dt { flex: 0 0 auto; width: 118px; font-size: .82rem; color: var(--ink-3); }
.jd-overview dd { margin: 0; font-size: .87rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.jd-side-apply { display: block; text-align: center; margin-top: 16px; }

/* ---- certificates that fit this job ---- */
.jd-suggest {
    background: linear-gradient(135deg, var(--indigo-50), #fff 65%);
    border: 1px solid #d5d1fa; border-radius: var(--r-md);
    padding: 16px 18px; margin-bottom: 20px;
}
.jd-suggest-head { margin: 0 0 12px; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.jd-suggest-head strong { color: var(--ink); display: block; }
.jd-suggest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jd-suggest-list li {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 11px 13px;
}
.jd-sug-say { flex: 1 1 200px; min-width: 0; }
.jd-sug-title { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); }
.jd-sug-why { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 1px; }

.jd-with { margin: 0 0 8px; font-size: .88rem; color: var(--ink-2); }
.jd-with-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.jd-with-list li { display: flex; align-items: center; font-size: .88rem; color: var(--ink); }
.jd-done { display: flex; align-items: center; font-size: .95rem; color: var(--ink); margin: 0 0 14px; }

/* ---- the form ---- */
.apply-legend { margin: 0 0 16px; font-size: .84rem; color: var(--ink-3); }
.req { color: #c0392b; font-weight: 700; }

.apply-cv {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 14px 16px; margin: 4px 0 16px;
}
.apply-cv legend { font-size: .86rem; font-weight: 600; color: var(--ink); padding: 0 6px; }
.apply-radio {
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    padding: 8px 0; font-size: .87rem;
}
.apply-radio input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--indigo); flex: 0 0 auto; }
.apply-radio strong { display: block; font-weight: 600; color: var(--ink); }
.apply-radio span { color: var(--ink-3); line-height: 1.45; }
.apply-cv input[type="file"] { margin-top: 10px; width: 100%; font-size: .86rem; }
.apply-cv small { display: block; margin-top: 7px; font-size: .79rem; color: var(--ink-3); line-height: 1.45; }

.apply-more { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.apply-more > summary {
    display: flex; align-items: center; cursor: pointer; list-style: none;
    padding: 13px 16px; font-size: .9rem; font-weight: 600; color: var(--ink);
}
.apply-more > summary::-webkit-details-marker { display: none; }
.apply-more > summary::after {
    content: ""; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); transition: transform .15s ease;
}
.apply-more[open] > summary::after { transform: rotate(-135deg); }
.apply-more[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
.apply-more > *:not(summary) { padding-left: 16px; padding-right: 16px; }
.apply-more > *:last-child { padding-bottom: 14px; }

.apply-consent {
    align-items: flex-start; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 13px 15px; margin: 4px 0 18px;
}
.apply-consent input { margin-top: 2px; }
.apply-consent span { font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.apply-go { width: 100%; }
.apply-note { margin: 14px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }

/* ---- similar jobs ---- */
.jd-similar { display: grid; gap: 9px; }
.site .jd-sim {
    display: flex; gap: 13px; align-items: center; text-decoration: none;
    border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px;
}
.site .jd-sim:hover { border-color: var(--indigo); text-decoration: none; background: var(--paper); }
.jd-sim-logo { width: 40px; height: 40px; }
.jd-sim-say { min-width: 0; }
.jd-sim-title { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); }
.jd-sim-by { display: block; font-size: .83rem; color: var(--ink-2); margin-top: 1px; }
.jd-sim-facts { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 1040px) {
    .jd-grid { grid-template-columns: 1fr; }
    /* The facts panel goes above the long description on a narrow screen,
       because they are what somebody checks before reading on. */
    .jd-side { order: -1; }
}
@media (max-width: 720px) {
    .jd-card { grid-template-columns: 1fr; padding: 18px 16px; }
    .jd-card-do { border-top: 1px solid var(--line-soft); padding-top: 14px; }
    .jd-pay { text-align: left; }
    .jd-flags { margin-left: auto; }
    .jd-box { padding: 18px 16px; }
    .jd-overview dt { width: 102px; }
}
.jd-suggest-list li.asked { border-color: #d5d1fa; background: linear-gradient(135deg, #fbfaff, #fff); }
.jd-suggest-list li.asked .jd-sug-why { color: var(--indigo-600); font-weight: 600; }

/* =========================================================
   The panel beside a job
   ---------------------------------------------------------
   Written in Admin -> Settings. With no picture it draws its
   own background, so it never shows a gap or a broken image.
   With a finished banner - one that already carries its own
   words - the picture is shown whole and the whole panel is
   the link, so nothing is said twice.
   ========================================================= */

.jb {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); padding: 24px 22px; color: #fff;
    background:
        radial-gradient(420px 220px at 80% 0%, rgba(58, 47, 214, .55), transparent 65%),
        linear-gradient(160deg, var(--indigo-900) 0%, #241b7a 100%);
    box-shadow: var(--shadow-card);
}
.jb h2 {
    font-family: var(--display); font-size: 1.3rem; line-height: 1.2;
    margin: 0 0 9px; color: #fff; letter-spacing: -.01em;
}
.jb p { margin: 0; color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.5; }
.site .jb .jb-go {
    display: block; text-align: center; margin-top: 16px;
    background: #fff; color: var(--indigo-900); border-color: #fff; font-weight: 700;
}
.site .jb .jb-go:hover { background: var(--amber); border-color: var(--amber); color: #2a1c00; }
.jb-aimed {
    margin-top: 9px !important; font-size: .76rem !important;
    color: rgba(255,255,255,.6) !important; text-align: center;
}

/* A photo behind the words. Darkened, because a heading has to stay
   readable whatever picture somebody uploads. */
.jb-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--jb-img); background-size: cover; background-position: center;
}
.jb-photo::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10, 8, 40, .55) 0%, rgba(10, 8, 40, .86) 72%);
}
.jb-photo > * { position: relative; z-index: 2; }

/* A finished banner: shown whole, nothing drawn over it. */
.site .jb-whole {
    display: block; padding: 0; background: none; line-height: 0;
    border: 1px solid var(--line);
}
.jb-whole img { width: 100%; height: auto; display: block; }
.site .jb-whole:hover { box-shadow: var(--shadow-lift); }

@media (max-width: 1040px) {
    /* In one column it would be a very tall picture, so it is capped and
       the interesting part kept. */
    .jb-aside.jb-whole img { max-height: 320px; object-fit: cover; object-position: top center; }
}