/* =========================================================================
   Visual upgrade, October 2026 (built on staging first)

   Everything the upgrade adds lives here, loaded after seekout.css, so it can
   be reviewed and rolled back on its own. Brand values only: Indigo #21003b,
   Aubergine #4f0064, Tangerine #ff7d00 (never as text on light grounds),
   Lavender #d8b3ff, Vanilla #fff9f1. Measured contrast on Indigo: Vanilla
   17.8:1, Tangerine 7.26:1, the lilac eyebrow #cdbfd8 9.8:1.

   Pages on the upgrade carry the body class .so-upgraded (functions.php,
   seekout_upgraded_pages()). Rules for parts that many pages share are scoped
   to it, so pages not yet moved keep their look.

   Brand Identity Guidelines v1 (2022), as applied here: solid colors, never
   gradients; Indigo and Vanilla rather than pure black and white; headlines
   in GT Alpina, never below 30px on screen; illustrations flat and solid, beside text
   and never under it, and never in the same composition as a photograph;
   buttons rounded, Tangerine as the primary on dark grounds.
   ========================================================================= */

/* GT Alpina for display type, the same file /youxai serves. Licensed from Grilli Type;
   SeekOut's web license covers the site (confirmed October 6, 2026). Should that ever change,
   set --so-display to the body face and every headline falls back with nothing else changing. */
@font-face {
    font-family: 'SeekOut Display';
    src: url('../fonts/youxai/gt-alpina-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.so-upgraded {
    --so-display: 'SeekOut Display', Georgia, 'Times New Roman', serif;
    --so-indigo: #21003b;
    --so-aubergine: #4f0064;
    --so-amethyst: #781fb3;
    --so-violet: #9e00f0;
    --so-iris: #b476f1;
    --so-lavender: #d8b3ff;
    --so-lilac: #ebdeff;
    --so-tangerine: #ff7d00;
    --so-biscuit: #ffe8c7;
    --so-vanilla: #fff9f1;
    --so-line-dark: #3d1d57;   /* a rule on Indigo: Indigo and Aubergine mixed, solid */
    /* Light gray grounds become Vanilla, the brand's warm white */
    --gray-50: #fff9f1;
}

/* Brand icons (inc/brand-icons.php): filled outlines, colored by currentColor */
.bi { display: inline-block; flex: none; fill: currentColor; }

/* Icon tiles on upgraded pages: Aubergine on solid Lilac instead of gray */
.so-upgraded .included-icon,
.so-upgraded .why-icon,
.so-upgraded .support-icon,
.included-card .pillar-icon,
.landing-bullets .bi-tile {
    color: #4f0064;
    background: #ebdeff;
}

/* Brand strands canvas (assets/js/strands.js): fills its section, behind the content.
   It is transparent until the first frame, so phones and reduced-motion visitors simply
   see the section's own background. */
.strands-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.strands-bg.is-drawn { opacity: 1; }

/* -------------------------------------------------------------------------
   Home hero, dark. The brand chevrons in Indigo tones, drifting slowly under
   an Indigo veil, so the shapes read as quiet movement behind white type.
   Phones and tablets, which never load the video, keep the still (below).
   ------------------------------------------------------------------------- */
.hero.hero-dark { background: #21003b; }
.hero-dark .hero-video::after {
    background:
        radial-gradient(900px 480px at 50% 38%, rgba(33, 0, 59, 0.55) 0%, rgba(33, 0, 59, 0) 72%),
        linear-gradient(180deg, rgba(33, 0, 59, 0.66) 0%, rgba(33, 0, 59, 0.74) 46%, rgba(27, 0, 49, 0.95) 100%);
}
.hero-dark .hero-eyebrow { color: #cdbfd8; }
.hero-dark h1 { color: #fff9f1; }
.hero-dark .hero-subtitle { color: #ff7d00; }
.hero-dark .hero-assistant-flag {
    color: #ebdeff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-dark .hero-assistant-flag:hover { background: rgba(255, 255, 255, 0.14); }
.hero-dark .path-card.tools {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 44px 100px -36px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hero-dark .hero-video-toggle {
    background: rgba(33, 0, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff9f1;
}
.hero-dark .hero-video-toggle:focus-visible { outline-color: #fff9f1; }
/* The film's pause button, which also stops the rotating headlines, stays out of sight for
   pointer and touch visitors and appears when a keyboard user tabs to it (WCAG 2.2.2) */
.hero-dark .hero-video-toggle:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* -------------------------------------------------------------------------
   Form pages, dark (request demo, free trial, partners): solid Indigo, Vanilla
   type, the white form card as the brightest thing on the page. Chips and
   tiles are solid Aubergine. The strands run behind the form card and fade
   to a trace behind the text column, so they never cross the reading.
   ------------------------------------------------------------------------- */
.request-demo.is-upgraded,
.free-trial.is-dark { position: relative; overflow: hidden; }
.request-demo.is-upgraded .landing-layout,
.free-trial.is-dark .landing-layout { position: relative; z-index: 1; }
.request-demo .strands-bg,
.free-trial .strands-bg {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 44%, #000 53%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 44%, #000 53%);
}
.request-demo.is-dark,
.free-trial.is-dark { background: #21003b; }
.is-dark .landing-content h1 {
    font-family: var(--so-display, 'SeekOut Display', Georgia, serif);
    font-weight: 400;
    font-size: clamp(2.3rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: #fff9f1;
    text-wrap: balance;
}
.is-dark .landing-content h1 .text-purple {
    background: none;
    color: #d8b3ff;
    -webkit-text-fill-color: #d8b3ff;
}
.is-dark .hero-assistant-flag { color: #ebdeff; background: #4f0064; border-color: #4f0064; }
.is-dark .hero-assistant-flag:hover { background: #781fb3; border-color: #781fb3; }
.is-dark .landing-audience { color: #fff9f1; background: #4f0064; }
.is-dark .landing-eyebrow { color: #cdbfd8; }
.is-dark .landing-desc { color: #ebdeff; }
.is-dark .landing-content .pillar-label { color: #cdbfd8; }
.is-dark .landing-bullets li { color: #d9cde4; }
.is-dark .landing-bullets li strong { color: #fff9f1; }
.is-dark .landing-bullets .bi-tile { color: #d8b3ff; background: #4f0064; }
.is-dark .key-stats { border-top-color: #3d1d57; }
.is-dark .key-stat-number { color: #fff9f1 !important; }
.is-dark .key-stat-label { color: #cdbfd8; }
.is-dark .product-tile-icon { background: #ff7d00; color: #21003b; }
.is-dark .product-tile-name { color: #fff9f1; }
.is-dark .product-tile-tagline { color: #cdbfd8; }
.is-dark .form-container { border-color: #21003b; box-shadow: 0 44px 100px -36px rgba(0, 0, 0, 0.7); }
.is-dark .landing-exit-card { background: #4f0064; border-color: #4f0064; }
.is-dark .landing-exit-card h3 { color: #fff9f1; }
.is-dark .landing-exit-card p { color: #ebdeff; }
.is-dark .landing-exit-card .btn-outline { color: #fff9f1; border-color: #fff9f1; background: transparent; }
.is-dark .landing-exit-card .btn-outline:hover { color: #21003b; background: #fff9f1; border-color: #fff9f1; }

/* The checklist leads with a brand icon in a soft tile instead of a tick */
.landing-bullets .bi-tile {
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.landing-bullets .bi-tile .bi { width: 16px; height: 16px; }
.landing-bullets.has-tiles li { gap: 0.7rem; align-items: flex-start; }

/* One scorecard beside the tools list: Applicant Evaluation at work, rebuilt in HTML from the
   SAM page art, so it stays sharp and costs one small photo. The bars fill once on load and
   then hold still. The card narrows with the screen so the list keeps room to read; below 1280px
   it steps aside and the list runs full width. */
.hero-proof {
    display: grid;
    grid-template-columns: clamp(236px, 19vw, 286px) minmax(0, 1fr);
    gap: clamp(1.25rem, 1.8vw, 1.75rem);
    align-items: center;
    margin-bottom: 0.5rem;
}
.hero-proof .pillar-label { margin-top: 0; }
.scorecard {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 14px 14px 14px;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(33, 0, 59, 0.08);
    --bar: #781fb3;
}
.sc-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    margin-bottom: 6px;
    background: #f6f2fa;
    border-radius: 10px;
}
.sc-head img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.sc-head strong { display: block; font-size: 14px; line-height: 1.2; color: #21003b; }
.sc-head span { display: block; font-size: 11px; line-height: 1.3; color: #6b6275; }
/* The verdict rides on the card's top edge, so the header keeps its width for the name */
.sc-tag {
    position: absolute;
    top: -11px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    font: 700 11px/1 'Manrope', sans-serif;
    white-space: nowrap;
    color: #4f0064;
    background: #f1e4ff;
    box-shadow: 0 6px 16px -6px rgba(33, 0, 59, 0.45);
}
.sc-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.2;
    color: #3d3447;
}
.sc-row i { position: relative; display: block; height: 6px; border-radius: 3px; background: #ece8f1; overflow: hidden; }
.sc-row i::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v);
    border-radius: 3px;
    background: var(--bar);
    transform-origin: left;
    animation: sc-fill 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
.sc-row:nth-child(3) i::before { animation-delay: 0.5s; }
.sc-row:nth-child(4) i::before { animation-delay: 0.6s; }
.sc-row:nth-child(5) i::before { animation-delay: 0.7s; }
@keyframes sc-fill { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-row i::before { animation: none; } }
@media (max-width: 1279px) {
    .hero-proof { display: block; }
    /* Only the landing pages' card: the home Intelligent Search stack has its own steps */
    .hero-proof .scorecard { display: none; }
}

/* A brand icon at the head of each of the three ways */
.included-card .pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}
.included-card .pillar-icon .bi { width: 22px; height: 22px; }
.included-icon .bi { width: 24px; height: 24px; }
.why-icon .bi { width: 26px; height: 26px; }

/* The quote gets its speaker's face */
.featured-testimonial .quote-person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
}
.featured-testimonial .quote-person img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 6px 18px -6px rgba(33, 0, 59, 0.4);
}
.featured-testimonial .quote-person cite { margin: 0; text-align: left; }

/* =========================================================================
   Brand kit, site-wide. Shared templates become brand moments, so one rule
   lifts every page that uses them.
   ========================================================================= */

/* --- Hero banner: .capabilities-page (15 pages), the Sourcing hero, pricing, the resource
   hub and blog heroes. Solid Indigo, GT Alpina headline in Vanilla, Lilac subtitle,
   Tangerine primary button. Pages with art (has-hero-art) get the page's illustration on
   the right and their text set left; the art sits beside the words, never under them. --- */
.so-upgraded .capabilities-page,
.so-upgraded .platform-recruit,
.so-upgraded .pricing-hero,
.so-upgraded .resource-hero,
.so-upgraded .blog-hero {
    position: relative;
    overflow: hidden;
    background: #21003b !important;
    color: #ebdeff;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem) !important;
}
.so-upgraded .sam-hero-bg,
.so-upgraded .mcp-hero-bg { display: none; }
.so-upgraded .capabilities-page > :not(.strands-bg),
.so-upgraded .platform-recruit > :not(.strands-bg),
.so-upgraded .pricing-hero > :not(.strands-bg),
.so-upgraded .resource-hero > :not(.strands-bg),
.so-upgraded .blog-hero > :not(.strands-bg) { position: relative; z-index: 1; }

.so-upgraded .capabilities-page h1,
.so-upgraded .platform-recruit h1,
.so-upgraded .pricing-hero h1,
.so-upgraded .resource-hero h1,
.so-upgraded .blog-hero h1 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.35rem, 4.4vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
    color: #fff9f1;
    text-wrap: balance;
}
.so-upgraded .capabilities-subtitle,
.so-upgraded .platform-recruit .platform-subtitle,
.so-upgraded .pricing-hero .platform-subtitle,
.so-upgraded .resource-hero p,
.so-upgraded .blog-hero p { color: #ebdeff !important; font-size: 1.1rem; }
.so-upgraded .capabilities-page .section-tag,
.so-upgraded .capabilities-page .product-badge,
.so-upgraded .platform-recruit .product-badge,
.so-upgraded .resource-hero .section-tag,
.so-upgraded .blog-hero .section-tag {
    color: #fff9f1;
    background: #4f0064;
}
.so-upgraded .capabilities-page .text-purple,
.so-upgraded .platform-recruit .text-purple,
.so-upgraded .pricing-hero .text-purple {
    background: none;
    color: #d8b3ff;
    -webkit-text-fill-color: #d8b3ff;
}

/* Banners run edge to edge even where the page template boxes its content at 1200px
   (the body already clips sideways overflow) */
.so-upgraded .capabilities-page,
.so-upgraded .platform-recruit,
.so-upgraded .pricing-hero,
.so-upgraded .resource-hero,
.so-upgraded .blog-hero,
.so-upgraded .capabilities-page + .cap-stats-section,
.so-upgraded .final-cta,
.so-upgraded .free-trial.is-dark {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Vanilla bands run edge to edge too, their content held to the page's 1200px */
.so-upgraded .page-standard > .cap-social-proof,
.so-upgraded .page-standard > .recruit-testimonial,
.so-upgraded .page-standard > .capabilities-content.alt-bg,
.so-upgraded .page-standard > .cap-stats-section {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(2rem, calc(50vw - 600px));
    padding-right: max(2rem, calc(50vw - 600px));
}
/* Left-set heroes keep their search box and buttons on the left edge */
.so-upgraded.has-hero-art .capabilities-hero-inner .content-search { margin-left: 0; }
.so-upgraded .sam-hero .sam-hero-text .cta-buttons { justify-content: flex-start; }

/* The strands fade to a trace behind the text column, so they never cross the reading */
.so-upgraded.has-hero-art .capabilities-page .strands-bg,
.so-upgraded.has-hero-art .platform-recruit .strands-bg,
.so-upgraded.has-hero-art .pricing-hero .strands-bg {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 48%, #000 62%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 48%, #000 62%);
}

/* Buttons on Indigo: Tangerine primary with Indigo text (7.3:1), Vanilla outline */
.so-upgraded .capabilities-page .btn-primary,
.so-upgraded .platform-recruit .btn-primary,
.so-upgraded .final-cta .btn-primary,
.so-upgraded .final-cta .btn-cta {
    background: #ff7d00;
    color: #21003b;
    border-color: #ff7d00;
}
.so-upgraded .capabilities-page .btn-primary:hover,
.so-upgraded .platform-recruit .btn-primary:hover,
.so-upgraded .final-cta .btn-primary:hover,
.so-upgraded .final-cta .btn-cta:hover { background: #ff5c00; border-color: #ff5c00; color: #21003b; }
.so-upgraded .capabilities-page .btn-outline,
.so-upgraded .final-cta .btn-outline {
    background: transparent;
    color: #fff9f1;
    border-color: #fff9f1;
}
.so-upgraded .capabilities-page .btn-outline:hover,
.so-upgraded .final-cta .btn-outline:hover { background: #fff9f1; color: #21003b; border-color: #fff9f1; }

/* Text left, art right, on pages with art */
.so-upgraded {
    --hero-art: none;
    --hero-art-w: 0px;
    --hero-art-gap: 0px;
    --hero-align: center;
    --hero-justify: center;
}
.so-upgraded .capabilities-page:not(.sam-hero):not(.chrome-ext-hero) .capabilities-hero-inner,
.so-upgraded .platform-recruit .platform-hero-inner,
.so-upgraded .pricing-hero .platform-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hero-art-w);
    column-gap: var(--hero-art-gap);
    align-items: center;
    text-align: var(--hero-align);
}
.so-upgraded .capabilities-page:not(.sam-hero):not(.chrome-ext-hero) .capabilities-hero-inner > *,
.so-upgraded .platform-recruit .platform-hero-inner > *,
.so-upgraded .pricing-hero .platform-hero-inner > * { grid-column: 1; min-width: 0; }
.so-upgraded .capabilities-hero-inner > .section-tag,
.so-upgraded .capabilities-hero-inner > .product-badge,
.so-upgraded .capabilities-hero-inner > .btn,
.so-upgraded .platform-hero-inner > .product-badge,
.so-upgraded .platform-hero-inner > .btn { justify-self: var(--hero-justify); }
.so-upgraded .capabilities-hero-inner .cta-buttons,
.so-upgraded .capabilities-hero-inner .careers-hero-ctas,
.so-upgraded .platform-hero-inner .key-stats { justify-content: var(--hero-justify); }
.so-upgraded .capabilities-page:not(.sam-hero):not(.chrome-ext-hero) .capabilities-hero-inner::after,
.so-upgraded .platform-recruit .platform-hero-inner::after,
.so-upgraded .pricing-hero .platform-hero-inner::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--hero-art) center / contain no-repeat;
}
.so-upgraded.has-hero-art .capabilities-subtitle,
.so-upgraded.has-hero-art .platform-subtitle { margin-left: 0; }
@media (min-width: 901px) {
    .so-upgraded.has-hero-art {
        --hero-art-w: clamp(260px, 30vw, 420px);
        --hero-art-gap: clamp(2rem, 5vw, 5rem);
        --hero-align: left;
        --hero-justify: start;
    }
}
@media (max-width: 900px) {
    .so-upgraded .capabilities-page:not(.sam-hero):not(.chrome-ext-hero) .capabilities-hero-inner::after,
    .so-upgraded .platform-recruit .platform-hero-inner::after,
    .so-upgraded .pricing-hero .platform-hero-inner::after {
        grid-column: 1;
        grid-row: 1;
        width: 168px;
        justify-self: center;
        margin-bottom: 1.25rem;
    }
    .so-upgraded.has-hero-art .capabilities-subtitle,
    .so-upgraded.has-hero-art .platform-subtitle { margin-left: auto; }
}

/* The page's illustration, chosen for what the page says. On-dark versions, flat and solid.
   functions.php adds has-hero-art to the body on these pages (seekout_hero_art()). */
.so-upgraded.page-template-page-solutions-recruit { --hero-art: url('../images/illustrations/magnify-dark.svg'); }
.so-upgraded.page-template-page-solutions-mcp { --hero-art: url('../images/illustrations/podcast-dark.svg'); }
.so-upgraded.page-template-page-capabilities-agentic-ai { --hero-art: url('../images/illustrations/fast-dark.svg'); }
.so-upgraded.page-template-page-capabilities-external-sourcing { --hero-art: url('../images/illustrations/seek-explore-dark.svg'); }
.so-upgraded.page-template-page-capabilities-rediscover { --hero-art: url('../images/illustrations/uncover-dark.svg'); }
.so-upgraded.page-template-page-capabilities-source-cleared-talent { --hero-art: url('../images/illustrations/opportunity-dark.svg'); }
.so-upgraded.page-template-page-capabilities-healthcare { --hero-art: url('../images/illustrations/gratitude-dark.svg'); }
.so-upgraded.page-template-page-release-notes { --hero-art: url('../images/illustrations/report-dark.svg'); }
.so-upgraded.page-template-page-customers { --hero-art: url('../images/illustrations/fans-dark.svg'); }
.so-upgraded.page-template-page-responsible-ai { --hero-art: url('../images/illustrations/stretch-dark.svg'); }
.so-upgraded.page-template-page-why-seekout { --hero-art: url('../images/illustrations/uplift-dark.svg'); }
.so-upgraded.page-template-page-about-us { --hero-art: url('../images/illustrations/group-dark.svg'); }
.so-upgraded.page-template-page-security { --hero-art: url('../images/illustrations/collect-dark.svg'); }
.so-upgraded.page-template-page-pricing { --hero-art: url('../images/illustrations/plan-dark.svg'); }

/* --- Stats: right after a banner they continue it, numbers set large in GT Alpina.
   Elsewhere they sit on Vanilla in Aubergine. --- */
.so-upgraded .cap-stats-section { background: #fff9f1; border-bottom: 0; }
.so-upgraded .cap-stat-number,
.so-upgraded .platform-hero-inner .key-stat-number {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 3.6vw, 3.25rem);
    letter-spacing: -0.01em;
    color: #4f0064;
}
.so-upgraded .capabilities-page + .cap-stats-section {
    background: #21003b;
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.so-upgraded .capabilities-page + .cap-stats-section .cap-stats-row {
    border-top: 1px solid #3d1d57;
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 1180px;
}
.so-upgraded .capabilities-page + .cap-stats-section .cap-stat-number,
.so-upgraded .platform-hero-inner .key-stat-number { color: #fff9f1 !important; }
.so-upgraded .capabilities-page + .cap-stats-section .cap-stat-label,
.so-upgraded .platform-hero-inner .key-stat-label { color: #cdbfd8; }

/* --- Closing banner: .final-cta (16 pages). Indigo, the brand's chevrons closing in from
   both edges, GT Alpina headline. --- */
.so-upgraded .final-cta {
    position: relative;
    background-color: #21003b !important;
    background-image: url('../images/brand/chevron-left.svg'), url('../images/brand/chevron-right.svg');
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    background-repeat: no-repeat;
    border-top: 0;
    color: #ebdeff;
    padding-left: clamp(1.5rem, 22vw, 22rem);
    padding-right: clamp(1.5rem, 22vw, 22rem);
}
.so-upgraded .final-cta h2 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 3.8vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff9f1;
    text-wrap: balance;
}
.so-upgraded .final-cta > p { color: #ebdeff; }
@media (max-width: 760px) {
    .so-upgraded .final-cta {
        background-size: auto 46%, auto 46%;
        background-position: left top, right bottom;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --- Featured quotes: a Tangerine quote mark, the words in GT Alpina at 30px and up --- */
.so-upgraded .recruit-testimonial-card::before,
.so-upgraded .featured-testimonial blockquote::before {
    content: "\201C";
    display: block;
    font-family: var(--so-display);
    font-size: 4.5rem;
    line-height: 0.6;
    height: 2.2rem;
    color: #ff7d00;
}
.so-upgraded .featured-testimonial blockquote p { color: #21003b; }

/* =========================================================================
   Page pieces (the markup is added by edit_kit.py)
   ========================================================================= */

/* Section tags on light grounds: Aubergine on Lilac */
.so-upgraded .section-tag { background: #ebdeff; color: #4f0064; }

/* Cards that sat on gray now sit on Vanilla grounds: keep them white so they lift */
.so-upgraded .testimonial-card,
.so-upgraded .trial-assistant .included-card { background: #fff; }

/* Feature rows on Vanilla run edge to edge, like the other Vanilla bands */
.so-upgraded .page-standard > .recruit-feature-row.alt {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(2rem, calc(50vw - 600px));
    padding-right: max(2rem, calc(50vw - 600px));
}

/* The closing banner's white card (home and blog) keeps its own buttons */
.so-upgraded .final-cta .final-path .btn-outline {
    color: #4f0064;
    border-color: #4f0064;
    background: transparent;
}
.so-upgraded .final-cta .final-path .btn-outline:hover { color: #fff9f1; background: #4f0064; }

/* --- Home: Sourcing, Applicant Evaluation & AI Screening --- */
.so-upgraded .stat-bar .stat-number {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 3.4vw, 3rem);
    letter-spacing: -0.01em;
    color: #4f0064;
}
.so-upgraded .recruit-flow-icon { background: #ebdeff; color: #4f0064; border-color: #fff; }
.so-upgraded .recruit-flow-icon .bi { width: 22px; height: 22px; }
.so-upgraded .tool-icon { background: #ebdeff; color: #4f0064; }
.so-upgraded .tool-icon .bi { width: 26px; height: 26px; }

/* --- Home: testimonials sign off with the company's logo, or the speaker's face --- */
.so-upgraded .testimonial-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid #f3eadf;
}
.so-upgraded .testimonial-by .testimonial-author { margin: 0; }
.so-upgraded .testimonial-logo { flex: none; height: 22px; width: auto; max-width: 92px; object-fit: contain; }
.so-upgraded .testimonial-face { flex: none; width: 40px; height: 40px; border-radius: 50%; }

/* --- Home: proven results, an Indigo band --- */
.so-upgraded .proven-results { background: #21003b; border-top: 0; color: #ebdeff; }
.so-upgraded .proven-results h2 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 3.8vw, 3.25rem);
    letter-spacing: -0.01em;
    color: #fff9f1;
}
.so-upgraded .proven-results-inner p { color: #ebdeff; }
.so-upgraded .proven-results .btn-primary { background: #ff7d00; color: #21003b; border-color: #ff7d00; }
.so-upgraded .proven-results .btn-primary:hover { background: #ff5c00; border-color: #ff5c00; }
.so-upgraded .credibility-item { background: #4f0064; color: #ebdeff; }

/* --- Home: the SeekOut experience, told with the brand's illustrations --- */
.so-upgraded .experience-illo { width: 150px; height: 150px; margin: 0 auto 1.25rem; }
.so-upgraded .experience-illo img { display: block; width: 100%; height: 100%; }

/* --- Pricing --- */
.so-upgraded .pricing-card .plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #4f0064;
    background: #ebdeff;
}
.so-upgraded .pricing-card .plan-icon .bi { width: 22px; height: 22px; }
.so-upgraded .pricing-card--popular .plan-icon { color: #21003b; background: #ff7d00; }
.so-upgraded .free-banner-section { padding-top: clamp(2rem, 4vw, 3.5rem); }
.so-upgraded .free-banner { background: #ebdeff; border-color: #ebdeff; }
.so-upgraded .free-banner-text h3 { text-wrap: balance; }
.so-upgraded .free-banner.has-illo { gap: 2rem; }
.so-upgraded .free-banner-illo { flex: none; width: 132px; height: 132px; }
.so-upgraded .free-banner-text h3 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.15;
    color: #21003b;
}
.so-upgraded .free-banner-text p { color: #4f0064; }
@media (max-width: 760px) {
    .so-upgraded .free-banner-illo { width: 96px; height: 96px; }
}

/* --- Careers: the hero shows the team, in a loose stack of their own photos --- */
/* The general banner grid is more specific (its :not() chain), so these two hold with !important */
.so-upgraded .careers-hero .capabilities-hero-inner {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 540px) !important;
    column-gap: clamp(2rem, 5vw, 5rem) !important;
    text-align: left !important;
}
.so-upgraded .careers-hero .capabilities-hero-inner::after { content: none; }
.so-upgraded .careers-hero .capabilities-hero-inner > .section-tag { justify-self: start; }
.so-upgraded .careers-hero .careers-hero-ctas { justify-content: flex-start; }
.so-upgraded .careers-hero .capabilities-subtitle { margin-left: 0; }
.so-upgraded .careers-hero .hero-photos {
    grid-column: 2 !important;
    grid-row: 1 / span 8;
    position: relative;
    width: 100%;
    aspect-ratio: 1.08;
}
.so-upgraded .hero-photos img {
    position: absolute;
    object-fit: cover;
    border-radius: 18px;
    border: 4px solid #21003b;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.so-upgraded .hero-photos .hp-a { left: 0; top: 6%; width: 62%; height: 46%; z-index: 1; }
.so-upgraded .hero-photos .hp-b { right: 0; top: 0; width: 42%; height: 64%; z-index: 2; }
.so-upgraded .hero-photos .hp-c { left: 12%; bottom: 0; width: 60%; height: 46%; z-index: 3; }
@media (max-width: 900px) {
    .so-upgraded .careers-hero .capabilities-hero-inner { grid-template-columns: minmax(0, 1fr) !important; text-align: center !important; }
    .so-upgraded .careers-hero .capabilities-hero-inner > .section-tag { justify-self: center; }
    .so-upgraded .careers-hero .careers-hero-ctas { justify-content: center; }
    .so-upgraded .careers-hero .capabilities-subtitle { margin-left: auto; }
    .so-upgraded .careers-hero .hero-photos { grid-column: 1 !important; grid-row: auto; max-width: 460px; margin: 2.5rem auto 0; }
}

/* =========================================================================
   Section headlines and dark bands, site-wide
   ========================================================================= */

/* Section headlines in GT Alpina, as on /youxai. Two sizes: the big section headers, and
   the headings inside content sections (both at 32px or more). Form headers, card titles
   and the release-notes years keep the sans. */
.so-upgraded .section-header h2,
.so-upgraded .diff-section-header h2,
.so-upgraded .faq-section > h2,
.so-upgraded .why-container > h2,
.so-upgraded .trial-final-cta h2 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 3.3vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.so-upgraded section:not(.release-notes-year) > .section-inner > h2,
.so-upgraded .recruit-feature-text h2,
.so-upgraded .recruit-ws-text h2 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2rem, 2.6vw, 2.35rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* The dark bands that used a gray-purple gradient: solid Indigo */
.so-upgraded .trial-workflow,
.so-upgraded .trial-stats,
.so-upgraded .trial-final-cta,
.so-upgraded .trust-strip { background: #21003b; }
.so-upgraded .trial-workflow-bg,
.so-upgraded .trial-stats-bg { display: none; }
.so-upgraded .trust-pillar-icon { background: #4f0064; color: #d8b3ff; }
.so-upgraded .trust-pillar-icon .bi { width: 26px; height: 26px; }
.so-upgraded .trust-pillar p { color: #cdbfd8; }
.so-upgraded .trial-final-cta .btn-cta { background: #ff7d00; color: #21003b; }
.so-upgraded .trial-final-cta .btn-cta:hover { background: #ff5c00; }

/* --- Home: the tools as a bento. Intelligent Search is the large card, on Indigo, with
   the SAM page's scorecards in it; the other five keep their places around it. --- */
.so-upgraded .tools-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
}
.so-upgraded .tool-feature.is-feature {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: #21003b;
    border-color: #21003b;
    color: #ebdeff;
    overflow: hidden;
}
.so-upgraded .tool-feature.is-feature .tool-icon { background: #ff7d00; color: #21003b; }
.so-upgraded .tool-feature.is-feature h4 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2rem, 2.6vw, 2.4rem);
    line-height: 1.1;
    color: #fff9f1;
}
.so-upgraded .tool-feature.is-feature p { color: #ebdeff; max-width: 34rem; }
.sc-stack {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 330px;
    margin: auto auto 0;
    padding-top: 1.5rem;
    font-family: 'Manrope', sans-serif;
}
.sc-stack .scorecard { position: absolute; padding: 10px 14px 12px; }
.sc-stack .sc-head { padding: 7px 8px; }
.sc-stack .sc-head img { width: 34px; height: 34px; }
.sc-stack .sc-head strong { font-size: 13px; }
.sc-stack .sc-row { grid-template-columns: 108px minmax(0, 1fr); font-size: 11.5px; margin-top: 7px; }
.sc-stack .sc-a { left: 0; top: 24px; width: 262px; --bar: #b476f1; }
.sc-stack .sc-c { left: 24px; top: 196px; width: 262px; --bar: #ff7d00; }
.sc-stack .sc-b { left: 238px; top: 70px; width: 318px; z-index: 2; padding: 12px 16px 14px; --bar: #781fb3; }
.sc-stack .sc-b .sc-head img { width: 40px; height: 40px; }
.sc-stack .sc-b .sc-head strong { font-size: 15px; }
.sc-stack .sc-b .sc-row { grid-template-columns: 124px minmax(0, 1fr); font-size: 12.5px; margin-top: 9px; }
.sc-stack .sc-a .sc-row i::before { animation-delay: 0.3s; }
.sc-stack .sc-c .sc-row i::before { animation-delay: 0.45s; }
.sc-stack .sc-b .sc-row i::before { animation-delay: 0.6s; }
@media (max-width: 1100px) {
    .so-upgraded .tools-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-upgraded .tool-feature.is-feature { grid-row: auto; }
    .sc-stack { height: auto; max-width: 340px; padding-top: 1.25rem; }
    .sc-stack .sc-a, .sc-stack .sc-c { display: none; }
    .sc-stack .sc-b { position: relative; left: auto; top: auto; width: 100%; }
}
@media (max-width: 700px) {
    .so-upgraded .tools-features { grid-template-columns: minmax(0, 1fr); }
    .so-upgraded .tool-feature.is-feature { grid-column: auto; }
}

/* The steps under the stats: Tangerine dashes join them */
.so-upgraded .recruit-flow::before {
    background: repeating-linear-gradient(90deg, #ff7d00 0, #ff7d00 8px, transparent 8px, transparent 16px);
    opacity: 0.7;
}

/* --- The AI assistants SeekOut runs inside, as their marks --- */
.ai-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: -0.5rem auto 2.5rem;
    padding: 0;
}
.ai-logos li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem 0.55rem 0.6rem;
    background: #fff;
    border: 1px solid #f3eadf;
    border-radius: 999px;
    font: 600 0.92rem/1 'Manrope', sans-serif;
    color: #21003b;
}
.ai-logos img { width: 28px; height: 28px; object-fit: contain; }

/* --- Contact: the form page goes dark like the demo and trial pages --- */
.so-upgraded .contact-page {
    background: #21003b;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.so-upgraded .contact-info h1 {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1.06;
    color: #fff9f1;
}
.so-upgraded .contact-subtitle { color: #ebdeff; }
.so-upgraded .contact-detail h4 { color: #fff9f1; }
.so-upgraded .contact-detail p { color: #cdbfd8; }
.so-upgraded .contact-detail > svg { color: #ff7d00; stroke: #ff7d00; }
.so-upgraded .contact-social a { background: #4f0064; color: #d8b3ff; }
.so-upgraded .contact-social a:hover { background: #ff7d00; color: #21003b; }
.so-upgraded .contact-page .form-container { border-color: #21003b; box-shadow: 0 44px 100px -36px rgba(0, 0, 0, 0.7); }

/* Ticks that stay as ticks on a dark form page (partners) */
.is-dark .landing-bullets li > svg { stroke: #ff7d00; }

/* Pricing: a shorter banner and a smaller drawing, so the plans start on the first screen */
@media (min-width: 901px) {
    .so-upgraded.page-template-page-pricing { --hero-art-w: clamp(190px, 17vw, 250px); }
}
.so-upgraded .pricing-hero {
    padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.so-upgraded .free-banner-section { padding-top: 2rem; }

/* =========================================================================
   Buttons, site-wide: the brand's button spec (guidelines, Buttons and CTAs).
   Primary is Tangerine with Indigo text (7.3:1), a deeper orange on hover.
   Secondary is an Aubergine outline that fills on hover. Every button is a
   pill. Unscoped, so the header and every page match.
   ========================================================================= */
.btn,
.cta-btn,
.card-cta,
.btn-cta { border-radius: 999px; }
.btn-primary,
.btn-orange,
.btn-purple,
.btn-white,
.btn-orange.btn-pill,
.cta-btn.primary-tool,
.card-cta--primary,
.btn-cta {
    background: #ff7d00;
    color: #21003b;
    border-color: #ff7d00;
}
.btn-primary:hover,
.btn-orange:hover,
.btn-purple:hover,
.btn-white:hover,
.btn-orange.btn-pill:hover,
.cta-btn.primary-tool:hover,
.card-cta--primary:hover,
.btn-cta:hover {
    background: #ff5c00;
    color: #21003b;
    border-color: #ff5c00;
}
.btn-outline,
.cta-btn.hero-cta-secondary,
.card-cta--outline {
    background: transparent;
    color: #4f0064;
    border: 2px solid #4f0064;
}
.btn-outline:hover,
.cta-btn.hero-cta-secondary:hover,
.card-cta--outline:hover {
    background: #4f0064;
    color: #fff9f1;
    border-color: #4f0064;
}
/* The same, where seekout.css set a button's color for one place */
.free-banner-cta .btn-primary { background: #ff7d00; color: #21003b; }
.free-banner-cta .btn-primary:hover { background: #ff5c00; color: #21003b; }
.cta-buttons .btn-outline:hover,
.hero-cta-row .btn-outline:hover,
.final-path-ctas-row .btn-outline:hover {
    background: #4f0064;
    color: #fff9f1;
    border-color: #4f0064;
}
/* The Security page's Trust Center button set its text white for the old dark fill */
.legal-inner .security-trust-link a.btn,
.legal-inner .security-trust-link a.btn:hover { color: #21003b; }
/* The header's Start free keeps its ring (it matches its neighbors' height) */
.nav-cta .btn-outline,
.mobile-menu-cta .btn-outline {
    border: 0;
    color: #4f0064;
    box-shadow: inset 0 0 0 1.5px #4f0064;
}
.nav-cta .btn-outline:hover,
.mobile-menu-cta .btn-outline:hover {
    background: #4f0064;
    color: #fff9f1;
    box-shadow: inset 0 0 0 1.5px #4f0064;
}

/* =========================================================================
   Home hero: the film's opening frame as a still, faded under Indigo. It
   shows at once on every device; on desktop the film fades in over it once
   it plays, and phones and tablets, which never load the film, keep the still.
   ========================================================================= */
.hero-dark .hero-video {
    display: block;   /* seekout.css hides it below 1025px; the still belongs everywhere */
    background: #21003b url('../images/kit/hero-still-chevrons.webp') 50% 50% / cover no-repeat;
}
@media (max-width: 1024px) {
    /* On a tall phone hero the still sits at the top, framed on the open middle of the
       chevrons, and fades into the Indigo below before the card */
    .hero-dark .hero-video {
        background-size: auto 560px;
        background-position: 50% 0;
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 360px, transparent 560px);
        mask-image: linear-gradient(180deg, #000 0, #000 360px, transparent 560px);
    }
    .hero-dark .hero-video::after {
        background: linear-gradient(180deg, rgba(33, 0, 59, 0.58) 0%, rgba(33, 0, 59, 0.7) 60%, rgba(33, 0, 59, 0.9) 100%);
    }
}

/* =========================================================================
   Form pages on phones and tablets: where the desktop scorecard steps aside,
   a brand drawing opens the page, as the banners do on every other page.
   ========================================================================= */
@media (max-width: 1024px) {
    .request-demo.is-dark .landing-content::before,
    .free-trial.is-dark .landing-content::before,
    .so-upgraded .contact-info::before {
        content: "";
        display: block;
        width: 150px;
        aspect-ratio: 1;
        margin: 0 0 1.25rem;
        background: var(--form-art) center / contain no-repeat;
    }
    .request-demo.is-dark { --form-art: url('../images/illustrations/rate-dark.svg'); }
    .free-trial.is-dark { --form-art: url('../images/illustrations/bike-dark.svg'); }
    .so-upgraded.page-template-page-partners .free-trial.is-dark { --form-art: url('../images/illustrations/teamwork-dark.svg'); }
    .so-upgraded .contact-page { --form-art: url('../images/illustrations/outreach-dark.svg'); }
}

/* Release notes: a shorter banner, and room above the first year. (seekout.css spaces the
   first year with :first-of-type, which never matches, since the banner is the first section.) */
@media (min-width: 901px) {
    .so-upgraded.page-template-page-release-notes { --hero-art-w: clamp(190px, 17vw, 250px); }
}
.so-upgraded.page-template-page-release-notes .capabilities-page {
    padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.so-upgraded .capabilities-page + .release-notes-year { padding-top: clamp(2.25rem, 4vw, 3rem); }

/* The bike rides forward, left to right, wherever it appears */
.so-upgraded .free-banner-illo { transform: scaleX(-1); }
@media (max-width: 1024px) {
    .free-trial.is-dark { --form-art-flip: scaleX(-1); }
    .so-upgraded.page-template-page-partners .free-trial.is-dark { --form-art-flip: none; }
    .free-trial.is-dark .landing-content::before { transform: var(--form-art-flip, none); }
}

/* Announcement bar: solid Indigo like the banners, its button in Vanilla. Its own styles
   print after this file, hence body in front for the edge. */
body .announcement-bar { background: #21003b; }
body .announcement-bar-cta { background: #fff9f1; }
body .announcement-bar-cta:hover { background: #ebdeff; }

/* Closing banners, everywhere: the chevrons on Indigo win over the inline gradient that the
   SAM, MCP and Chrome extension pages carry on their section, and the free trial's closing
   section takes the same banner. (Found in the October 2026 audit.) */
.so-upgraded .final-cta,
.so-upgraded .trial-final-cta {
    background-color: #21003b !important;
    background-image: url('../images/brand/chevron-left.svg'), url('../images/brand/chevron-right.svg') !important;
    background-position: left center, right center !important;
    background-size: auto 100%, auto 100% !important;
    background-repeat: no-repeat !important;
}
.so-upgraded .trial-final-cta {
    padding-left: clamp(1.5rem, 22vw, 22rem);
    padding-right: clamp(1.5rem, 22vw, 22rem);
}
.so-upgraded .final-cta-blob-1,
.so-upgraded .final-cta-blob-2 { display: none; }
@media (max-width: 760px) {
    .so-upgraded .final-cta,
    .so-upgraded .trial-final-cta {
        background-size: auto 46%, auto 46% !important;
        background-position: left top, right bottom !important;
    }
    .so-upgraded .trial-final-cta { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* =========================================================================
   Open roles and the Juicebox comparison (joined the upgrade after the audit)
   ========================================================================= */
.so-upgraded.page-template-page-careers-roles { --hero-art: url('../images/illustrations/sprout-dark.svg'); }
.so-upgraded.page-template-page-seekout-vs-juicebox { --hero-art: url('../images/illustrations/choose-dark.svg'); }

/* The Juicebox banner carries its own stats row: Vanilla figures in GT Alpina, set with the text */
.so-upgraded .capabilities-page .hero-stats-row { justify-content: var(--hero-justify); }
.so-upgraded.has-hero-art .capabilities-page .hero-stat { align-items: flex-start; }
.so-upgraded .capabilities-page .hero-stat-num {
    font-family: var(--so-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 3.2vw, 2.8rem);
    letter-spacing: -0.01em;
    color: #fff9f1;
}
.so-upgraded .capabilities-page .hero-stat-label { color: #cdbfd8; }
@media (max-width: 900px) {
    .so-upgraded.has-hero-art .capabilities-page .hero-stat { align-items: center; }
}

/* The comparison table: an Indigo header, SeekOut's column in Aubergine over Lilac, on a
   Vanilla band that runs edge to edge like the others */
.so-upgraded .page-standard > .compare-table-section {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(1.5rem, calc(50vw - 600px));
    padding-right: max(1.5rem, calc(50vw - 600px));
}
.so-upgraded .compare-table { box-shadow: 0 1px 3px rgba(33, 0, 59, 0.08); }
.so-upgraded .compare-table thead { background: #21003b; color: #fff9f1; }
.so-upgraded .compare-table th.highlight { background: #4f0064; color: #fff9f1; }
.so-upgraded .compare-table td { border-bottom-color: #f3eadf; }
.so-upgraded .compare-table td.highlight { background: #ebdeff; color: #21003b; }

/* =========================================================================
   Round after the audit: filter pills, pricing toggle, the prompt pack
   ========================================================================= */

/* Filter pills on the resource and blog banners: Aubergine with Lilac text (10:1) instead of
   white, so the banner stays Indigo; the current one Tangerine with Indigo text (7.3:1, where
   the old white on orange was 2.6:1) */
.so-upgraded .resource-hero .resource-type-pill,
.so-upgraded .blog-hero .blog-category-pill {
    background: #4f0064;
    border-color: #4f0064;
    color: #ebdeff;
}
.so-upgraded .resource-hero .resource-type-pill:hover,
.so-upgraded .blog-hero .blog-category-pill:hover {
    background: #781fb3;
    border-color: #781fb3;
    color: #fff9f1;
}
.so-upgraded .resource-hero .resource-type-pill.active,
.so-upgraded .blog-hero .blog-category-pill.active {
    background: #ff7d00;
    border-color: #ff7d00;
    color: #21003b;
}

/* Pricing: the cards' Book a demo and Compare all features in Indigo with Vanilla text, like
   Book a demo in the header. On hover they turn white, their Indigo kept as a ring. Compare all
   features and the cards' See what's included are <button>s, which browsers set in their own
   font (Arial here) unless told to inherit. */
.so-upgraded .card-cta--outline {
    background: #21003b;
    color: #fff9f1;
    border-color: #21003b;
}
.so-upgraded .card-cta--outline:hover {
    background: #fff;
    color: #21003b;
    border-color: #21003b;
}
.so-upgraded .matrix-toggle-btn {
    background: #21003b;
    color: #fff9f1;
    box-shadow: inset 0 0 0 2px #21003b;
}
.so-upgraded .matrix-toggle-btn,
.so-upgraded .card-features-toggle {
    font-family: inherit;
}
.so-upgraded .matrix-toggle-btn:hover {
    background: #fff;
    color: #21003b;
}

/* Prompt pack: the site's fonts, Indigo ink and Vanilla ground; its gray dark enough to read
   (5.5:1, was 3.0:1); section numbers in Aubergine, since Tangerine is never text on light */
.so-upgraded .prompt-pack {
    --ink: #21003b;
    --faint: #6b6275;
    --bg: #fff9f1;
    --serif: var(--so-display);
    --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.so-upgraded.page-template-page-prompt-pack { --hero-art: url('../images/illustrations/learn-dark.svg'); }
.so-upgraded .prompt-pack .pp-sechead-k { color: #4f0064; }

/* Its banner (the shared .capabilities-page): the lockup on Indigo, with the assistants'
   marks on white discs so the dark ones stay visible */
.so-upgraded .pp-banner .pp-brand { margin-bottom: 1.5rem; }
.so-upgraded .pp-banner .pp-brand-logo { height: 26px; width: auto; }
.so-upgraded .pp-banner .pp-brand-x { color: #cdbfd8; }
.so-upgraded .pp-banner .pp-brand-trio img {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
}
.so-upgraded .pp-banner .pp-eyebrow { color: #cdbfd8; margin-bottom: 1rem; }
.so-upgraded .pp-banner h1 { margin-bottom: 1.25rem; }
.so-upgraded .pp-banner h1 em { font-style: normal; color: #d8b3ff; }
.so-upgraded .pp-banner .pp-lede a { color: #fff9f1; text-decoration-color: #ff7d00; }
@media (max-width: 900px) {
    .so-upgraded .pp-banner .pp-brand { justify-content: center; }
}

/* The site header, solid white everywhere. It was 90% white over a blur, which reads light
   gray over the Indigo banners and on /youxai, whose page is Indigo from the top. */
header.wp-block-template-part > nav { background: #fff !important; }

/* The resource grid starts a little below the banner, as the blog's does */
.so-upgraded .resource-grid-section { padding-top: 2.5rem; }

/* Deal registration: the "New to SeekOut?" card sits under the stats, in the text column */
.landing-content .landing-exit-card { margin-top: 2rem; }

/* =========================================================================
   Home hero: three messages in turn (the benefit, what you get, where it is
   going) above the three ways to work with SeekOut. The messages share one
   grid cell, so the hero holds the tallest one's height and never jumps.
   ========================================================================= */
.hero-rotator {
    display: grid;
    margin-bottom: 2.75rem;
}
.hero-rotator > .hero-msg {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}
.hero-rotator > .hero-msg.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero .hero-msg h1,
.hero .hero-msg-head {
    font-family: 'Manrope', sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.04;
    margin: 0 0 1.1rem;
}
.hero .hero-msg h1 span,
.hero .hero-msg-head span { display: block; }
.hero-dark .hero-msg-head { color: #fff9f1; }
.hero-dark .hero-msg .hl-2 { color: #ff7d00; }
/* Wide enough that each support line holds to one line on desktop */
.hero-msg-support {
    font-family: 'Manrope', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.45;
    max-width: 54rem;
    margin: 0 auto;
}
.hero-dark .hero-msg-support { color: #ebdeff; }

/* The three ways, side by side in the hero card; the two buttons keep their usual width */
.hero-single.hero-single-ways { max-width: 1040px; }
.hero-single-ways .path-ctas { width: 100%; max-width: 640px; margin: 0 auto; }
/* The card is not a link, so it does not react to the pointer: no lift, and no tint (the
   tint from the old single-card design sat above the tiles and washed them out) */
.hero-single-ways .path-card.tools:hover { transform: none; }
.hero-single-ways .path-card.tools::before { display: none; }
.hero-ways {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0.5rem 0 2rem;
    padding: 0;
}
.hero-way {
    padding: 0.25rem 1.75rem;
    text-align: left;
    border-left: 1px solid #ece8f1;
}
.hero-way:first-child { border-left: 0; padding-left: 0.5rem; }
.hero-way:last-child { padding-right: 0.5rem; }
.hero-way-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f1e4ff;
    color: #4f0064;
    margin-bottom: 0.9rem;
}
.path-card .hero-way-title {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #21003b;
    margin: 0 0 0.4rem;
}
.hero-way p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6b6275;
    margin: 0;
}

@media (max-width: 1024px) {
    .hero .hero-msg h1,
    .hero .hero-msg-head { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .hero .hero-msg h1,
    .hero .hero-msg-head { font-size: 2.5rem; }
    .hero-msg-support { font-size: 1.05rem; }
    .hero-rotator { margin-bottom: 2rem; }
    .hero-ways { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 0; }
    .hero-way,
    .hero-way:first-child,
    .hero-way:last-child {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 0.9rem;
        padding: 0;
        border-left: 0;
    }
    .hero-way-icon { grid-row: 1 / span 2; margin: 0; }
    /* On phones the three ways run down the card, their path ending at the two buttons */
}
@media (max-width: 480px) {
    .hero .hero-msg h1,
    .hero .hero-msg-head { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-rotator > .hero-msg { transition: none; transform: none; }
}

/* =========================================================================
   Try AI Screening (/try-sam), on the upgrade since 3.7.11: the interview
   drawing beside the banner text, a centered head over the role cards like
   the other card sections, and the role buttons as the site's Tangerine pills.
   ========================================================================= */
.so-upgraded.page-template-page-try-sam { --hero-art: url('../images/illustrations/recruit-dark.svg'); }
/* seekout.css drops the subtitle's margin for the old button-less banner; the buttons need it back */
.so-upgraded .sam-trial-hero .capabilities-subtitle { margin-bottom: 2rem; }
/* The banner's "Try a sample interview" lands on the roles, clear of the fixed header */
.so-upgraded .sam-roles-section { scroll-margin-top: var(--header-height); }
.so-upgraded .sam-roles-section .section-inner { text-align: center; }
.so-upgraded .sam-roles-section .section-inner > .section-subtitle { margin: 0 auto 2rem; }
.so-upgraded .sam-role-btn {
    border-radius: 999px;
    background: #ff7d00;
    color: #21003b;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
}
.so-upgraded .sam-role-card:hover .sam-role-btn { background: #ff5c00; }

/* =========================================================================
   Customer quotes read upright on every page, as the home page's cards do.
   Unscoped, so pages not yet on the upgrade match too.
   ========================================================================= */
.recruit-testimonial blockquote p,
.recruit-testimonial-card blockquote p,
.cap-blockquote p,
.capabilities-content blockquote,
.featured-testimonial blockquote p,
.testimonial-card-light .testimonial-text,
.testimonials-section .testimonial-quote { font-style: normal; }

/* =========================================================================
   Home: the three ways as a path, left to right. A Lavender track joins each
   icon to the next, ending in a Tangerine chevron, and the icon tiles deepen
   along the way (Lilac, Lavender, Aubergine), from the tools you know to an
   AI coworker. On desktop the track draws itself once on load (reduced motion
   shows it drawn); on phones, where the ways stack, the path runs down.
   ========================================================================= */
.hero-way,
.hero-way:first-child { position: relative; border-left: 0; }
.hero-way:nth-child(2) .hero-way-icon { background: #d8b3ff; color: #4f0064; }
.hero-way:nth-child(3) .hero-way-icon { background: #4f0064; color: #fff9f1; }
.hero-way:not(:last-child)::before,
.hero-way:not(:last-child)::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
/* The track: from just past this icon to just short of the next one */
.hero-way:not(:last-child)::before {
    top: calc(0.25rem + 21px);
    right: calc(14px - 1.75rem);
    border-top: 2px dashed #d8b3ff;
}
.hero-way:nth-child(1)::before { left: calc(0.5rem + 44px + 14px); }
.hero-way:nth-child(2)::before { left: calc(1.75rem + 44px + 14px); }
/* The chevron at its end, pointing into the next way */
.hero-way:not(:last-child)::after {
    top: calc(0.25rem + 22px - 5px);
    right: calc(15px - 1.75rem);
    width: 10px;
    height: 10px;
    border-top: 2.5px solid #ff7d00;
    border-right: 2.5px solid #ff7d00;
    border-radius: 1px;
    transform: rotate(45deg);
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .hero-way:not(:last-child)::before {
        transform-origin: left center;
        animation: way-track 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
    }
    .hero-way:not(:last-child)::after { animation: way-arrow 0.35s ease-out 1s both; }
    .hero-way:nth-child(2)::before { animation-delay: 1.15s; }
    .hero-way:nth-child(2)::after { animation-delay: 1.65s; }
}
@keyframes way-track { from { transform: scaleX(0); } to { transform: none; } }
@keyframes way-arrow {
    from { opacity: 0; transform: translateX(-6px) rotate(45deg); }
    to { opacity: 1; transform: rotate(45deg); }
}
@media (max-width: 768px) {
    .hero-way:not(:last-child)::before {
        top: calc(44px + 8px);
        bottom: calc(10px - 1.25rem);
        left: 21px;
        right: auto;
        border-top: 0;
        border-left: 2px dashed #d8b3ff;
    }
    .hero-way:not(:last-child)::after {
        top: auto;
        bottom: calc(11px - 1.25rem);
        left: 17px;
        right: auto;
        transform: rotate(135deg);
    }
}

/* =========================================================================
   Book a demo: Indigo with Vanilla text, so it holds its own beside the
   Tangerine Start free (header, home hero, the closing card on home, blog
   and resources, and the 404). On hover it turns white, its Indigo kept as
   a ring. The ring is inset rather than a border, so the button keeps the
   height of its orange neighbor.
   ========================================================================= */
.btn-demo,
.cta-btn.btn-demo {
    background: #21003b;
    color: #fff9f1;
    border: 0;
    box-shadow: inset 0 0 0 2px #21003b;
}
.btn-demo:hover,
.cta-btn.btn-demo:hover {
    background: #fff;
    color: #21003b;
    box-shadow: inset 0 0 0 2px #21003b;
}
/* Start free: white with a Tangerine ring, filling Tangerine on hover, so the pair reads calmly
   with Book a demo as the lead. The text stays Indigo throughout: Tangerine text on white is
   too faint to read. */
.btn-free,
.cta-btn.btn-free {
    background: #fff;
    color: #21003b;
    border: 0;
    box-shadow: inset 0 0 0 2px #ff7d00;
}
.btn-free:hover,
.cta-btn.btn-free:hover {
    background: #ff7d00;
    color: #21003b;
    box-shadow: inset 0 0 0 2px #ff7d00;
}

/* =========================================================================
   Phone menu: compact rows, and the panel scrolls, so the buttons are always
   in reach, on a small phone or with a section open. The buttons ride at
   the bottom of the panel, clear of the phone's own toolbar.
   (seekout.css padded each section twice, the row and its header, so five
   rows took up most of a phone screen.)
   ========================================================================= */
.mobile-menu {
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-content { padding: 0.5rem 1.5rem 0; gap: 0; min-height: 100%; }
.mobile-nav-section { padding: 0; }
.mobile-nav-header,
.mobile-nav-link { padding: 0.95rem 0; }
.mobile-nav-section.active .mobile-nav-dropdown,
.mobile-nav-section.open .mobile-nav-dropdown { padding-bottom: 0.6rem; }
.mobile-menu-cta {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
    gap: 0.6rem;
    background: #fff;
    box-shadow: 0 -12px 16px -12px rgba(33, 0, 59, 0.12);
}

/* =========================================================================
   Post and resource text on phones: long links and words wrap, wide tables
   scroll inside themselves, and embeds keep to the column, so an article
   never scrolls sideways. (Found in the October 2026 audit: four older posts
   ran up to 325px wider than a phone, on web addresses written out as link
   text.)
   ========================================================================= */
.wp-block-post-content { overflow-wrap: anywhere; }
.wp-block-post-content table { display: block; max-width: 100%; overflow-x: auto; }
.wp-block-post-content :is(img, iframe, video, embed, object) { max-width: 100%; }
.wp-block-post-content img { height: auto; }

/* Pricing comparison: a feature a plan does not have shows an empty cell rather than a dash;
   screen readers still hear "Not included". */
.comp-table .not-included {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Footer, wide screens: the link columns take only the width of their words,
   and the brand column takes the rest, so the description reads in a few long
   lines instead of a tall narrow block and the footer gets shorter. The long
   Applicant Evaluation & AI Screening link runs on two lines (parts/footer.html).
   Tablets and phones keep their two and one column layouts.
   ========================================================================= */
@media (min-width: 1025px) {
    .footer-grid {
        grid-template-columns: minmax(220px, 1fr) repeat(5, auto);
        column-gap: clamp(1.25rem, 2.2vw, 3rem);
    }
    .footer-brand p { max-width: 26rem; }
}