/* JOBCHAT /about story page — SELF-CONTAINED styling.
 * Everything is scoped under .jd-about-page so it cannot leak into the rest of the site and does
 * NOT depend on the theme's jobdha-home.css. The --jd-* custom properties are copied from that theme
 * and redeclared HERE on our own scope. The jd-how orbit rules are ported from jobdha-home.css and
 * re-prefixed .jda-how-*. Mobile-first.
 * TOKEN: bump about.css?v=<build>-aNN in controllers/about.php on every edit here. */

.jd-about-page {
    --jd-ink: #101322;
    --jd-muted: #596579;
    --jd-line: #e2e8f0;
    --jd-blue: #0d6efd;
    --jd-blue-dark: #0b5ed7;
    --jd-purple: #691cff;
    --jd-green: #0f9f6e;
    --jd-amber: #f59e0b;
    --jd-surface: #ffffff;
    --jd-soft: #f7f9fd;
    --jd-shadow: 0 18px 46px rgba(16, 19, 34, 0.12);

    color: var(--jd-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    background:
        radial-gradient(circle at 6% 12%, rgba(13, 110, 253, 0.07), transparent 24rem),
        radial-gradient(circle at 94% 8%, rgba(15, 159, 110, 0.08), transparent 20rem),
        linear-gradient(180deg, #f8f8ff 0%, #eef5ff 52%, #ffffff 100%);
    margin: 0 -20px;   /* bleed to the page-padding edges under the general wrapper */
    padding: 0;
}

.jd-about-page,
.jd-about-page * {
    box-sizing: border-box;
}

.jd-about-page h1,
.jd-about-page h2,
.jd-about-page h3,
.jd-about-page p {
    margin: 0;
}

.jd-about-page a {
    text-decoration: none;
}

/* ---- shared width wrapper ---- */
.jd-about-page .jda-wrap,
.jd-about-page .jd-section {
    margin: 0 auto;
    max-width: 1160px;
    width: calc(100% - 32px);
}

.jd-about-page .jd-section {
    padding: 56px 0;
}

.jd-about-page .jda-block-soft {
    background: rgba(247, 249, 253, 0.72);
}

/* ---- section head ---- */
.jd-about-page .jda-section-head {
    max-width: 780px;
    margin: 0 auto 30px;
    text-align: center;
}

.jd-about-page .jda-section-head h2,
.jd-about-page .jda-hero-inner h1 {
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.jd-about-page .jda-section-head h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    margin: 10px 0 12px;
}

.jd-about-page .jda-section-head p {
    color: var(--jd-muted);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
}

/* ---- kicker chip ---- */
.jd-about-page .jda-kicker {
    align-items: center;
    background: #eaf1ff;
    border-radius: 999px;
    color: var(--jd-blue);
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    gap: 7px;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    text-transform: uppercase;
}

/* ---- buttons ---- */
.jd-about-page .jda-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.jd-about-page .jda-primary,
.jd-about-page .jda-secondary {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 15px;
    font-weight: 900;
    gap: 9px;
    justify-content: center;
    min-height: 52px;
    padding: 14px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.jd-about-page .jda-primary {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.28);
    color: #fff;
}

.jd-about-page .jda-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(105, 28, 255, 0.32);
}

/* Force WHITE label/icon on the login-aware primary CTA. The site's global link colour
   is blue and beats the gradient button's own colour, so pin it with !important on the
   anchor + its child icon in every state. (Owner directive, items 1 + 7.) */
.jd-about-page .jda-cta-white,
.jd-about-page .jda-cta-white:link,
.jd-about-page .jda-cta-white:visited,
.jd-about-page .jda-cta-white:hover,
.jd-about-page .jda-cta-white:active,
.jd-about-page .jda-cta-white i {
    color: #fff !important;
}

.jd-about-page .jda-secondary {
    background: #fff;
    border: 1px solid var(--jd-line);
    color: var(--jd-ink);
}

.jd-about-page .jda-secondary:hover {
    border-color: var(--jd-blue);
    color: var(--jd-blue);
    transform: translateY(-2px);
}

/* ============================ 1. HERO ============================ */
.jd-about-page .jda-hero {
    padding: clamp(36px, 6vw, 72px) 0 clamp(20px, 3vw, 36px);
    text-align: center;
}

.jd-about-page .jda-hero-inner {
    max-width: 880px;
}

.jd-about-page .jda-hero-inner h1 {
    font-size: clamp(30px, 5vw, 56px);
    margin: 18px 0 16px;
}

.jd-about-page .jda-lede {
    color: var(--jd-muted);
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 600;
    margin: 0 auto;
    max-width: 640px;
}

.jd-about-page .jda-hero .jda-actions {
    justify-content: center;
}

.jd-about-page .jda-trust {
    align-items: center;
    color: var(--jd-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    margin-top: 22px;
}

/* ==================== 2. MISSION + FOUNDER ==================== */
.jd-about-page .jda-mission-grid {
    align-items: start;
    display: grid;
    gap: clamp(24px, 4vw, 52px);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.jd-about-page .jda-mission-copy h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 12px 0 14px;
}

.jd-about-page .jda-mission-copy > p {
    color: var(--jd-muted);
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 600;
}

.jd-about-page .jda-founder-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-line);
    border-radius: 16px;
    box-shadow: var(--jd-shadow);
    padding: 22px;
    text-align: center;
}

.jd-about-page .jda-founder-img {
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    height: 175px;
    max-width: 100%;
    object-fit: cover;
    width: 325px;
}

.jd-about-page .jda-founder-card h3 {
    font-size: 19px;
    font-weight: 900;
    margin: 16px 0 4px;
}

.jd-about-page .jda-founder-role {
    color: var(--jd-muted);
    font-size: 13px;
    font-weight: 700;
}

.jd-about-page .jda-founder-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 14px;
}

.jd-about-page .jda-founder-links a {
    color: var(--jd-muted);
    font-size: 22px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.jd-about-page .jda-founder-links a:hover {
    color: var(--jd-blue);
    transform: translateY(-2px);
}

/* ---- accordion (mission founder-story + why-we-exist folds) ---- */
.jd-about-page .jda-accordion {
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
}

.jd-about-page .jda-folds .jda-accordion {
    margin-top: 0;
    margin-bottom: 14px;
}

.jd-about-page .jda-acc-head {
    align-items: center;
    background: #fff;
    border: 0;
    color: var(--jd-ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 20px;
    text-align: left;
    width: 100%;
}

.jd-about-page .jda-acc-head > span {
    align-items: center;
    display: inline-flex;
    gap: 11px;
}

.jd-about-page .jda-acc-head i:first-child {
    color: var(--jd-blue);
}

.jd-about-page .jda-acc-caret {
    color: var(--jd-muted);
    flex: 0 0 auto;
    transition: transform 0.28s ease;
}

.jd-about-page .jda-acc-head[aria-expanded="true"] .jda-acc-caret {
    transform: rotate(180deg);
}

.jd-about-page .jda-acc-body {
    /* Height animation via the CSS-grid 0fr->1fr trick. The body is a SINGLE-row grid
       and ALL paragraphs live inside ONE inner wrapper (.jda-acc-inner) so the grid
       animates exactly one track. (Previously each <p> was a direct grid child and the
       OPEN state's `grid-auto-rows:1fr` split the panel height into EQUAL fraction rows
       -> every paragraph row stretched to the tallest, producing large white gaps
       between paragraphs, e.g. the 4-<p> founder story.) With one wrapper row the <p>
       flow as normal blocks inside it and keep tight, natural spacing. */
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
}

.jd-about-page .jda-acc-inner {
    min-height: 0;
    overflow: hidden;
}

.jd-about-page .jda-acc-body > p {
    /* fallback: if a <p> is ever a direct child (no inner wrapper), keep it clipped */
    min-height: 0;
    overflow: hidden;
}

.jd-about-page .jda-acc-inner > p {
    color: var(--jd-muted);
    font-size: 15px;
    font-weight: 600;
    padding: 0 20px;
}

/* tight, readable spacing between stacked paragraphs (page reset zeroes <p> margins) */
.jd-about-page .jda-acc-inner > p + p {
    margin-top: 12px;
}

.jd-about-page .jda-accordion.jda-open .jda-acc-body {
    grid-template-rows: 1fr;
}

.jd-about-page .jda-accordion.jda-open .jda-acc-inner {
    padding-bottom: 20px;
}

/* no-JS fallback: show accordion bodies open so content is never hidden */
.jd-about-page:not(.jda-js) .jda-acc-body {
    grid-template-rows: 1fr;
}

.jd-about-page:not(.jda-js) .jda-acc-inner {
    padding-bottom: 20px;
}

/* ==================== 3. HOW-IT-WORKS ORBIT (ported jd-how, re-prefixed) ==================== */
.jd-about-page .jda-how {
    display: flex;
    align-items: center;
    padding: 12px 0 4px;
    position: relative;
}

.jd-about-page .jda-how-shell {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(15, 159, 110, 0.08)),
        rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: clamp(24px, 5vw, 56px);
    grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1fr);
    overflow: hidden;
    padding: clamp(24px, 4vw, 52px);
    position: relative;
    width: 100%;
}

.jd-about-page .jda-how-status {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.jd-about-page .jda-how-status span,
.jd-about-page .jda-how-status b {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    min-height: 32px;
    padding: 7px 12px;
    text-transform: uppercase;
}

.jd-about-page .jda-how-status span { background: #eaf1ff; color: var(--jd-blue); }
.jd-about-page .jda-how-status b    { background: #ecfdf5; color: #087866; }

.jd-about-page .jda-how-copy h3 {
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin: 0 0 12px;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.jd-about-page .jda-how-copy [data-how-copy] {
    color: var(--jd-muted);
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 700;
    line-height: 1.45;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.jd-about-page .jda-how.is-leaving .jda-how-copy h3,
.jd-about-page .jda-how.is-leaving .jda-how-copy [data-how-copy] {
    opacity: 0;
    transform: translateY(-8px);
}

.jd-about-page .jda-how.is-switching .jda-how-copy h3,
.jd-about-page .jda-how.is-switching .jda-how-copy [data-how-copy] {
    animation: jdaHowTextIn 0.34s ease-out both;
}

.jd-about-page .jda-how-mini-progress {
    background: #dbe3ee;
    border-radius: 999px;
    height: 8px;
    margin: 22px 0;
    max-width: 360px;
    overflow: hidden;
}

.jd-about-page .jda-how-mini-progress i {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-green), var(--jd-amber));
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 0.28s ease;
    width: 25%;
}

.jd-about-page .jda-how-actions {
    display: flex;
    gap: 12px;
}

.jd-about-page .jda-how-arrow {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 10px;
    color: var(--jd-blue);
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    height: 50px;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    width: 54px;
}

.jd-about-page .jda-how-arrow.primary,
.jd-about-page .jda-how-arrow:hover {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    box-shadow: 0 14px 26px rgba(13, 110, 253, 0.22);
    color: #fff;
}

.jd-about-page .jda-how-arrow:hover { transform: translateY(-1px); }

.jd-about-page .jda-how-visual {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 400px;
}

.jd-about-page .jda-how-orbit {
    aspect-ratio: 1;
    max-width: min(100%, 480px);
    position: relative;
    width: min(100%, 480px);
}

.jd-about-page .jda-how-ring {
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    transform: rotate(-90deg);
    width: 100%;
}

.jd-about-page .jda-how-ring-bg,
.jd-about-page .jda-how-ring-progress {
    fill: none;
    stroke-width: 10;
}

.jd-about-page .jda-how-ring-bg { stroke: rgba(203, 213, 225, 0.65); }

.jd-about-page .jda-how-ring-progress {
    stroke: #0e37f1;
    stroke-dasharray: 829.38;
    stroke-dashoffset: 829.38;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.42s ease;
}

.jd-about-page .jda-how-center {
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.94));
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 50%;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
    color: #172033;
    display: flex;
    flex-direction: column;
    height: 44%;
    justify-content: center;
    left: 28%;
    padding: 18px;
    position: absolute;
    text-align: center;
    top: 28%;
    width: 44%;
    z-index: 3;
}

.jd-about-page .jda-how-center i {
    align-items: center;
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    font-size: 22px;
    height: 50px;
    justify-content: center;
    margin-bottom: 10px;
    width: 50px;
}

.jd-about-page .jda-how-center strong {
    font-size: 16px;
    font-weight: 950;
    line-height: 1.12;
}

.jd-about-page .jda-how-node {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    left: calc(50% + var(--node-x) - 60px);
    min-height: 50px;
    opacity: 0;
    padding: 8px 10px;
    position: absolute;
    top: calc(50% + var(--node-y) - 25px);
    transform: scale(0.86);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    width: 120px;
    z-index: 4;
}

.jd-about-page .jda-how-node i {
    align-items: center;
    background: #eef2ff;
    border-radius: 8px;
    color: var(--jd-blue);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.jd-about-page .jda-how-node span {
    font-size: 12px;
    font-weight: 950;
    line-height: 1.12;
}

.jd-about-page .jda-how-node.is-visible { opacity: 1; transform: scale(1); }

.jd-about-page .jda-how-node.is-active {
    background: linear-gradient(90deg, var(--jd-blue), var(--jd-purple));
    border-color: transparent;
    color: #fff;
}

.jd-about-page .jda-how-node.is-active i { background: rgba(255, 255, 255, 0.18); color: #fff; }

.jd-about-page .jda-how-node.is-done:not(.is-active) {
    border-color: rgba(15, 159, 110, 0.36);
    color: #087866;
}

.jd-about-page .jda-how.is-complete .jda-how-center i {
    background: linear-gradient(90deg, var(--jd-green), var(--jd-blue));
}

@keyframes jdaHowTextIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== 4. WHY-WE-EXIST quote ==================== */
.jd-about-page .jda-why-quote {
    background: #101322;
    border-radius: 16px;
    color: #fff;
    margin-top: 26px;
    padding: clamp(26px, 4vw, 40px);
    text-align: center;
}

.jd-about-page .jda-why-quote i {
    color: var(--jd-purple);
    font-size: 26px;
    margin-bottom: 12px;
}

.jd-about-page .jda-why-quote p {
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 800;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 720px;
}

/* ==================== 5. PILLARS FLOW-LINE ==================== */
.jd-about-page .jda-flow-line {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.jd-about-page .jda-flow-line a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 999px;
    color: var(--jd-ink);
    display: inline-flex;
    font-size: 15px;
    font-weight: 900;
    gap: 10px;
    padding: 13px 22px;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jd-about-page .jda-flow-line a i { color: var(--jd-blue); }

.jd-about-page .jda-flow-line a:hover {
    border-color: var(--jd-blue);
    box-shadow: 0 12px 26px rgba(13, 110, 253, 0.16);
    transform: translateY(-2px);
}

.jd-about-page .jda-flow-line a:not(:last-child)::after {
    color: #cbd5e1;
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    margin-left: 16px;
    margin-right: -8px;
}

/* ==================== 6. VALUE CARDS ==================== */
.jd-about-page .jda-value-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
}

.jd-about-page .jda-value-card {
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 14px;
    padding: 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.jd-about-page .jda-value-card:hover {
    border-color: var(--jd-blue);
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.1);
    transform: translateY(-4px);
}

.jd-about-page .jda-value-card i {
    align-items: center;
    background: #eef2ff;
    border-radius: 12px;
    color: var(--jd-blue);
    display: inline-flex;
    font-size: 20px;
    height: 48px;
    justify-content: center;
    margin-bottom: 14px;
    width: 48px;
}

.jd-about-page .jda-value-card h3 {
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 8px;
}

.jd-about-page .jda-value-card p {
    color: var(--jd-muted);
    font-size: 14px;
    font-weight: 600;
}

/* ==================== 7. RECOGNITION LOGO STRIP ==================== */
.jd-about-page .jda-logos {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 4vw, 48px);
    justify-content: center;
}

.jd-about-page .jda-logo {
    display: inline-block;
    position: relative;
}

.jd-about-page .jda-logo img {
    filter: grayscale(100%);
    height: 90px;
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    width: auto;
}

.jd-about-page .jda-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.jd-about-page .jda-logo::after {
    background: rgba(16, 19, 34, 0.95);
    border-radius: 6px;
    bottom: 106%;
    color: #fff;
    content: attr(data-title);
    font-size: 12px;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: 6px 12px;
    position: absolute;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    visibility: hidden;
    white-space: nowrap;
    z-index: 9;
}

.jd-about-page .jda-logo:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

/* ==================== 8. STAT GRID ==================== */
.jd-about-page .jda-stat-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}

.jd-about-page .jda-stat {
    background: #fff;
    border: 1px solid var(--jd-line);
    border-radius: 14px;
    padding: 26px 18px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.jd-about-page .jda-stat:hover {
    border-color: var(--jd-blue);
    transform: translateY(-4px);
}

.jd-about-page .jda-stat i {
    color: var(--jd-blue);
    font-size: 26px;
    margin-bottom: 12px;
}

.jd-about-page .jda-stat strong {
    display: block;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1;
}

.jd-about-page .jda-stat span {
    color: var(--jd-muted);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 8px;
}

/* ==================== 9. CTA BAND ==================== */
.jd-about-page .jda-cta-band {
    background:
        radial-gradient(circle at 12% 20%, rgba(105, 28, 255, 0.18), transparent 40%),
        linear-gradient(120deg, #0e1a3f, #101322);
    border-radius: 18px;
    color: #fff;
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
}

.jd-about-page .jda-cta-band h2 {
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 950;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.jd-about-page .jda-cta-band p {
    color: #c7cfe0;
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 600;
    margin: 0 auto;
    max-width: 620px;
}

.jd-about-page .jda-cta-actions {
    justify-content: center;
}

.jd-about-page .jda-cta-band .jda-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.jd-about-page .jda-cta-band .jda-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.jd-about-page .jda-cta-foot {
    align-items: center;
    color: #9aa4bd !important;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 13px !important;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    margin-top: 24px !important;
    max-width: none !important;
}

.jd-about-page .jda-cta-foot a { color: #a29bfe; }
.jd-about-page .jda-cta-foot a:hover { text-decoration: underline; }

/* ==================== REVEAL (scroll entrance) ==================== */
/* armed by about.js only when JS + IntersectionObserver are present (html.jda-reveal-on),
   so a no-JS visitor never sees blank content. */
html.jda-reveal-on .jd-about-page [data-jda-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.jda-reveal-on .jd-about-page [data-jda-reveal].jda-in {
    opacity: 1;
    transform: none;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .jd-about-page .jda-mission-grid { grid-template-columns: 1fr; }
    .jd-about-page .jda-founder-card { max-width: 380px; margin: 0 auto; }
    .jd-about-page .jda-value-grid   { grid-template-columns: repeat(2, 1fr); }
    .jd-about-page .jda-stat-grid    { grid-template-columns: repeat(2, 1fr); }

    .jd-about-page .jda-how-shell {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .jd-about-page .jda-how-copy { order: 2; }
    .jd-about-page .jda-how-visual { order: 1; min-height: 340px; }
    .jd-about-page .jda-how-orbit { max-width: min(100%, 380px); width: min(100%, 380px); }
}

@media (max-width: 560px) {
    .jd-about-page .jda-value-grid,
    .jd-about-page .jda-stat-grid { grid-template-columns: 1fr; }
    .jd-about-page .jda-actions .jda-primary,
    .jd-about-page .jda-actions .jda-secondary { width: 100%; }
    .jd-about-page .jda-flow-line a:not(:last-child)::after { display: none; }
    .jd-about-page .jda-logo img { height: 66px; }
    .jd-about-page .jda-how-node {
        border-radius: 999px;
        gap: 4px;
        height: 34px;
        left: calc(50% + var(--node-x) - 38px);
        min-height: 34px;
        padding: 4px 6px;
        top: calc(50% + var(--node-y) - 17px);
        width: 76px;
    }
    .jd-about-page .jda-how-node i { flex-basis: 21px; font-size: 10px; height: 21px; width: 21px; }
    .jd-about-page .jda-how-node span { font-size: 9px; }
    .jd-about-page .jda-how-orbit { max-width: min(100%, 300px); width: min(100%, 300px); }
    .jd-about-page .jda-how-visual { min-height: 280px; }
}

/* respect reduced motion: no reveal/orbit transitions/count-up motion */
@media (prefers-reduced-motion: reduce) {
    html.jda-reveal-on .jd-about-page [data-jda-reveal],
    html.jda-reveal-on .jd-about-page [data-jda-reveal].jda-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .jd-about-page .jda-how-copy h3,
    .jd-about-page .jda-how-copy [data-how-copy],
    .jd-about-page .jda-how-ring-progress,
    .jd-about-page .jda-how-node,
    .jd-about-page .jda-primary,
    .jd-about-page .jda-secondary,
    .jd-about-page .jda-acc-caret,
    .jd-about-page .jda-acc-body {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   HOST-PAGE LAYOUT — sidebar-hide + desktop margin (mirrors institutions.css:630-640,
   re-scoped to about). DESKTOP-only: the theme base .ow_page{margin:0 260px 0 124px}
   leaves a 260px right gutter once the sidebar is hidden, so we re-close it ONLY at
   >=980px. At <980px the theme already resets .ow_page to full-width with the sidebar
   stacked, so mobile is left UNTOUCHED.
   ============================================================================ */
@media (min-width: 980px) {
    body.jobchat_ctrl_about_index .ow_page {
        margin: 0 0 0 124px !important;
    }
    body.jobchat_ctrl_about_index .ow_sidebar {
        display: none !important;
    }
}