/* ===========================================================================
   BizPro About — the public platform page at /about

   EVERY selector is scoped to "body.bp-about", and the file is excluded from
   the common-styles bundle in bundles.json. Both matter: that bundle globs
   every .css file under wwwroot/Common/Styles, so anything dropped in this
   folder is otherwise concatenated into the stylesheet the login page, the app
   layout and the error pages all load. A bare "footer" background rule here
   turned the sign-in panel's footer black exactly that way. Keep the exclusion,
   and keep the scope class — either one alone would have prevented it, and
   together they mean a future edit cannot reintroduce it.

   Do not write a glob with a star-slash in these comments: it closes the
   comment early and silently eats the rule that follows.

   The page itself renders with Layout = null, so nothing here has to fight
   Metronic. Design tokens mirror bizpro-auth.css (the "BizPro Auth" Claude
   Design project) so the public surfaces match — Archivo as the display face,
   BizPro red on warm paper, near-black stage.

   Sections in this file, in order:
     tokens · base · chrome (topbar, toggle, language) · hero · section shell
     cards · ecosystem · dynamic data demo · BPMN demo · human+AI · modules
     trust · integration · marketplace · devices · use cases · screenshots
     CTA · footer · AI mode · motion
   ======================================================================== */

body.bp-about {
    --accent: #ff1a1a;
    --accent-2: #e00000;
    --accent-tint: rgba(255, 26, 26, .10);
    --accent-ring: rgba(255, 26, 26, .22);

    /* "Go" green — the running token in the process diagrams. Red is the brand
       and marks emphasis; a token travelling a live flow is a different idea,
       so it gets its own colour. --go-on-dark is for the hero, which stays dark
       in both themes. */
    --go: #12a150;
    --go-tint: rgba(18, 161, 80, .12);
    --go-ring: rgba(18, 161, 80, .26);
    --go-on-dark: #3ddc84;

    --paper: #f7f6f4;
    --surface: #fbfaf9;
    --surface-2: #f1efec;
    --line: #e8e5e1;
    --line-2: #ddd9d4;
    --line-3: #b9b4ad;

    --ink: #17161a;
    --ink-2: #4c4842;
    --ink-3: #6b6762;
    --ink-4: #8d8881;

    --stage: #0b0b0d;
    --stage-2: #131316;
    --stage-ink: #f4f2f0;
    --stage-ink-2: #a5a0a0;
    --stage-ink-3: #6f6b6b;
    --stage-line: rgba(255, 255, 255, .10);

    /* Same two-face system as the sign-in screens (bizpro-auth.css): Archivo
       carries display text, IBM Plex Sans carries body copy. */
    --display: Archivo, 'IBM Plex Sans', system-ui, sans-serif;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --wrap: 1180px;
    --shadow: 0 1px 2px rgba(23, 22, 26, .05), 0 18px 44px -26px rgba(23, 22, 26, .35);
}

@media (prefers-color-scheme: dark) {
    body.bp-about .brand-logo--light {
        display: none;
    }

    body.bp-about .brand-logo--dark {
        display: block;
    }

    body.bp-about {
        --accent: #ff4d4d;
        --accent-2: #ff6a6a;
        --accent-tint: rgba(255, 77, 77, .13);
        --accent-ring: rgba(255, 77, 77, .28);

        --go: #3ddc84;
        --go-tint: rgba(61, 220, 132, .14);
        --go-ring: rgba(61, 220, 132, .30);

        --paper: #0d0d10;
        --surface: #141317;
        --surface-2: #1a191e;
        --line: #26252b;
        --line-2: #333139;
        --line-3: #4b4854;

        --ink: #f2f0ee;
        --ink-2: #bdb8b2;
        --ink-3: #948f89;
        --ink-4: #74706b;

        --stage: #08080a;
        --stage-2: #101013;
        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px -26px rgba(0, 0, 0, .9);
    }
}

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

body.bp-about * {
    box-sizing: border-box;
}

html:has(body.bp-about) {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body.bp-about {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.bp-about h1,
body.bp-about h2,
body.bp-about h3,
body.bp-about h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.022em;
    text-wrap: balance;
    line-height: 1.14;
}

body.bp-about p {
    margin: 0 0 1em;
}

body.bp-about a {
    color: inherit;
    text-decoration: none;
}

body.bp-about img {
    max-width: 100%;
    display: block;
}

body.bp-about b {
    font-weight: 650;
    color: var(--ink);
}

body.bp-about .mono {
    font-family: var(--mono);
    font-size: .92em;
}

body.bp-about .hi {
    color: var(--accent);
    font-weight: 650;
}

body.bp-about .wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px;
}

body.bp-about .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    z-index: 200;
}

    body.bp-about .skip:focus {
        left: 12px;
        top: 12px;
    }

body.bp-about :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

body.bp-about .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- topbar */

body.bp-about .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

body.bp-about .topbar-in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 18px;
}

body.bp-about .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: auto;
}

    /* The real product logo, one file per theme. */
    body.bp-about .brand-logo {
        height: 21px;
        width: auto;
        display: block;
    }

    body.bp-about .brand-logo--dark {
        display: none;
    }

    body.bp-about .brand small {
        font-weight: 500;
        font-size: 13px;
        color: var(--ink-3);
        letter-spacing: 0;
    }

/* mode switch — a segmented control with a sliding thumb */
body.bp-about .modesw {
    position: relative;
    display: flex;
    border: 1px solid var(--line-2);
    background: var(--surface);
    padding: 3px;
}

    body.bp-about .modesw .thumb {
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 3px;
        width: calc(50% - 3px);
        background: var(--ink);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    body.bp-about .modesw[data-mode="ai"] .thumb {
        transform: translateX(100%);
    }

    body.bp-about .modesw a {
        position: relative;
        z-index: 1;
        min-width: 74px;
        text-align: center;
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--ink-3);
        transition: color .2s;
    }

        body.bp-about .modesw a[aria-current="true"] {
            color: var(--paper);
        }

        body.bp-about .modesw a:hover {
            color: var(--ink);
        }

        body.bp-about .modesw a[aria-current="true"]:hover {
            color: var(--paper);
        }

body.bp-about .langsw {
    display: flex;
    gap: 2px;
}

    body.bp-about .langsw a {
        padding: 5px 9px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-3);
        border: 1px solid transparent;
    }

        body.bp-about .langsw a:hover {
            color: var(--ink);
            border-color: var(--line-2);
        }

        body.bp-about .langsw a[aria-current="true"] {
            color: var(--ink);
            border-color: var(--line-3);
        }

@media (max-width: 860px) {
    body.bp-about .brand small {
        display: none;
    }

    body.bp-about .topbar-in {
        gap: 10px;
        padding: 0 18px;
    }

    body.bp-about .modesw a {
        min-width: 56px;
        padding: 5px 8px;
    }
}

/* ---------------------------------------------------------------- hero */

body.bp-about .hero {
    background: var(--stage);
    color: var(--stage-ink);
    padding: 78px 0 84px;
    position: relative;
    overflow: hidden;
}

    body.bp-about .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(760px 380px at 78% 8%, rgba(255, 26, 26, .16), transparent 62%),
            radial-gradient(600px 460px at 8% 96%, rgba(255, 255, 255, .05), transparent 60%);
        pointer-events: none;
    }

body.bp-about .hero-in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
    align-items: center;
}

body.bp-about .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

body.bp-about .hero h1 {
    font-size: clamp(36px, 5.2vw, 62px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.03;
    margin-bottom: 22px;
}

body.bp-about .hero .lede {
    color: var(--stage-ink-2);
    font-size: 18px;
    max-width: 46ch;
    margin-bottom: 28px;
}

body.bp-about .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 30px;
}

    body.bp-about .chips span {
        font-size: 12.5px;
        font-weight: 500;
        padding: 5px 11px;
        color: var(--stage-ink-2);
        border: 1px solid var(--stage-line);
        background: rgba(255, 255, 255, .03);
    }

body.bp-about .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.bp-about .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid var(--line-3);
    color: var(--ink);
    background: var(--surface);
    transition: transform .16s, background .16s, border-color .16s;
}

    body.bp-about .btn:hover {
        transform: translateY(-1px);
    }

    body.bp-about .btn.primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

        body.bp-about .btn.primary:hover {
            background: var(--accent-2);
            border-color: var(--accent-2);
        }

body.bp-about .hero .btn {
    background: transparent;
    color: var(--stage-ink);
    border-color: var(--stage-line);
}

    body.bp-about .hero .btn:hover {
        border-color: var(--stage-ink-3);
        background: rgba(255, 255, 255, .05);
    }

    body.bp-about .hero .btn.primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

        body.bp-about .hero .btn.primary:hover {
            background: var(--accent-2);
        }

@media (max-width: 980px) {
    body.bp-about .hero-in {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    body.bp-about .hero {
        padding: 54px 0 60px;
    }
}

/* hero composition — the three things the platform is made of, stacked and
   wired together. Decorative: the same idea is stated in the copy beside it. */

body.bp-about .hero-art {
    position: relative;
    display: grid;
    gap: 14px;
    padding-left: 26px;
}

body.bp-about .ha-rail {
    position: absolute;
    left: 8px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
}

body.bp-about .ha-panel {
    position: relative;
    border: 1px solid var(--stage-line);
    background: rgba(255, 255, 255, .035);
    padding: 16px 18px;
    animation: ha-float 9s ease-in-out infinite;
}

    body.bp-about .ha-panel:nth-of-type(2) {
        animation-delay: .8s;
    }

    body.bp-about .ha-panel:nth-of-type(3) {
        animation-delay: 1.6s;
    }

    body.bp-about .ha-panel::before {
        content: "";
        position: absolute;
        left: -19px;
        top: 24px;
        width: 14px;
        height: 1px;
        background: var(--stage-line);
    }

@keyframes ha-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

body.bp-about .ha-k {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stage-ink-3);
    margin-bottom: 13px;
}

body.bp-about .ha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    body.bp-about .ha-row span {
        width: 62px;
        height: 7px;
        background: rgba(255, 255, 255, .18);
    }

    body.bp-about .ha-row i {
        flex: 1;
        height: 7px;
        background: rgba(255, 255, 255, .07);
    }

    body.bp-about .ha-row.new span {
        background: var(--accent);
    }

    body.bp-about .ha-row.new i {
        background: rgba(255, 26, 26, .26);
    }

body.bp-about .ha-flow {
    display: flex;
    align-items: center;
    position: relative;
    padding: 5px 0;
}

    body.bp-about .ha-flow b {
        width: 13px;
        height: 13px;
        border: 1.5px solid rgba(255, 255, 255, .34);
        flex: none;
    }

        body.bp-about .ha-flow b:first-of-type,
        body.bp-about .ha-flow b:last-of-type {
            border-radius: 50%;
        }

    body.bp-about .ha-flow em {
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, .2);
    }

body.bp-about .ha-token {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    background: var(--go-on-dark);
    border-radius: 50%;
    animation: ha-run 4.6s ease-in-out infinite;
}

@keyframes ha-run {
    0% {
        left: 0;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        left: calc(100% - 7px);
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        opacity: 0;
    }
}

body.bp-about .ha-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

    body.bp-about .ha-grid u {
        display: block;
        height: 26px;
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .04);
    }

        body.bp-about .ha-grid u:nth-child(2) {
            border-color: var(--accent);
            background: rgba(255, 26, 26, .16);
        }

/* ---------------------------------------------------------------- section shell */

body.bp-about section {
    padding: 88px 0;
    border-top: 1px solid var(--line);
}

    body.bp-about section.alt {
        background: var(--surface);
    }

body.bp-about .shead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

    body.bp-about .shead .num {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: .14em;
        color: var(--accent);
        font-weight: 600;
    }

    body.bp-about .shead .rule {
        flex: 1;
        height: 1px;
        background: var(--line-2);
    }

body.bp-about section h2 {
    font-size: clamp(27px, 3.3vw, 40px);
    font-weight: 750;
    letter-spacing: -.03em;
    margin-bottom: 16px;
    max-width: 22ch;
}

body.bp-about .sintro {
    color: var(--ink-2);
    font-size: 18px;
    max-width: 62ch;
    margin-bottom: 40px;
}

body.bp-about .lead {
    font-size: 17.5px;
    color: var(--ink-2);
    max-width: 68ch;
}

body.bp-about .note {
    border-left: 2px solid var(--accent);
    padding: 2px 0 2px 20px;
    color: var(--ink-2);
    max-width: 72ch;
    margin-top: 34px;
}

    body.bp-about .note p {
        margin: 0;
    }

/* ---------------------------------------------------------------- point / card grids */

body.bp-about .points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 8px;
}

    body.bp-about .points > div {
        background: var(--paper);
        padding: 24px 24px 26px;
    }

body.bp-about section.alt .points > div {
    background: var(--surface);
}

body.bp-about .points h3 {
    font-size: 16.5px;
    font-weight: 650;
    margin-bottom: 8px;
    letter-spacing: -.012em;
}

body.bp-about .points p {
    margin: 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

body.bp-about .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

body.bp-about .card {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 24px;
    position: relative;
    transition: border-color .2s, transform .2s;
}

body.bp-about section.alt .card {
    background: var(--paper);
}

body.bp-about .card:hover {
    border-color: var(--line-3);
    transform: translateY(-2px);
}

body.bp-about .card .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

body.bp-about .card h3 {
    font-size: 17px;
    font-weight: 650;
    margin-bottom: 9px;
}

body.bp-about .card p {
    margin: 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

/* ---------------------------------------------------------------- ecosystem */

body.bp-about .eco {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

body.bp-about .hub {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
}

    body.bp-about .hub svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

body.bp-about .hub-spoke {
    stroke: var(--line-3);
    stroke-width: 1;
    fill: none;
}

body.bp-about .hub-ring {
    stroke: var(--line-2);
    stroke-width: 1;
    fill: none;
}

body.bp-about .hub-node {
    fill: var(--surface);
    stroke: var(--line-3);
    stroke-width: 1;
}

body.bp-about .hub-core {
    fill: var(--ink);
}

body.bp-about .hub-core-text {
    fill: var(--paper);
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
}

body.bp-about .hub-icon {
    stroke: var(--ink-2);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.bp-about .hub-pulse {
    fill: var(--accent);
    opacity: 0;
    animation: hub-pulse 3.2s ease-in-out infinite;
}

/* Each spoke sits inside a rotated <g>, so one keyframe moving +62 user units
   along X sends a pulse outward on all six. */
@keyframes hub-pulse {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    18%, 82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(62px);
    }
}

body.bp-about .hub-pulse.p1 {
    animation-delay: 1.2s;
}

body.bp-about .hub-pulse.p2 {
    animation-delay: 1.45s;
}

body.bp-about .hub-pulse.p3 {
    animation-delay: 1.7s;
}

body.bp-about .hub-pulse.p4 {
    animation-delay: 1.95s;
}

body.bp-about .hub-pulse.p5 {
    animation-delay: 2.2s;
}

body.bp-about .hub-pulse.p6 {
    animation-delay: 2.45s;
}

body.bp-about .hub-ring {
    transform-origin: 200px 200px;
    animation: hub-spin 72s linear infinite;
}

@keyframes hub-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Entrance animations below use `backwards` rather than `forwards`, and their
   resting state is the visible one. An element that never gets to run its
   animation — a background tab on load, a throttled device — is then simply
   there, instead of stuck invisible at frame zero. */
body.bp-about .hub-spoke {
    stroke-dasharray: 62;
    animation: hub-draw .9s ease backwards;
}

@keyframes hub-draw {
    from {
        stroke-dashoffset: 62;
    }

    to {
        stroke-dashoffset: 0;
    }
}

body.bp-about .hub-spoke.s2 {
    animation-delay: .1s;
}

body.bp-about .hub-spoke.s3 {
    animation-delay: .2s;
}

body.bp-about .hub-spoke.s4 {
    animation-delay: .3s;
}

body.bp-about .hub-spoke.s5 {
    animation-delay: .4s;
}

body.bp-about .hub-spoke.s6 {
    animation-delay: .5s;
}

body.bp-about .hub-n {
    animation: hub-pop .55s ease backwards;
}

@keyframes hub-pop {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.bp-about .hub-n.n1 {
    animation-delay: .5s;
}

body.bp-about .hub-n.n2 {
    animation-delay: .62s;
}

body.bp-about .hub-n.n3 {
    animation-delay: .74s;
}

body.bp-about .hub-n.n4 {
    animation-delay: .86s;
}

body.bp-about .hub-n.n5 {
    animation-delay: .98s;
}

body.bp-about .hub-n.n6 {
    animation-delay: 1.1s;
}

body.bp-about .pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

    body.bp-about .pillars > div {
        background: var(--paper);
        padding: 22px;
    }

body.bp-about section.alt .pillars > div {
    background: var(--surface);
}

body.bp-about .pillars .ic {
    width: 22px;
    height: 22px;
    stroke: var(--accent);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
}

body.bp-about .pillars h3 {
    font-size: 16px;
    font-weight: 650;
    margin-bottom: 5px;
}

body.bp-about .pillars .line {
    font-size: 13.5px;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 500;
}

body.bp-about .pillars p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.58;
}

@media (max-width: 1020px) {
    body.bp-about .eco {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    body.bp-about .hub {
        max-width: 380px;
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------------- demo shell */

body.bp-about .demo {
    border: 1px solid var(--line);
    background: var(--surface);
    margin-top: 40px;
}

body.bp-about section.alt .demo {
    background: var(--paper);
}

body.bp-about .demo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
}

    body.bp-about .demo-head .lamp {
        width: 7px;
        height: 7px;
        background: var(--accent);
        border-radius: 50%;
    }

body.bp-about .demo-body {
    padding: 30px;
}

body.bp-about .demo-cap {
    border-top: 1px solid var(--line);
    padding: 16px 18px;
    font-size: 14.5px;
    color: var(--ink-2);
}

    body.bp-about .demo-cap p {
        margin: 0;
    }

/* ---------------------------------------------------------------- dynamic data demo */

body.bp-about .fd {
    position: relative;
    min-height: 300px;
}

body.bp-about .fd-pane {
    position: absolute;
    inset: 0;
    animation: fd-form 14s infinite;
}

    body.bp-about .fd-pane.t {
        animation-name: fd-table;
        opacity: 0;
    }

@keyframes fd-form {
    0%, 52% {
        opacity: 1;
        transform: translateY(0);
    }

    60%, 96% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fd-table {
    0%, 52% {
        opacity: 0;
        transform: translateY(10px);
    }

    62%, 92% {
        opacity: 1;
        transform: translateY(0);
    }

    98%, 100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

body.bp-about .fd-title {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 16px;
}

body.bp-about .fd-row {
    border: 1px solid var(--line-2);
    background: var(--paper);
    padding: 11px 14px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Runs on the same 14s cycle as the panes, so the "a field is added" beat
       replays every loop instead of only on first paint. Per-row delays are set
       inline by the view. */
    animation: fd-in 14s infinite;
    animation-fill-mode: backwards;
}

body.bp-about section.alt .fd-row {
    background: var(--surface);
}

body.bp-about .fd-row .lbl {
    font-size: 13.5px;
    font-weight: 600;
    min-width: 132px;
    color: var(--ink-2);
}

body.bp-about .fd-row .bar {
    flex: 1;
    height: 8px;
    background: var(--line);
}

body.bp-about .fd-row.new {
    border-color: var(--accent);
    background: var(--accent-tint);
}

    body.bp-about .fd-row.new .lbl {
        color: var(--accent);
    }

    body.bp-about .fd-row.new .bar {
        background: var(--accent-ring);
    }

@keyframes fd-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    5%, 100% {
        opacity: 1;
        transform: none;
    }
}

body.bp-about .fd-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    border: 1px dashed var(--accent);
    padding: 8px 13px;
    animation: fd-in 14s infinite;
    animation-fill-mode: backwards;
}

body.bp-about .fd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    body.bp-about .fd-table th,
    body.bp-about .fd-table td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
    }

    body.bp-about .fd-table th {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--ink-4);
        font-weight: 650;
        border-bottom-color: var(--line-2);
    }

        body.bp-about .fd-table th.new,
        body.bp-about .fd-table td.new {
            color: var(--accent);
            background: var(--accent-tint);
        }

    body.bp-about .fd-table td {
        color: var(--ink-2);
    }

    body.bp-about .fd-table .ph {
        display: block;
        height: 8px;
        background: var(--line);
        max-width: 120px;
    }

/* ---------------------------------------------------------------- BPMN demo */

/* Prompt-to-process. One 18s cycle, four phases: the prompt types (0–14%),
   the editor draws (15–40%), the token runs the happy path (44–73%), and the
   paid orders land in the task list (72–95%). The canvas is styled after the
   product's own bpmn.io-based modeller in dark mode, and stays dark in both
   page themes — it is a picture of the editor, not a themed panel. */

body.bp-about .bpx-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    overflow: hidden;
}

body.bp-about .bpx-prompt-k {
    flex: none;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    background: var(--accent-tint);
    padding: 3px 9px;
    border-radius: 999px;
}

body.bp-about .bpx-type {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink-2);
    white-space: nowrap;
}

body.bp-about .bpx-type-in {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    animation: bpx-type 18s steps(44, end) infinite;
}

/* 60ch clears the longest of the three prompts; ch units, because a percentage
   here would be circular — the flex parent takes its width from this child. */
@keyframes bpx-type {
    0% {
        max-width: 0;
    }

    2% {
        max-width: 0;
    }

    14%, 100% {
        max-width: 60ch;
    }
}

body.bp-about .bpx-caret {
    flex: none;
    width: 7px;
    height: 15px;
    margin-left: 3px;
    background: var(--accent);
    animation: bpx-caret 1s steps(2, start) infinite;
}

@keyframes bpx-caret {
    to {
        visibility: hidden;
    }
}

/* design/run chip in the demo header */
body.bp-about .bpx-phase {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

    body.bp-about .bpx-phase span {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 3px 9px;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        color: var(--ink-4);
        animation: bpx-phase-design 18s infinite;
    }

        body.bp-about .bpx-phase span.run {
            animation-name: bpx-phase-run;
        }

@keyframes bpx-phase-design {
    0%, 41% {
        color: var(--accent);
        border-color: var(--accent);
    }

    44%, 100% {
        color: var(--ink-4);
        border-color: var(--line-2);
    }
}

@keyframes bpx-phase-run {
    0%, 41% {
        color: var(--ink-4);
        border-color: var(--line-2);
    }

    44%, 100% {
        color: var(--go);
        border-color: var(--go);
    }
}

/* ---- canvas + task list layout */

body.bp-about .bpx-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    align-items: stretch;
}

body.bp-about .bpx-canvas {
    padding: 26px 8px 14px 20px;
    overflow-x: auto;
    /* the modeller: near-black ground with the dot grid bpmn.io draws */
    background: #101014 radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 20px 20px;
}

    body.bp-about .bpx-canvas svg {
        display: block;
        min-width: 540px;
        width: 100%;
        height: auto;
    }

/* ---- bpmn.io-style elements (dark) */

body.bp-about .bpx-flow {
    fill: none;
    stroke: #b6bcc8;
    stroke-width: 1.5;
    stroke-dasharray: 150;
    animation: bpx-draw 18s infinite;
    animation-fill-mode: backwards;
}

@keyframes bpx-draw {
    0% {
        stroke-dashoffset: 150;
    }

    2.2%, 100% {
        stroke-dashoffset: 0;
    }
}

body.bp-about .bpx-flow.f1 {
    animation-delay: 3.2s;
}

body.bp-about .bpx-flow.f2 {
    animation-delay: 4.1s;
}

body.bp-about .bpx-flow.f3 {
    animation-delay: 5s;
}

body.bp-about .bpx-flow.f4 {
    animation-delay: 5.9s;
}

body.bp-about .bpx-flow.f5 {
    animation-delay: 6.6s;
}

body.bp-about .bpx-arrowhead {
    fill: #b6bcc8;
}

body.bp-about .bpx-task {
    fill: #1b1d24;
    stroke: #d4d8e0;
    stroke-width: 1.6;
}

body.bp-about .bpx-event {
    fill: #1b1d24;
    stroke: #d4d8e0;
    stroke-width: 1.6;
}

    body.bp-about .bpx-event.end {
        stroke-width: 4;
    }

body.bp-about .bpx-icon {
    fill: none;
    stroke: #9aa1ad;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.bp-about .bpx-x {
    fill: none;
    stroke: #d4d8e0;
    stroke-width: 2.6;
    stroke-linecap: round;
}

body.bp-about .bpx-label {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    fill: #eceef2;
}

body.bp-about .bpx-sub {
    font-family: var(--mono);
    font-size: 10px;
    fill: #8b919d;
}

body.bp-about .bpx-yes {
    fill: var(--go);
}

/* elements pop into place while the "editor" draws them */
body.bp-about .bpx-n {
    animation: bpx-pop 18s infinite;
    animation-fill-mode: backwards;
}

@keyframes bpx-pop {
    0% {
        opacity: 0;
    }

    1.4%, 100% {
        opacity: 1;
    }
}

body.bp-about .bpx-n.n1 {
    animation-delay: 2.9s;
}

body.bp-about .bpx-n.n2 {
    animation-delay: 3.6s;
}

body.bp-about .bpx-n.n3 {
    animation-delay: 4.5s;
}

body.bp-about .bpx-n.n4 {
    animation-delay: 5.4s;
}

body.bp-about .bpx-n.n5 {
    animation-delay: 6.2s;
}

body.bp-about .bpx-n.n6 {
    animation-delay: 6.9s;
}

/* ---- the run: token, task highlights, end-event glow */

/* Deltas are from the start event at (36,138). The token hides while it is
   inside a task — the highlight below stands in for it there — and climbs the
   yes-branch to the received end. */
body.bp-about .bpx-token {
    fill: var(--go);
    opacity: 0;
    animation: bpx-run 18s infinite;
}

@keyframes bpx-run {
    0%, 44% {
        opacity: 0;
        transform: translate(0, 0);
    }

    45%, 46% {
        opacity: 1;
        transform: translate(0, 0);
    }

    48% {
        opacity: 1;
        transform: translate(33px, 0);
    }

    48.5%, 52.5% {
        opacity: 0;
        transform: translate(33px, 0);
    }

    53% {
        opacity: 0;
        transform: translate(151px, 0);
    }

    54%, 55% {
        opacity: 1;
        transform: translate(151px, 0);
    }

    56.5% {
        opacity: 1;
        transform: translate(183px, 0);
    }

    57%, 61% {
        opacity: 0;
        transform: translate(183px, 0);
    }

    61.5% {
        opacity: 0;
        transform: translate(301px, 0);
    }

    62.5% {
        opacity: 1;
        transform: translate(301px, 0);
    }

    64.5%, 65.5% {
        opacity: 1;
        transform: translate(356px, 0);
    }

    67.5% {
        opacity: 1;
        transform: translate(356px, -56px);
    }

    70% {
        opacity: 1;
        transform: translate(464px, -56px);
    }

    72% {
        opacity: 1;
        transform: translate(464px, -56px);
    }

    74%, 100% {
        opacity: 0;
        transform: translate(464px, -56px);
    }
}

body.bp-about .bpx-active {
    fill: rgba(61, 220, 132, .13);
    stroke: var(--go);
    stroke-width: 1.6;
    opacity: 0;
    animation: bpx-active1 18s infinite;
}

@keyframes bpx-active1 {
    0%, 48% {
        opacity: 0;
    }

    48.5%, 52.5% {
        opacity: 1;
    }

    53.5%, 100% {
        opacity: 0;
    }
}

body.bp-about .bpx-active.a2 {
    animation-name: bpx-active2;
}

@keyframes bpx-active2 {
    0%, 56.5% {
        opacity: 0;
    }

    57%, 61% {
        opacity: 1;
    }

    62%, 100% {
        opacity: 0;
    }
}

body.bp-about .bpx-received {
    fill: none;
    stroke: var(--go);
    stroke-width: 4;
    opacity: 0;
    animation: bpx-received 18s infinite;
}

@keyframes bpx-received {
    0%, 69% {
        opacity: 0;
    }

    71%, 82% {
        opacity: 1;
    }

    86%, 100% {
        opacity: 0;
    }
}

/* ---- task list — where the finished orders land */

body.bp-about .bpx-tasks {
    border-left: 1px solid var(--line);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

body.bp-about .bpx-tasks-h {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 4px;
}

body.bp-about .bpx-card {
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface);
    padding: 11px 13px;
    opacity: 0;
    animation: bpx-card 18s infinite;
    animation-fill-mode: backwards;
}

body.bp-about section.alt .bpx-card {
    background: var(--paper);
}

body.bp-about .bpx-card .t {
    display: block;
    font-size: 13.5px;
    font-weight: 650;
    margin-bottom: 6px;
}

body.bp-about .bpx-card .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.bp-about .bpx-card .state {
    font-size: 11px;
    font-weight: 600;
    color: var(--go);
    border: 1px solid var(--go-ring);
    background: var(--go-tint);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

body.bp-about .bpx-card .time {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-4);
}

@keyframes bpx-card {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    2.5%, 92% {
        opacity: 1;
        transform: none;
    }

    97%, 100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

body.bp-about .bpx-card.c1 {
    animation-delay: 12.9s;
}

body.bp-about .bpx-card.c2 {
    animation-delay: 13.7s;
}

body.bp-about .bpx-card.c3 {
    animation-delay: 14.5s;
}

@media (max-width: 780px) {
    body.bp-about .bpx-body {
        grid-template-columns: 1fr;
    }

    body.bp-about .bpx-tasks {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    body.bp-about .bpx-type {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------- human + AI */

body.bp-about .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

body.bp-about .step {
    border-top: 2px solid var(--line-2);
    padding-top: 18px;
    position: relative;
    animation: step-cycle 12s infinite;
}

    body.bp-about .step.s2 {
        animation-delay: 3s;
    }

    body.bp-about .step.s3 {
        animation-delay: 6s;
    }

    body.bp-about .step.s4 {
        animation-delay: 9s;
    }

@keyframes step-cycle {
    0%, 22% {
        border-top-color: var(--accent);
    }

    26%, 100% {
        border-top-color: var(--line-2);
    }
}

body.bp-about .step .n {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 10px;
}

body.bp-about .step h3 {
    font-size: 16.5px;
    font-weight: 650;
    margin-bottom: 8px;
}

body.bp-about .step p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.58;
}

/* ---------------------------------------------------------------- trust */

body.bp-about .trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 44px;
    align-items: start;
}

body.bp-about .audit {
    border: 1px solid var(--line);
    background: var(--surface);
}

body.bp-about section.alt .audit {
    background: var(--paper);
}

body.bp-about .audit-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

body.bp-about .audit-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

    body.bp-about .audit-row:last-child {
        border-bottom: 0;
    }

    body.bp-about .audit-row .t {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-4);
    }

    body.bp-about .audit-row .who {
        font-weight: 600;
        font-size: 13.5px;
        display: block;
    }

    body.bp-about .audit-row .what {
        color: var(--ink-2);
        font-size: 13.5px;
    }

    body.bp-about .audit-row .state {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border: 1px solid var(--line-2);
        color: var(--ink-3);
        white-space: nowrap;
    }

    body.bp-about .audit-row:last-child .state {
        border-color: var(--accent);
        color: var(--accent);
    }

@media (max-width: 980px) {
    body.bp-about .trust-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

/* ---------------------------------------------------------------- cross-tenant */

body.bp-about .xt {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--line);
    margin-top: 40px;
    background: var(--surface);
}

body.bp-about section.alt .xt {
    background: var(--paper);
}

body.bp-about .xt-org {
    padding: 26px;
}

    body.bp-about .xt-org .who {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 14px;
    }

body.bp-about .xt-lane {
    width: 130px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    position: relative;
    background: repeating-linear-gradient( to bottom, transparent 0 10px, var(--line) 10px 11px );
}

    body.bp-about .xt-lane::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 26px;
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        background: var(--go);
        border-radius: 50%;
        animation: xt-move 6s infinite ease-in-out;
    }

@keyframes xt-move {
    0%, 8% {
        transform: translateY(0);
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    46%, 54% {
        transform: translateY(90px);
        opacity: 1;
    }

    86% {
        transform: translateY(0);
        opacity: 1;
    }

    94%, 100% {
        opacity: 0;
    }
}

body.bp-about .xt-step {
    font-size: 14px;
    color: var(--ink-2);
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

    body.bp-about .xt-step:last-child {
        border-bottom: 0;
    }

@media (max-width: 780px) {
    body.bp-about .xt {
        grid-template-columns: 1fr;
    }

    body.bp-about .xt-lane {
        width: auto;
        height: 56px;
        border: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: repeating-linear-gradient( to right, transparent 0 10px, var(--line) 10px 11px );
    }

        body.bp-about .xt-lane::after {
            top: 50%;
            left: 26px;
            margin-top: -4.5px;
            animation-name: xt-move-h;
        }

    @keyframes xt-move-h {
        0%, 8% {
            transform: translateX(0);
            opacity: 0;
        }

        14% {
            opacity: 1;
        }

        46%, 54% {
            transform: translateX(120px);
            opacity: 1;
        }

        86% {
            transform: translateX(0);
            opacity: 1;
        }

        94%, 100% {
            opacity: 0;
        }
    }
}

/* ---------------------------------------------------------------- devices */

body.bp-about .dev {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 52px;
    align-items: center;
}

body.bp-about .phone {
    border: 1px solid var(--line-3);
    background: var(--surface);
    padding: 12px;
    box-shadow: var(--shadow);
    max-width: 280px;
    margin: 0 auto;
}

body.bp-about .phone-screen {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 18px 14px;
    min-height: 400px;
}

body.bp-about .phone-bar {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    margin-bottom: 18px;
}

body.bp-about .phone-task {
    border: 1px solid var(--line-2);
    padding: 12px;
    margin-bottom: 9px;
    font-size: 13.5px;
    font-weight: 550;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
}

    body.bp-about .phone-task .tick {
        width: 15px;
        height: 15px;
        border: 1.5px solid var(--line-3);
        flex: none;
    }

    body.bp-about .phone-task:first-of-type {
        border-color: var(--accent);
    }

        body.bp-about .phone-task:first-of-type .tick {
            border-color: var(--accent);
            background: var(--accent);
        }

@media (max-width: 900px) {
    body.bp-about .dev {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ---------------------------------------------------------------- use cases */

body.bp-about .uses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

    body.bp-about .uses > div {
        background: var(--paper);
        padding: 22px;
    }

body.bp-about section.alt .uses > div {
    background: var(--surface);
}

body.bp-about .uses h3 {
    font-size: 15.5px;
    font-weight: 650;
    margin-bottom: 7px;
}

body.bp-about .uses p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
}

/* ---------------------------------------------------------------- screenshots */

body.bp-about .shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 26px;
}

body.bp-about figure {
    margin: 0;
}

    body.bp-about figure img {
        width: 100%;
        border: 1px solid var(--line-2);
        background: var(--surface);
    }

body.bp-about figcaption {
    font-size: 14px;
    color: var(--ink-2);
    margin-top: 12px;
    line-height: 1.55;
}

body.bp-about .shot-ph {
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--line-3);
    background:
        repeating-linear-gradient( 45deg, transparent 0 9px, var(--surface-2) 9px 10px );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-4);
    text-align: center;
    padding: 20px;
}

    body.bp-about .shot-ph .k {
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--ink-3);
        background: var(--paper);
        padding: 4px 9px;
        border: 1px solid var(--line-2);
    }

    body.bp-about .shot-ph .m {
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

/* ---------------------------------------------------------------- CTA + footer */

body.bp-about .cta {
    background: var(--stage);
    color: var(--stage-ink);
    padding: 92px 0;
    text-align: center;
    border-top: 0;
    position: relative;
    overflow: hidden;
}

    body.bp-about .cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(700px 300px at 50% 0%, rgba(255, 26, 26, .18), transparent 65%);
        pointer-events: none;
    }

    body.bp-about .cta > .wrap {
        position: relative;
    }

    body.bp-about .cta h2 {
        font-size: clamp(30px, 4.4vw, 52px);
        font-weight: 800;
        letter-spacing: -.035em;
        margin: 0 auto 18px;
        max-width: 18ch;
    }

    body.bp-about .cta p {
        color: var(--stage-ink-2);
        font-size: 18px;
        max-width: 54ch;
        margin: 0 auto 32px;
    }

    body.bp-about .cta .btns {
        justify-content: center;
    }

    body.bp-about .cta .btn {
        background: transparent;
        color: var(--stage-ink);
        border-color: var(--stage-line);
    }

        body.bp-about .cta .btn:hover {
            border-color: var(--stage-ink-3);
            background: rgba(255, 255, 255, .05);
        }

        body.bp-about .cta .btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

body.bp-about footer {
    background: var(--stage-2);
    color: var(--stage-ink-3);
    padding: 26px 0;
    font-size: 13.5px;
}

    body.bp-about footer .wrap {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

/* ---------------------------------------------------------------- AI mode */

body.bp-about #mode-ai {
    display: none;
}

body.bp-about[data-mode="ai"] #mode-human {
    display: none;
}

body.bp-about[data-mode="ai"] #mode-ai {
    display: block;
}

body.bp-about .ai-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 48px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 52px 28px 88px;
    align-items: start;
}

body.bp-about .ai-toc {
    position: sticky;
    top: 84px;
    border-left: 1px solid var(--line);
    padding-left: 18px;
}

    body.bp-about .ai-toc .t {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-4);
        margin-bottom: 14px;
    }

    body.bp-about .ai-toc a {
        display: block;
        font-size: 13.5px;
        color: var(--ink-3);
        padding: 5px 0;
        border-left: 2px solid transparent;
        margin-left: -20px;
        padding-left: 18px;
        transition: color .15s, border-color .15s;
    }

        body.bp-about .ai-toc a:hover {
            color: var(--ink);
            border-left-color: var(--accent);
        }

body.bp-about .ai-doc {
    min-width: 0;
    max-width: 78ch;
}

body.bp-about .ai-head {
    border-bottom: 1px solid var(--line);
    padding-bottom: 26px;
    margin-bottom: 12px;
}

    body.bp-about .ai-head .k {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 14px;
    }

    body.bp-about .ai-head h1 {
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: 750;
        letter-spacing: -.03em;
        margin-bottom: 14px;
    }

    body.bp-about .ai-head p {
        color: var(--ink-2);
        font-size: 16.5px;
        margin: 0;
        max-width: 66ch;
    }

body.bp-about .ai-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
}

    body.bp-about .ai-tools button {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        padding: 8px 14px;
        border: 1px solid var(--line-2);
        background: var(--surface);
        color: var(--ink-2);
        cursor: pointer;
        transition: border-color .16s, color .16s;
    }

        body.bp-about .ai-tools button:hover {
            border-color: var(--line-3);
            color: var(--ink);
        }

        body.bp-about .ai-tools button.done {
            border-color: var(--accent);
            color: var(--accent);
        }

body.bp-about .ai-sec {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}

    body.bp-about .ai-sec > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 0;
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
    }

        body.bp-about .ai-sec > summary::-webkit-details-marker {
            display: none;
        }

        body.bp-about .ai-sec > summary .n {
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: .1em;
            min-width: 26px;
        }

        body.bp-about .ai-sec > summary .chev {
            margin-left: auto;
            width: 9px;
            height: 9px;
            border-right: 1.5px solid var(--ink-4);
            border-bottom: 1.5px solid var(--ink-4);
            transform: rotate(45deg);
            transition: transform .2s;
        }

    body.bp-about .ai-sec[open] > summary .chev {
        transform: rotate(-135deg);
    }

body.bp-about .ai-body {
    padding: 0 0 26px 38px;
}

    body.bp-about .ai-body > *:last-child {
        margin-bottom: 0;
    }

    body.bp-about .ai-body p {
        color: var(--ink-2);
        font-size: 16px;
        line-height: 1.68;
        margin: 0 0 16px;
    }

    body.bp-about .ai-body ul {
        margin: 0 0 18px;
        padding-left: 20px;
    }

    body.bp-about .ai-body li {
        color: var(--ink-2);
        font-size: 15.5px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

        body.bp-about .ai-body li::marker {
            color: var(--accent);
        }

    body.bp-about .ai-body li b {
        color: var(--ink);
        font-weight: 650;
    }

body.bp-about .ai-tablewrap {
    overflow-x: auto;
    margin: 0 0 20px;
    border: 1px solid var(--line);
}

body.bp-about .ai-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 440px;
}

body.bp-about .ai-body th,
body.bp-about .ai-body td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

body.bp-about .ai-body th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-4);
    font-weight: 650;
    background: var(--surface-2);
    white-space: nowrap;
}

body.bp-about .ai-body td {
    color: var(--ink-2);
}

    body.bp-about .ai-body td:first-child {
        color: var(--ink);
        font-weight: 600;
        white-space: nowrap;
    }

body.bp-about .ai-body tr:last-child td {
    border-bottom: 0;
}

body.bp-about .ai-pre {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.75;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 18px 20px;
    overflow-x: auto;
    margin: 0 0 20px;
    color: var(--ink-2);
    white-space: pre;
}

@media (max-width: 900px) {
    body.bp-about .ai-shell {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 34px 18px 64px;
    }

    body.bp-about .ai-toc {
        position: static;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 18px 0 0;
        order: 2;
    }

        body.bp-about .ai-toc a {
            margin-left: 0;
            padding-left: 10px;
        }

    body.bp-about .ai-body {
        padding-left: 0;
    }
}

/* ---------------------------------------------------------------- reveal + motion */

body.bp-about .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
}

    body.bp-about .reveal.in {
        opacity: 1;
        transform: none;
    }

@media (max-width: 620px) {
    /* Three language names plus the mode switch cannot share a row with the
       wordmark on a phone, so the wordmark takes its own line and the two
       controls sit below it. Wrapping rather than shrinking means this still
       holds together on a 320px screen. */
    body.bp-about .topbar-in {
        flex-wrap: wrap;
        height: auto;
        padding: 9px 18px;
        row-gap: 9px;
        column-gap: 10px;
    }

    body.bp-about .brand {
        width: 100%;
        font-size: 18px;
        margin-right: 0;
    }

    body.bp-about .modesw {
        margin-right: auto;
    }

        body.bp-about .modesw a {
            min-width: 50px;
            font-size: 12.5px;
        }

    body.bp-about .langsw a {
        padding: 5px 6px;
        font-size: 12px;
    }

    html:has(body.bp-about) {
        scroll-padding-top: 116px;
    }

    /* Four columns will not fit a phone, and the pane is absolutely positioned
       so it cannot simply scroll. The story the demo tells needs one original
       column and the added one, so the two in between step aside. */
    body.bp-about .fd-table th:nth-child(2),
    body.bp-about .fd-table td:nth-child(2),
    body.bp-about .fd-table th:nth-child(3),
    body.bp-about .fd-table td:nth-child(3) {
        display: none;
    }

    body.bp-about .fd-table th,
    body.bp-about .fd-table td {
        padding: 9px 8px;
    }

    body.bp-about .fd-row .lbl {
        min-width: 104px;
        font-size: 12.5px;
    }

    body.bp-about {
        font-size: 16px;
    }

    body.bp-about section {
        padding: 60px 0;
    }

    body.bp-about .wrap {
        padding: 0 18px;
    }

    body.bp-about .demo-body {
        padding: 20px;
    }

    body.bp-about .sintro {
        font-size: 16.5px;
        margin-bottom: 30px;
    }
}

/* Anything decorative stops moving when the reader has asked for less motion.
   The demos are built so their final frame is the informative one, so freezing
   them at the end leaves a diagram, a table and a finished flow on screen. */
@media (prefers-reduced-motion: reduce) {
    html:has(body.bp-about) {
        scroll-behavior: auto;
    }

    body.bp-about *,
    body.bp-about *::before,
    body.bp-about *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }

    body.bp-about .reveal {
        opacity: 1;
        transform: none;
    }

    body.bp-about .fd-pane {
        position: relative;
        opacity: 1 !important;
        transform: none !important;
    }

        body.bp-about .fd-pane.t {
            margin-top: 28px;
        }

    body.bp-about .bpx-token,
    body.bp-about .bpx-active,
    body.bp-about .bpx-received,
    body.bp-about .bpx-caret {
        display: none;
    }

    /* Belt and braces. These already rest visible, and the rules above land
       their animations on the end state — but stating it outright means no
       amount of animation weirdness can leave the diagrams blank. */
    body.bp-about .bpx-n,
    body.bp-about .bpx-card,
    body.bp-about .fd-row,
    body.bp-about .fd-add,
    body.bp-about .hub-n {
        opacity: 1;
    }

    body.bp-about .bpx-type-in {
        max-width: 60ch;
    }

    body.bp-about .bpx-flow,
    body.bp-about .hub-spoke {
        stroke-dashoffset: 0;
    }
}

/* ---------------------------------------------------------------- rounded theme */

/* The product's Metronic-based UI is soft-cornered, so the public page follows.
   Kept as one override block rather than scattered through the rules above, so
   the radius scale reads in one place and can be retuned in one place. */

body.bp-about {
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-pill: 999px;
}

body.bp-about .btn {
    border-radius: var(--r-sm);
}

body.bp-about .chips span {
    border-radius: var(--r-pill);
}

body.bp-about .modesw,
body.bp-about .modesw .thumb {
    border-radius: var(--r-pill);
}

body.bp-about .langsw a {
    border-radius: var(--r-sm);
}

body.bp-about .card,
body.bp-about .demo,
body.bp-about .audit,
body.bp-about .xt,
body.bp-about .points,
body.bp-about .pillars,
body.bp-about .uses,
body.bp-about .ai-tablewrap {
    border-radius: var(--r-md);
    overflow: hidden;
}

body.bp-about .hero-art .ha-panel {
    border-radius: var(--r-md);
}

body.bp-about .ha-grid u {
    border-radius: 5px;
}

body.bp-about .ha-row span,
body.bp-about .ha-row i {
    border-radius: var(--r-pill);
}

body.bp-about .fd-row,
body.bp-about .fd-add {
    border-radius: var(--r-sm);
}

body.bp-about .fd-table .ph {
    border-radius: var(--r-pill);
}

body.bp-about .audit-row .state,
body.bp-about .card .tag {
    border-radius: var(--r-pill);
}

body.bp-about .phone {
    border-radius: 26px;
}

body.bp-about .phone-screen {
    border-radius: 18px;
}

body.bp-about .phone-task {
    border-radius: var(--r-sm);
}

    body.bp-about .phone-task .tick {
        border-radius: 5px;
    }

body.bp-about .shot-ph,
body.bp-about .shots figure img {
    border-radius: var(--r-md);
}

/* A phone capture is far taller than the landscape screens beside it, so cap
   its height and centre it rather than letting one cell run away with the grid. */
body.bp-about .shots figure img {
    width: auto;
    max-width: 100%;
    /* Required now the tags carry width/height: without it, max-width clamping
       would keep the attribute's height and squash the picture. */
    height: auto;
    max-height: 520px;
    margin-left: auto;
    margin-right: auto;
}

body.bp-about .shot-ph .k {
    border-radius: 6px;
}

body.bp-about .ai-tools button {
    border-radius: var(--r-sm);
}

body.bp-about .ai-pre {
    border-radius: var(--r-sm);
}

body.bp-about .note {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* AI mode uses the page's own palette — same tokens as Human mode. It differs
   by density and structure, not by colour. */
body.bp-about .ai-term {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-4);
    margin-bottom: 22px;
}

    body.bp-about .ai-term b {
        color: var(--accent);
        font-weight: 500;
    }

body.bp-about .ai-code .cap {
    font-size: 14.5px;
    color: var(--ink-2);
    margin-bottom: 10px;
}

body.bp-about .ai-code pre {
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.7;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}

body.bp-about .ai-code .lang {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-4);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 2px 7px;
    margin-bottom: 7px;
}

/* ---------------------------------------------------------------- lightbox */

/* The modal always sits on a dark backdrop, so its chrome uses fixed dark-stage
   colours rather than theme tokens. */

body.bp-about .shot-link {
    display: block;
    cursor: zoom-in;
    border-radius: var(--r-md);
}

    body.bp-about .shot-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

body.bp-about .lb {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 34px 84px;
    background: rgba(8, 8, 10, .9);
    backdrop-filter: blur(10px);
}

    body.bp-about .lb.open {
        display: flex;
        animation: lb-in .22s ease;
    }

@keyframes lb-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* A column, so a tall phone capture and its description share the height rather
   than the caption being pushed off the bottom of the screen. */
body.bp-about .lb figure {
    margin: 0;
    max-width: min(1240px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

body.bp-about .lb-img {
    max-width: 100%;
    /* min-height:0 lets the image shrink inside the flex column instead of
       overflowing it; object-fit keeps the aspect while it does. */
    min-height: 0;
    flex: 0 1 auto;
    width: auto;
    object-fit: contain;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, .14);
    background: #101014;
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .9);
}

body.bp-about .lb figcaption {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #cfc9c4;
    font-size: 14.5px;
    max-width: 74ch;
    margin: 0 auto;
}

/* Same reasoning as .flow-shot img: the capture supplies its own frame, so the
   viewer clips to match rather than ringing it with a second one. */
body.bp-about .lb-img.is-phone {
    --shot-r: 12%;
    border: 0;
    background: none;
    border-radius: var(--shot-r) / calc(var(--shot-r) * var(--shot-ar, .45));
}

body.bp-about .lb-title {
    font-family: var(--display);
    font-size: 17px;
    line-height: 1.3;
    color: #f4f2f0;
}

    body.bp-about .lb-title[hidden] {
        display: none;
    }

body.bp-about .lb-cap {
    line-height: 1.6;
}

body.bp-about .lb-count {
    flex: none;
    color: #6f6b6b;
    font-size: 12px;
}

body.bp-about .lb-btn {
    position: absolute;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #f4f2f0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s, border-color .16s;
}

    body.bp-about .lb-btn:hover {
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .38);
    }

    body.bp-about .lb-btn:focus-visible {
        outline: 2px solid var(--go);
        outline-offset: 3px;
    }

body.bp-about .lb-close {
    top: 22px;
    right: 22px;
}

body.bp-about .lb-prev {
    left: 20px;
    top: 50%;
    margin-top: -23px;
}

body.bp-about .lb-next {
    right: 20px;
    top: 50%;
    margin-top: -23px;
}

@media (max-width: 640px) {
    body.bp-about .lb {
        padding: 20px 14px 84px;
    }

    body.bp-about .lb-prev,
    body.bp-about .lb-next {
        top: auto;
        bottom: 20px;
        margin-top: 0;
    }

    body.bp-about .lb-prev {
        left: calc(50% - 58px);
    }

    body.bp-about .lb-next {
        right: calc(50% - 58px);
    }

    body.bp-about .lb figcaption {
        font-size: 13px;
    }
}

/* ---------------------------------------------------------------- sticky rail */

/* Everything between the hero and the CTA sits beside a sticky nav column.
   The rail is hidden below 1080px, where the sections read fine on their own
   and a fixed column would eat the width the diagrams need. */

body.bp-about .railed {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    max-width: 1420px;
    margin: 0 auto;
}

body.bp-about .rail {
    border-right: 1px solid var(--line);
}

body.bp-about .rail-in {
    position: sticky;
    top: 62px;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    padding: 40px 22px 40px 28px;
}

body.bp-about .rail-group {
    margin-bottom: 26px;
}

body.bp-about .rail-t {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

body.bp-about .rail a {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink-3);
    padding: 6px 0 6px 12px;
    border-left: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

    body.bp-about .rail a:hover,
    body.bp-about .rail a.is-current {
        color: var(--ink);
        border-left-color: var(--accent);
    }

/* Sections inside the rail keep their padding but lose the outer centring,
   since the rail already offsets them. */
body.bp-about .railed-body section > .wrap {
    margin-left: 0;
    padding-left: 44px;
    padding-right: 44px;
    max-width: 1000px;
}

@media (max-width: 1080px) {
    body.bp-about .railed {
        grid-template-columns: 1fr;
    }

    body.bp-about .rail {
        display: none;
    }

    body.bp-about .railed-body section > .wrap {
        margin-left: auto;
        padding-left: 28px;
        padding-right: 28px;
        max-width: var(--wrap);
    }
}

@media (max-width: 620px) {
    body.bp-about .railed-body section > .wrap {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ---------------------------------------------------------------- architecture */

body.bp-about .arch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
}

body.bp-about .arch-layer {
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 18px 22px;
}

body.bp-about section.alt .arch-layer {
    background: var(--paper);
}

/* the tier a customer actually configures */
body.bp-about .arch-layer.is-yours {
    border-color: var(--accent);
    background: var(--accent-tint);
}

body.bp-about .arch-h {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

body.bp-about .arch-name {
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: -.015em;
}

body.bp-about .arch-note {
    font-size: 13.5px;
    color: var(--ink-3);
}

body.bp-about .arch-layer.is-yours .arch-note {
    color: var(--accent);
}

body.bp-about .arch-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    body.bp-about .arch-parts span {
        font-family: var(--mono);
        font-size: 12px;
        padding: 5px 11px;
        border-radius: var(--r-pill);
        border: 1px solid var(--line-2);
        color: var(--ink-2);
        background: var(--paper);
    }

body.bp-about section.alt .arch-parts span {
    background: var(--surface);
}

body.bp-about .arch-layer.is-yours .arch-parts span {
    border-color: var(--accent-ring);
    color: var(--ink);
}

/* ---------------------------------------------------------------- pen test */

body.bp-about .pentest {
    margin-top: 44px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 26px 28px 22px;
}

body.bp-about section.alt .pentest {
    background: var(--paper);
}

body.bp-about .pentest-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

    body.bp-about .pentest-h h3 {
        font-size: 19px;
        font-weight: 700;
    }

body.bp-about .shield svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--go);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

body.bp-about .pentest > p {
    color: var(--ink-2);
    font-size: 15.5px;
    max-width: 72ch;
}

body.bp-about table.spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin-top: 6px;
}

    body.bp-about table.spec th {
        text-align: left;
        font-weight: 600;
        color: var(--ink-3);
        padding: 11px 16px 11px 0;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
        width: 34%;
    }

    body.bp-about table.spec td {
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
    }

    body.bp-about table.spec tr:last-child th,
    body.bp-about table.spec tr:last-child td {
        border-bottom: 0;
    }

/* an unfilled placeholder should look unfilled, not like a value */
body.bp-about table.spec td.pending {
    color: var(--ink-4);
    font-style: italic;
}

/* ---------------------------------------------------------------- group tree */

body.bp-about .grp {
    margin-top: 40px;
    padding: 30px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

body.bp-about section.alt .grp {
    background: var(--paper);
}

body.bp-about .grp-top {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
    position: relative;
}

    body.bp-about .grp-top span {
        font-weight: 700;
        font-size: 14px;
        padding: 8px 20px;
        border-radius: var(--r-pill);
        background: var(--ink);
        color: var(--paper);
    }

    body.bp-about .grp-top::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 16px;
        background: var(--line-3);
    }

body.bp-about .grp-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

body.bp-about .grp-co {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 14px;
    background: var(--paper);
}

body.bp-about section.alt .grp-co {
    background: var(--surface);
}

body.bp-about .grp-co-h {
    display: block;
    height: 9px;
    border-radius: var(--r-pill);
    background: var(--accent);
    opacity: .7;
    margin-bottom: 12px;
    width: 62%;
}

body.bp-about .grp-br {
    display: flex;
    gap: 6px;
}

    body.bp-about .grp-br i {
        flex: 1;
        height: 26px;
        border-radius: 5px;
        border: 1px solid var(--line-2);
        background: var(--surface-2);
    }

@media (max-width: 620px) {
    body.bp-about .grp-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- routes */

body.bp-about .routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

body.bp-about .route {
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 24px;
}

body.bp-about section.alt .route {
    background: var(--paper);
}

body.bp-about .route-n {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
    margin-bottom: 12px;
}

body.bp-about .route h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

body.bp-about .route-lead {
    color: var(--ink-2);
    font-size: 15px;
    margin-bottom: 14px;
}

body.bp-about .route ul {
    margin: 0;
    padding-left: 18px;
}

body.bp-about .route li {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 7px;
}

    body.bp-about .route li::marker {
        color: var(--accent);
    }

/* ---------------------------------------------------------------- contact */

/* Sits inside the dark CTA band, so it uses the fixed stage colours rather
   than the theme tokens. */

body.bp-about .contact {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--stage-line);
}

    body.bp-about .contact h3 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        margin-bottom: 10px;
    }

body.bp-about .contact-intro {
    color: var(--stage-ink-2);
    font-size: 16px;
    max-width: 58ch;
    margin: 0 auto 30px;
}

body.bp-about .contact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 14px;
    text-align: left;
    max-width: 940px;
    margin: 0 auto;
}

body.bp-about .contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--stage-line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .035);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

    body.bp-about .contact-card:hover {
        border-color: var(--stage-ink-3);
        background: rgba(255, 255, 255, .07);
        transform: translateY(-2px);
    }

    /* the written-request route is the one we want people to take */
    body.bp-about .contact-card.is-primary {
        border-color: var(--accent);
        background: rgba(255, 26, 26, .10);
    }

        body.bp-about .contact-card.is-primary:hover {
            background: rgba(255, 26, 26, .16);
        }

body.bp-about .contact-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--stage-line);
}

    body.bp-about .contact-ic svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: var(--stage-ink);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

body.bp-about .contact-card.is-primary .contact-ic {
    background: var(--accent);
    border-color: var(--accent);
}

    body.bp-about .contact-card.is-primary .contact-ic svg {
        stroke: #fff;
    }

body.bp-about .contact-body {
    min-width: 0;
}

body.bp-about .contact-label {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stage-ink-3);
    margin-bottom: 6px;
}

body.bp-about .contact-value {
    display: block;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 650;
    color: var(--stage-ink);
    letter-spacing: -.01em;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

body.bp-about .contact-note {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--stage-ink-2);
}

@media (max-width: 620px) {
    body.bp-about .contact {
        margin-top: 40px;
        padding-top: 32px;
    }

    body.bp-about .contact-card {
        padding: 16px;
    }
}

/* ---------------------------------------------------------------- contact form */

/* Inside the dark CTA band, so fixed stage colours rather than theme tokens. */

body.bp-about .cform {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: left;
}

body.bp-about .cform-l {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stage-ink-3);
    margin-bottom: 8px;
}

body.bp-about .cform textarea,
body.bp-about .cform input[type="text"] {
    width: 100%;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--stage-ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--stage-line);
    border-radius: var(--r-sm);
    padding: 13px 15px;
    resize: vertical;
}

    body.bp-about .cform textarea::placeholder,
    body.bp-about .cform input[type="text"]::placeholder {
        color: var(--stage-ink-3);
    }

    body.bp-about .cform textarea:focus,
    body.bp-about .cform input[type="text"]:focus {
        outline: none;
        border-color: var(--accent);
        background: rgba(255, 255, 255, .08);
    }

body.bp-about .cform-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

    body.bp-about .cform-row input[type="text"] {
        flex: 1 1 220px;
        width: auto;
    }

body.bp-about .cform-ai {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--stage-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

    body.bp-about .cform-ai input {
        width: 17px;
        height: 17px;
        accent-color: var(--accent);
        cursor: pointer;
    }

body.bp-about .cform-note {
    font-size: 13px;
    color: var(--stage-ink-3);
    margin: 12px 0 0;
}

body.bp-about .cform-out {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--stage-ink-2);
}

    body.bp-about .cform-out:empty {
        display: none;
    }

    body.bp-about .cform-out.is-busy {
        color: var(--stage-ink-3);
    }

    body.bp-about .cform-out.is-ok {
        color: var(--go-on-dark);
    }

    body.bp-about .cform-out.is-warn {
        color: var(--accent-2);
    }

/* The AI answer is quoted back, so it reads as the assistant speaking rather
   than as page copy. */
body.bp-about .cform-reply {
    border-left: 2px solid var(--go-on-dark);
    padding: 2px 0 2px 16px;
    margin-bottom: 10px;
    color: var(--stage-ink);
    white-space: pre-wrap;
}

body.bp-about .cform-thanks {
    margin: 0;
    font-size: 13.5px;
    color: var(--stage-ink-3);
}

@media (max-width: 620px) {
    body.bp-about .cform-row {
        flex-direction: column;
        align-items: stretch;
    }

        body.bp-about .cform-row .btn {
            justify-content: center;
        }
}

/* ---------------------------------------------- register-to-ask gate (modal)

   Shown when a visitor ticks "answer with AI" and no answer comes back. It sits
   on the dark CTA stage like the rest of the contact block, so it uses the stage
   tokens rather than the page surface. */

body.bp-about.cgate-open {
    overflow: hidden;
}

body.bp-about .cgate {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    body.bp-about .cgate[hidden] {
        display: none;
    }

body.bp-about .cgate__scrim {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 13, .72);
}

body.bp-about .cgate__box {
    position: relative;
    width: min(480px, 100%);
    background: var(--stage-2);
    color: var(--stage-ink);
    border: 1px solid var(--stage-line);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 32px 80px -32px rgba(0, 0, 0, .85);
}

    body.bp-about .cgate__box h4 {
        font-family: var(--display);
        font-size: 21px;
        line-height: 1.25;
        margin: 0 0 10px;
        color: var(--stage-ink);
    }

    body.bp-about .cgate__box p {
        margin: 0 0 12px;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--stage-ink-2);
    }

body.bp-about .cgate__saved {
    padding-left: 14px;
    border-left: 2px solid var(--go-on-dark);
    color: var(--stage-ink-2);
}

body.bp-about .cgate__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

    /* The dismiss button is a plain button, not an anchor, so it needs the
       outline treatment spelled out against the dark box. */
    body.bp-about .cgate__acts .btn:not(.primary) {
        background: transparent;
        color: var(--stage-ink-2);
        border: 1px solid var(--stage-line);
    }

        body.bp-about .cgate__acts .btn:not(.primary):hover {
            color: var(--stage-ink);
            border-color: var(--stage-ink-3);
        }

@media (max-width: 480px) {
    body.bp-about .cgate__box {
        padding: 22px;
    }

    body.bp-about .cgate__acts .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------- back to top (floating)

   Matches the affordance in the signed-in app: bottom-right, appears once there
   is something to scroll back up, and stays clear of the contact modal (z-index
   below .cgate) so it cannot sit on top of a dialog. */

body.bp-about .bp-totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-2);
    box-shadow: var(--shadow);
    cursor: pointer;
    /* Resting state is hidden; .is-on is added by the scroll handler. Visibility
       is animated too, so the button cannot be tabbed to while invisible. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

    body.bp-about .bp-totop.is-on {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .18s ease, transform .18s ease, visibility 0s;
    }

    body.bp-about .bp-totop:hover {
        color: var(--ink);
        border-color: var(--line-3);
        transform: translateY(-2px);
    }

    body.bp-about .bp-totop:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 3px;
    }

    body.bp-about .bp-totop svg {
        width: 19px;
        height: 19px;
        display: block;
    }

@media (max-width: 620px) {
    body.bp-about .bp-totop {
        right: 14px;
        bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bp-about .bp-totop {
        transition: none;
    }
}

/* ------------------------------------------------------- mobile walkthrough (#devices)

   Nine numbered steps, each a phone screenshot beside the sentence that says what the
   person did there. The shots are portrait phone captures, so each one is capped and
   centred in its own column rather than being allowed to set the row height. */

body.bp-about .flow {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--line);
}

body.bp-about .flow-h {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    color: var(--ink);
}

body.bp-about .flow-intro {
    max-width: 62ch;
    margin: 0 0 44px;
    color: var(--ink-3);
    font-size: 15.5px;
    line-height: 1.65;
}

body.bp-about .flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 56px;
}

body.bp-about .flow-step {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 34px;
    align-items: center;
}

    /* Alternate the side the phone sits on, so nine rows do not read as a list. */
    body.bp-about .flow-step:nth-child(even) {
        grid-template-columns: 1fr 260px;
    }

        body.bp-about .flow-step:nth-child(even) .flow-shot {
            order: 2;
        }

/* Phone captures are normally exported with the device frame already drawn on,
   so this adds no frame of its own — a border plus a background behind a framed
   PNG is what produced the visible black corners and a double edge.

   The clip is expressed as a percentage pair rather than a pixel radius so it
   holds at every rendered width. --shot-r is the horizontal radius as a share of
   the image width; the vertical value is that same distance re-expressed against
   the height (× the width/height ratio), which is what keeps the corner circular
   instead of stretching it into an ellipse on a tall screenshot.

   --shot-ar comes from the tag, set from the file's real dimensions. --shot-r is
   only a fallback: bizpro-about.js measures each capture's actual corner and
   overrides it inline, so this value matters only with JavaScript off. 12% is a
   middle figure for device-framed phone exports (nine real captures here measure
   13.4%). */
body.bp-about .flow-shot img {
    --shot-r: 12%;
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    background: none;
    border-radius: var(--shot-r) / calc(var(--shot-r) * var(--shot-ar, .45));
    box-shadow: var(--shadow);
}

body.bp-about .flow-ph {
    aspect-ratio: 9 / 19.5;
    border-radius: 22px;
}

body.bp-about .flow-n {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--ink-4);
    margin-bottom: 8px;
}

body.bp-about .flow-say h4 {
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--ink);
}

body.bp-about .flow-say p {
    margin: 0;
    max-width: 56ch;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.7;
}

body.bp-about .flow-note {
    margin: 48px 0 0;
    padding-left: 16px;
    border-left: 2px solid var(--line-3);
    max-width: 74ch;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 860px) {
    body.bp-about .flow-steps {
        gap: 44px;
    }

    /* One column below the breakpoint, and the alternation is dropped with it —
       a phone above its own caption, every time. */
    body.bp-about .flow-step,
    body.bp-about .flow-step:nth-child(even) {
        grid-template-columns: minmax(0, 240px);
        justify-content: center;
        gap: 20px;
        text-align: center;
    }

        body.bp-about .flow-step:nth-child(even) .flow-shot {
            order: 0;
        }

    body.bp-about .flow-say p {
        max-width: none;
        text-align: left;
    }

    body.bp-about .flow-say h4 {
        text-align: left;
    }

    body.bp-about .flow-n {
        text-align: left;
    }
}