/* Public website foundations. Loaded after route styles by PublicLayout.
   Existing route selectors are aliases for the reusable public-* components.
   Diagram geometry, product screenshots and their animation stay route-owned. */
body.doo-marketing {
    --public-page-bg: #0a0a0a;
    --public-text: #f5f5f7;
    --public-muted: #a8a8ae;
    --public-panel-bg: rgba(255, 255, 255, .035);
    --public-panel-hover: rgba(255, 255, 255, .06);
    --public-border: rgba(255, 255, 255, .12);
    --public-radius: 24px;
    --public-button-radius: 10px;
    --public-content-width: 1280px;
    --public-gutter: 24px;
    --public-section-space: 96px;
    --public-panel-space: 28px;
    --public-heading-space: 44px;
    --public-title-size: clamp(2.25rem, 4.4vw, 4.25rem);
    --public-hero-size: clamp(2.5rem, 5vw, 3.75rem);
    --public-compact-hero-size: clamp(2.25rem, 3.6vw, 3rem);
    --magic-bg: var(--public-page-bg);
    --magic-text: var(--public-text);
    --magic-muted: var(--public-muted);
    --muted: var(--public-muted);
    --fg: var(--public-text);
    color: var(--public-text);
    background: var(--public-page-bg);
}

/* Brand, buttons and focus use the same treatment on every public route. */
body.doo-marketing .btn {
    border-radius: var(--public-button-radius) !important;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
}
body.doo-marketing .marketing-main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 24px;
    text-align: center;
    white-space: normal;
}
body.doo-marketing :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--public-brand-blue);
    outline-offset: 4px;
}

/* Full-width audience pages share the navigation's content edge. Feature-page
   shells already sit inside marketing-main, so avoid adding a second gutter. */
body.doo-marketing .marketing-main :is(.public-shell, .startups-shell, .growing-shell, .established-shell) {
    width: min(var(--public-content-width), calc(100% - var(--public-gutter) * 2));
    margin-inline: auto;
}
body.doo-marketing .marketing-main :is(.startups-page, .growing-page, .established-page) {
    background: transparent;
    color: var(--public-text);
    --su-muted: var(--public-muted);
    --gb-muted: var(--public-muted);
    --est-muted: var(--public-muted);
    --est-cyan: var(--public-brand-blue);
}
body.doo-marketing .marketing-main :is(.public-section, .screenshot-section,
    .startups-section, .growing-section, .established-section,
    .core-hr-capabilities, .core-hr-how-it-works, .performance-capabilities,
    .performance-how-it-works, .recruitment-capabilities, .tasks-capabilities,
    .aiw-roster-section, .aiw-product-section) {
    padding-block: var(--public-section-space) !important;
}

/* Editorial section headers are left aligned; conversion panels are centred. */
body.doo-marketing .marketing-main :is(.public-section-head, .section-intro,
    .core-hr-section-head, .performance-section-head, .recruitment-section-head,
    .tasks-section-head, .startups-section-head, .growing-section-head,
    .established-section-head, .aiw-section-intro) {
    max-width: 760px;
    margin: 0 0 var(--public-heading-space);
    text-align: left;
}
body.doo-marketing .marketing-main :is(.public-section-head, .section-intro,
    .core-hr-section-head, .performance-section-head, .recruitment-section-head,
    .tasks-section-head, .startups-section-head, .growing-section-head,
    .established-section-head, .aiw-section-intro) h2,
body.doo-marketing .marketing-main .faq-section>h2 {
    font-size: var(--public-title-size) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
    font-weight: 750 !important;
    margin: 14px 0 18px !important;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
}
body.doo-marketing .marketing-main :is(.public-section-head, .section-intro,
    .core-hr-section-head, .performance-section-head, .recruitment-section-head,
    .tasks-section-head, .startups-section-head, .growing-section-head,
    .established-section-head, .aiw-section-intro) p {
    max-width: 650px;
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--public-muted);
}
/* Centre the landing page's three overview headings above their content. */
body.doo-marketing .marketing-main :is(.homepage-connected-record .homepage-connected-intro,
    .homepage-products > .section-intro, .homepage-company-stages > .company-stages-intro) {
    margin-inline: auto;
    text-align: center;
}
body.doo-marketing .marketing-main :is(.homepage-connected-record .homepage-connected-intro,
    .homepage-products > .section-intro, .homepage-company-stages > .company-stages-intro) p {
    margin-inline: auto;
}

body.doo-marketing .marketing-main .aiw-map-section > .aiw-section-intro {
    margin-inline: auto;
    text-align: center;
}
body.doo-marketing .marketing-main .aiw-map-section > .aiw-section-intro p {
    margin-inline: auto;
}
body.doo-marketing .marketing-main .aiw-map-section > .aiw-section-intro > .eyebrow {
    display: none;
}

body.doo-marketing .marketing-main :is(.core-hr-product-gallery, .core-hr-how-it-works, .core-hr-lifecycle-section) .core-hr-section-head,
body.doo-marketing .marketing-main :is(.performance-gallery, .performance-how-it-works) .performance-section-head,
body.doo-marketing .marketing-main :is(.recruitment-product, .recruitment-faq) .recruitment-section-head {
    margin-inline: auto;
    text-align: center;
}
body.doo-marketing .marketing-main :is(.core-hr-product-gallery, .core-hr-how-it-works, .core-hr-lifecycle-section) .core-hr-section-head p,
body.doo-marketing .marketing-main :is(.performance-gallery, .performance-how-it-works) .performance-section-head p,
body.doo-marketing .marketing-main :is(.recruitment-product, .recruitment-faq) .recruitment-section-head p {
    margin-inline: auto;
}

/* Suppress retired testimonials in any previously compiled page templates. */
body.doo-marketing :is(.core-hr-quote, .performance-quote, .recruitment-quote, .tasks-quote, .growing-quote) {
    display: none;
}

body.doo-marketing .marketing-main :is(.eyebrow, .card-kicker,
    .established-kicker, .startups-name, .growing-name, .established-section-head>span,
    .startups-section-head>span, .growing-section-head>span,
    .established-additions-grid article>span, .established-shift-grid span) {
    color: var(--public-brand-blue) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* The home poster remains larger; feature heroes and audience heroes share
   the standard scale. Compact columns use the same named small variant. */
body.doo-marketing .marketing-main :is(.core-hr-hero-copy, .performance-hero-copy,
    .recruitment-hero-copy, .tasks-hero-copy, .growing-hero-copy,
    .startups-hero-copy, .responsible-intro-copy, .aiw-hero-copy, .page-hero, .pricing-hero) h1 {
    font-size: var(--public-hero-size) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em;
    max-width: 100%;
    overflow-wrap: break-word;
}
body.doo-marketing .marketing-main :is(.established-hero-copy, .demo-aside) h1 {
    font-size: var(--public-compact-hero-size) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em;
    max-width: 100%;
}

/* Audience heroes follow the established-organisations text rhythm. */
body.doo-marketing .marketing-main :is(.startups-name, .growing-name) {
    display: inline;
    margin: 0;
}
body.doo-marketing .marketing-main :is(.startups-hero-copy, .growing-hero-copy, .established-hero-copy) h1 {
    margin: 24px 0 20px !important;
}
body.doo-marketing .marketing-main :is(.startups-audience, .growing-audience, .established-audience) {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}
body.doo-marketing .marketing-main :is(.startups-lede, .growing-lede, .established-lead) {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

/* Content panels share the existing translucent surface. These selectors
   deliberately exclude the architecture nodes, boards, wheels and galleries. */
body.doo-marketing .marketing-main :is(.public-panel, .product-card,
    .magic-price-card:not(.magic-price-free), .aiw-roster-card, .insight-card, .demo-form,
    .established-break-grid>article, .established-additions-grid>article,
    .established-shift-grid>article, .established-additions-core) {
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius);
    background: var(--public-panel-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.doo-marketing .marketing-main :is(.public-panel, .established-break-grid>article,
    .established-additions-grid>article, .established-additions-core) {
    padding: var(--public-panel-space);
}
body.doo-marketing .marketing-main :is(.public-panel, .product-card,
    .established-break-grid>article, .established-additions-grid>article,
    .established-shift-grid>article, .established-additions-core) h3 {
    font-size: 1.28rem !important;
    font-weight: 650;
    line-height: 1.3 !important;
    letter-spacing: -.025em;
}
body.doo-marketing .marketing-main :is(a.public-panel, a.product-card, a.insight-card):hover {
    background: var(--public-panel-hover);
    border-color: rgba(var(--public-brand-rgb), .4);
}

/* Homepage workflow cards: the grid is spacing, not a second painted surface. */
body.doo-marketing .marketing-main .homepage-products .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
body.doo-marketing .marketing-main .homepage-products .product-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    padding: var(--public-panel-space);
    background: var(--public-panel-bg);
    transform: none;
    transition: background .2s ease, border-color .2s ease;
}
body.doo-marketing .marketing-main .homepage-products .product-card:hover {
    background: var(--public-panel-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transform: none;
}
body.doo-marketing .marketing-main .homepage-products .product-card :is(h3, p) {
    margin: 0;
}
body.doo-marketing .marketing-main .homepage-products .card-kicker {
    line-height: 1.5;
}
body.doo-marketing .marketing-main .homepage-products .card-link {
    margin: 0;
    padding-top: 8px;
    align-self: end;
    line-height: 1.5;
}
@supports (grid-template-rows: subgrid) {
    body.doo-marketing .marketing-main .homepage-products .product-card {
        grid-template-rows: subgrid;
        grid-row: span 4;
    }
}
@media (max-width: 1100px) {
    body.doo-marketing .marketing-main .homepage-products .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    body.doo-marketing .marketing-main .homepage-products .product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* One disclosure pattern for every public FAQ. */
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) details {
    padding: 22px 0;
    border: 0;
    border-top: 1px solid var(--public-border);
    background: transparent;
}
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) details:last-child {
    border-bottom: 1px solid var(--public-border);
}
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
    color: var(--public-text);
}
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) summary::-webkit-details-marker { display: none; }
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--public-brand-blue);
}
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) details[open] summary::after { content: "−"; }
body.doo-marketing .marketing-main :is(.public-faq, .faq-section, .core-hr-faq,
    .performance-faq, .recruitment-faq, .tasks-faq, .startups-faq,
    .growing-faq, .established-faq) details p {
    margin: 16px 0 0;
    padding: 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.65;
}

/* Reuse the feature pages' centred conversion panel across the website. */
body.doo-marketing .marketing-main .aiw-cta {
    margin-bottom: clamp(48px, 6vw, 88px);
}
body.doo-marketing .marketing-main .aiw-cta > div > .eyebrow {
    display: none;
}

body.doo-marketing .marketing-main :is(.public-cta-panel, .public-cta,
    .core-hr-cta-panel, .performance-cta-panel, .recruitment-cta-panel,
    .tasks-final-cta>div>div, .startups-final, .growing-final>.growing-shell) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: clamp(32px, 5vw, 64px);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius);
    background: var(--public-panel-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    text-align: center;
}
body.doo-marketing .marketing-main :is(.public-cta-panel, .public-cta,
    .core-hr-cta-panel, .performance-cta-panel, .recruitment-cta-panel,
    .tasks-final-cta>div>div, .startups-final, .growing-final>.growing-shell)::before { display: none; }
body.doo-marketing .marketing-main :is(.public-cta-panel, .public-cta,
    .core-hr-cta-panel, .performance-cta-panel, .recruitment-cta-panel,
    .tasks-final-cta>div>div, .startups-final, .growing-final>.growing-shell) h2 {
    max-width: 800px;
    margin: 0 !important;
    font-size: var(--public-title-size) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em;
}
body.doo-marketing .marketing-main :is(.public-cta-panel, .public-cta,
    .core-hr-cta-panel, .performance-cta-panel, .recruitment-cta-panel,
    .tasks-final-cta>div>div, .startups-final, .growing-final>.growing-shell) p {
    max-width: 650px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.65;
}
body.doo-marketing .marketing-main :is(.public-cta-panel, .public-cta,
    .core-hr-cta-panel, .performance-cta-panel, .recruitment-cta-panel,
    .tasks-final-cta>div>div, .startups-final, .growing-final>.growing-shell)
    :is(.hero-actions, .established-actions, .startups-actions, .growing-actions, .tasks-hero-actions) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
}

@media (max-width: 700px) {
    body.doo-marketing {
        --public-gutter: 16px;
        --public-section-space: 64px;
        --public-panel-space: 22px;
        --public-heading-space: 28px;
        --public-title-size: clamp(2rem, 7vw, 2.75rem);
        --public-hero-size: clamp(2.25rem, 8vw, 3rem);
    }
}
/* Shared public logo: fixed artwork geometry, independent of font metrics.
   Size the header directly instead of scaling a larger layout box. */
body.doo-marketing .doo-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--logo-oo-color);
}
body.doo-marketing .site-nav .doo-logo {
    font-size: 38.4px;
    transform: none;
}
body.doo-marketing .marketing-footer .doo-logo { font-size: 48px; }
@media (prefers-reduced-motion: reduce) {
    body.doo-marketing .btn { transition: none; }
    body.doo-marketing .btn:hover { transform: none; }
    body.doo-marketing .doo-o-spin,
    .public-logo-mark .doo-logo-rotor { animation: none; }
}