/*
 * Gallery industry-landing page styles.
 *
 * Extracted from an inline `<style>` block in
 * core/surfaces/public/templates/home/gallery_industry_landing.html so
 * the gallery can run under the strict PUBLIC_CSP applied to all public
 * marketing pages. The previous inline block was blocked by
 * `style-src 'self'` (with no `'unsafe-inline'` and no nonce), leaving
 * the gallery layout unstyled in the browser.
 *
 * All selectors prefixed `.gx-` are gallery-specific. The `html.js`
 * rule depends on the `.js` class being added to `<html>` by the
 * tidy_base_bootstrap.js external script — see that file for the
 * detection contract.
 */
/*
 * Override the SPA's fixed-app-shell html/body lock.
 *
 * The gallery loads the SPA's bundled style.css (so CnCircleFlow's CSS
 * module rules apply — see the comment block in the gallery template).
 * That bundle includes reset.css, which locks `html` and `body` to
 * `height: 100%; overflow: hidden;` for the SPA's fixed-chrome layout.
 *
 * Marketing pages — including the gallery — need normal page scroll.
 * Restore browser defaults here. `!important` because the SPA reset
 * uses bare `html` and `body` selectors which are equally specific to
 * what we'd otherwise write; we want this to win unconditionally.
 *
 * If a future change pushes more SPA-only globals into the bundled
 * style.css (drag-disabled cursors, fixed positioning, etc.), add
 * targeted overrides here.
 */
html,
body {
    height: auto !important;
    overflow: visible !important;
}

.gx-shell {
    max-width: 840px;
    margin: 0 auto;
    padding: calc(60px + 3.5rem) clamp(1.25rem, 5vw, 3rem) 6rem;
}

.gx-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    text-decoration: none !important;
    transition: color 140ms ease;
}
.gx-back:hover { color: var(--inv-bg-color); }
.gx-back svg { width: 14px; height: 14px; }

.gx-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent);
    margin-bottom: 0.8rem;
}
.gx-crumb > span { white-space: nowrap; }
.gx-crumb-sep { opacity: 0.35; }
.gx-crumb-sector {
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gx-title {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--inv-bg-color);
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 1rem;
}

.gx-tagline {
    font-size: 1rem;
    font-style: italic;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 620px;
}

.gx-companies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 3rem;
}

.gx-capsule {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
}

/* ─── Orbit stage chart ─── */
.gx-orbit-section {
    margin: 0 0 2rem;
}

.gx-orbit-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    margin-bottom: 2rem;
}

/* ─── SEO stage list ─── */
.gx-stage-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    counter-reset: stage-counter;
}

.gx-stage-item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    counter-increment: stage-counter;
}

.gx-stage-item::before {
    content: counter(stage-counter, decimal-leading-zero);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent);
    flex-shrink: 0;
    min-width: 1.4rem;
}

.gx-stage-group-label {
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent);
}

.gx-stage-sub-list {
    list-style: none;
    padding: 0 0 0 2.05rem;
    margin: 0.2rem 0 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gx-stage-sub-list li {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent);
}

.gx-stage-sub-list li::before {
    content: '–\00a0';
    opacity: 0.45;
}


/* SEO stage list — hidden for JS users, visible for crawlers.
 * The `.js` class is added to <html> by tidy_base_bootstrap.js
 * (external, CSP-safe) on every page that extends _tidy_landing_base.html. */
html.js .gx-stage-list { display: none; }

/* Isolate the ring's stacking context so ring node z-index values (up to
   browser max on hover) cannot escape and paint over the explainer modal */
#cn-circle-flow-root { isolation: isolate; min-height: 500px; }

/* Override v6-stage-section flex collapse: in the hero the panel has a fixed
   height so flex:1 1 0 distributes space. In the modal (height:auto) it
   collapses to zero. Use natural height instead. */
.gx-stage-explainer-panel .v6-stage-section { flex: 0 0 auto !important; min-height: 100px; }

/* ─── CTA ─── */
.gx-cta-wrap {
    padding-top: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.gx-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.75rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    color: #fff !important;
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 160ms ease, transform 160ms ease;
    white-space: nowrap;
}

.gx-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.gx-cta-btn svg { width: 14px; height: 14px; }
