/* Proposed home page (v2). Scoped with a v2- prefix so nothing here can
   affect the live home page. Depends on landing.css for tokens, .container,
   .btn-primary and .btn-outline. */

/* ------------------------------------------------------------- actors --- */

/* The three actors are the three blocks of the Inistate mark, everywhere on the
   page: people the light blue, AI the dark blue, automation the green.

   The two blues are one hue at two lightnesses, so pale tints of them are
   indistinguishable — chips tried that and failed. Wherever colour identifies
   an actor it is the mark colour at full strength: chips, beams, pulses,
   swatches. Text sitting on a chip is a dark ink of the chip's own hue, at
   4.5:1 or better.

   Text on a plain light ground is the exception: the light blue and the green
   are under 2:1 on white, so it takes a darkened ink instead. The two blues
   converge on nearly the same ink there, which is why a lane label always has
   a swatch beside it. */
:root {
    --actor-people: #73CADE;
    --actor-ai: #2B9EC6;
    --actor-auto: #A4CE3A;

    --actor-people-ink: #237E93;
    --actor-ai-ink: #227E9E;
    --actor-auto-ink: #637E1F;

    --actor-people-chip: var(--actor-people);
    --actor-ai-chip: var(--actor-ai);
    --actor-auto-chip: var(--actor-auto);
    --actor-people-chip-ink: #16515F;
    --actor-ai-chip-ink: #0C2B36;
    --actor-auto-chip-ink: #405214;
}

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

.v2-hero {
    padding: 72px 0 56px;
    background: #ffffff;
    overflow: hidden;
}

.v2-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.v2-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 20px;
}

.v2-hero h1 {
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.08;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--default-text-color);
    margin: 0 0 20px;
}

.v2-hero h1 .accent {
    color: var(--color-brand-primary-700);
}

.v2-hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-color-primary);
    margin: 0 0 28px;
    max-width: 56ch;
}

.v2-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.v2-hero-fine {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin: 0;
}

/* ------------------------------------------------ hero demo (the record) --- */

/* A working depiction of the primitive rather than a screenshot: one record,
   its state, what it permits now, and who acted. Cheap to ship and always
   truthful, because it is built from the same vocabulary as the product. */

.v2-demo {
    background: #ffffff;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.v2-demo-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #eef2f6;
    background: #fbfcfd;
}

.v2-demo-id {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text-color-primary);
}

.v2-demo-title {
    font-size: 13px;
    color: var(--text-color-secondary);
}

.v2-demo-body {
    padding: 20px 18px 18px;
}

.v2-row-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
    margin: 0 0 10px;
}

.v2-states {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.v2-state {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid transparent;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.v2-state.is-done {
    background: #eef6f0;
    color: #4b8c63;
}

.v2-state.is-current {
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
    border-color: var(--background-base-brand);
}

.v2-state-arrow {
    color: #cbd5e1;
    font-size: 12px;
}

.v2-activities {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.v2-activity {
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid #d8e3ec;
    background: #fff;
    color: var(--default-text-color);
}

.v2-activity.is-blocked {
    color: #b8c4cf;
    border-style: dashed;
    background: #fafbfc;
}

.v2-history {
    border-top: 1px solid #eef2f6;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-event {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.v2-event.is-pending {
    opacity: 0;
    transform: translateY(6px);
}

.v2-actor {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--rounded-4);
    margin-top: 1px;
}

.v2-actor.person { background: var(--actor-people-chip); color: var(--actor-people-chip-ink); }
.v2-actor.ai { background: var(--actor-ai-chip); color: var(--actor-ai-chip-ink); }
.v2-actor.auto { background: var(--actor-auto-chip); color: var(--actor-auto-chip-ink); }

.v2-event-text { color: var(--text-color-primary); }
.v2-event-text strong { color: var(--default-text-color); font-weight: var(--font-weight-medium); }

.v2-event.is-pause .v2-event-text { color: #92400e; }
.v2-event.is-pause { background: #fffbeb; border-radius: 8px; padding: 8px 10px; margin: -2px -4px; }

@media (prefers-reduced-motion: reduce) {
    .v2-state, .v2-event { transition: none; }
    .v2-event.is-pending { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- qualify --- */

.v2-section {
    padding: 88px 0;
}

.v2-section.alt {
    background: #f8fafc;
}

.v2-section h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--default-text-color);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.v2-section-sub {
    text-align: center;
    color: var(--text-color-primary);
    font-size: 18px;
    line-height: 1.55;
    max-width: 64ch;
    margin: 0 auto 44px;
}

.v2-qualify-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px 28px;
    max-width: 920px;
    margin: 0 auto;
}

.v2-q {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--default-text-color);
}

.v2-q-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

.v2-verdict {
    max-width: 920px;
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.v2-verdict-card {
    padding: 22px 24px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.55;
}

.v2-verdict-card h3 {
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    margin: 0 0 8px;
}

.v2-verdict-card.yes {
    background: var(--system-brand-primary-100);
    color: var(--default-text-color);
}

.v2-verdict-card.yes h3 { color: var(--color-brand-primary-700); }

.v2-verdict-card.no {
    background: #fff;
    border: 1px solid #e4e9ef;
    color: var(--text-color-primary);
}

/* ----------------------------------------------------------- mechanism --- */

.v2-mech {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    max-width: 1040px;
    margin: 0 auto;
}

.v2-mech-step {
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 12px;
    padding: 24px 22px;
    position: relative;
}

.v2-mech-term {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-primary-700);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px;
}

.v2-mech-step h3 {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    margin: 0 0 8px;
    color: var(--default-text-color);
}

.v2-mech-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-color-primary);
}

.v2-mech-line {
    text-align: center;
    margin: 34px auto 0;
    font-size: 17px;
    color: var(--default-text-color);
}

.v2-mech-line code {
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
    padding: 4px 10px;
    border-radius: var(--rounded-4);
}

/* -------------------------------------------------------------- actors --- */

.v2-actors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto 36px;
}

.v2-actor-card {
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 12px;
    padding: 26px 24px;
    text-align: left;
}

/* The card is a flex column, which would stretch the chip to the full width. */
.v2-actor-card .v2-actor {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
}

.v2-actor-card h3 {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    margin: 0 0 8px;
    color: var(--default-text-color);
}

.v2-actor-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color-primary);
}

.v2-payoff {
    text-align: center;
    font-size: 22px;
    font-weight: var(--font-weight-medium);
    color: var(--default-text-color);
}

/* --------------------------------------------------------------- doors --- */

.v2-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.v2-door {
    display: block;
    padding: 34px 32px;
    border-radius: 14px;
    border: 1px solid #e4e9ef;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.v2-door:hover,
.v2-door:focus-visible {
    border-color: var(--background-base-brand);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.v2-door-who {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
    margin: 0 0 10px;
}

.v2-door h3 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    margin: 0 0 10px;
    color: var(--default-text-color);
}

.v2-door p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-color-primary);
}

.v2-door-cta {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--text-link-default);
}

.v2-door:hover .v2-door-cta { text-decoration: underline; }

/* --------------------------------------------------------------- proof --- */

.v2-proof-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.v2-proof-logos img { height: 32px; width: auto; opacity: 0.75; }

.v2-proof-quote {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.v2-proof-quote blockquote {
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 1.5;
    color: var(--default-text-color);
}

.v2-proof-quote cite {
    font-style: normal;
    font-size: 15px;
    color: var(--text-color-primary);
}

.v2-proof-quote cite strong { color: var(--default-text-color); font-weight: var(--font-weight-medium); }

.v2-proof-meta {
    display: flex;
    justify-content: center;
    gap: 14px 32px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-color-secondary);
}

.v2-proof-meta a { color: var(--text-link-default); text-decoration: none; }
.v2-proof-meta a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- cta --- */

.v2-cta {
    padding: 92px 0 96px;
    background: #0b1220;
    text-align: center;
}

.v2-cta-eyebrow {
    font-size: 14px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 14px;
}

.v2-cta h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.v2-cta-sub {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 auto 30px;
}

.v2-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.v2-cta-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.v2-cta-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.v2-cta-trust {
    display: flex;
    justify-content: center;
    gap: 10px 26px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------ responsive --- */

/* The hero picture needs about 470px of its own before the transition row starts
   wrapping its labels. .container is Tailwind's, which holds at 1024px until the
   viewport reaches 1280, so between 1024 and 1280 a two-column hero gives the
   picture only ~416px. One column until the container steps up. */
@media (max-width: 1279px) {
    .v2-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .v2-hero-sub { max-width: 58ch; }
}

@media (max-width: 768px) {
    .v2-hero { padding: 40px 0 40px; }
    .v2-section { padding: 56px 0; }
    .v2-section-sub { font-size: 16px; margin-bottom: 32px; text-align: left; }
    .v2-section h2 { text-align: left; font-size: 28px; }
    .v2-hero h1 { font-size: 32px; }
    .v2-hero-sub { font-size: 17px; }
    .v2-hero-actions .btn { width: 100%; text-align: center; }
    .v2-payoff { font-size: 19px; }
    .v2-proof-logos { gap: 28px; }
    .v2-proof-quote blockquote { font-size: 18px; }
}


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

/* Echoes the dark brand banner: a swept arc of light, three actor lanes, and a
   signal running down each lane into a single node. Every animation here moves
   only transform or opacity, so it stays on the compositor, and all of it is
   switched off under prefers-reduced-motion. */

.v2-eco {
    position: relative;
    padding: 96px 0 84px;
    background:
        radial-gradient(120% 90% at 12% 10%, rgba(43, 158, 198, 0.20), transparent 55%),
        radial-gradient(90% 80% at 88% 90%, rgba(15, 118, 160, 0.20), transparent 55%),
        #050b16;
    overflow: hidden;
    isolation: isolate;
}

/* The sweep from the brand banner: a wide ring, mostly off-canvas, drifting. */
.v2-eco::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 1500px;
    height: 1500px;
    left: -700px;
    top: -300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 58%,
        rgba(63, 184, 228, 0.22) 59.2%,
        rgba(63, 184, 228, 0.04) 60.6%,
        transparent 62%);
    animation: v2-drift 44s ease-in-out infinite alternate;
}

/* A second, tighter arc on the opposite corner for depth. */
.v2-eco::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 1100px;
    height: 1100px;
    right: -520px;
    bottom: -560px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 62%,
        rgba(164, 206, 58, 0.16) 63.2%,
        transparent 65%);
    animation: v2-drift 58s ease-in-out infinite alternate-reverse;
}

@keyframes v2-drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(46px, -34px, 0) rotate(8deg); }
}

.v2-eco .container { position: relative; z-index: 1; }

/* Keeps the headline off the brightest part of the sweep without hiding it. */
.v2-eco-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -40px;
    width: 900px;
    height: 260px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(5, 11, 22, 0.72), transparent 75%);
    pointer-events: none;
}

.v2-eco-head { position: relative; }

.v2-eco-head { text-align: center; margin-bottom: 54px; }

.v2-eco-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin: 0 0 14px;
}

.v2-eco h2 {
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px;
    letter-spacing: -0.015em;
    background: linear-gradient(96deg, #ffffff 30%, #9FD9EC 70%, #CFE9A6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v2-eco-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.58);
    max-width: 56ch;
    margin: 0 auto;
}

/* ---- lanes ---- */

.v2-eco-lanes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 940px;
    margin: 0 auto;
}

.v2-lane { text-align: center; }

.v2-lane-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    margin: 0 0 18px;
}

.v2-lane.people .v2-lane-label { color: var(--actor-people); }
.v2-lane.ai     .v2-lane-label { color: var(--actor-ai); }
.v2-lane.auto   .v2-lane-label { color: var(--actor-auto); }

.v2-tiles { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Light tiles rather than white-filtered logos: recolouring a third-party mark
   usually breaks its brand guidelines, and the filter destroyed the
   multi-colour ones outright. */
.v2-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 68px;
    height: 48px;
    padding: 0 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
    color: #0b1220;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s ease;
}

.v2-tile img { height: 17px; width: auto; }
.v2-tile svg { width: 18px; height: 18px; }

.v2-tile:hover,
.v2-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    color: #0b1220;
}

/* A hairline in the lane colour appears under the tile on hover. */
.v2-tile::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.v2-lane.people .v2-tile::after { background: var(--actor-people); }
.v2-lane.ai     .v2-tile::after { background: var(--actor-ai); }
.v2-lane.auto   .v2-tile::after { background: var(--actor-auto); }
.v2-tile:hover::after,
.v2-tile:focus-visible::after { opacity: 1; transform: scaleX(1); }

.v2-lane-note {
    margin: 16px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.v2-lane-note a {
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.v2-lane-note a:hover { color: #fff; }

/* ---- the converging signal ---- */

.v2-flow {
    display: block;
    width: 100%;
    max-width: 940px;
    height: auto;
    margin: 4px auto 0;
}

.v2-flow .track { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1.2; fill: none; }

/* pathLength normalises every curve to 100 units, so one dash pattern and one
   duration read identically on paths of different real length. */
.v2-flow .pulse {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 93;
    stroke-dashoffset: 100;
    animation: v2-pulse 3.8s cubic-bezier(.45,.05,.55,.95) infinite;
}

.v2-flow .pulse.p1 { stroke: var(--actor-people); animation-delay: 0s; }
.v2-flow .pulse.p2 { stroke: var(--actor-ai); animation-delay: 1.25s; }
.v2-flow .pulse.p3 { stroke: var(--actor-auto); animation-delay: 2.5s; }

@keyframes v2-pulse {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---- the node everything converges on ---- */

.v2-eco-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: 100%;
    margin: -6px auto 52px;
    padding: 18px 28px 16px;
    border-radius: 16px;
    background: rgba(10, 20, 36, 0.86);
    border: 1px solid rgba(63, 184, 228, 0.45);
}

.v2-core-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.v2-eco-core::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    animation: v2-breathe 4.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes v2-breathe {
    0%, 100% { box-shadow: 0 0 26px 0 rgba(63, 184, 228, 0.16); }
    50%      { box-shadow: 0 0 52px 6px rgba(63, 184, 228, 0.34); }
}

.v2-core-head img { height: 30px; width: auto; }
.v2-core-head span { color: #fff; font-size: 17px; font-weight: var(--font-weight-medium); }

.v2-core-head small {
    display: block;
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
    font-weight: var(--font-weight-light);
}

/* The contract inside the node: three chips, and a dashed return under them
   showing the landing state is where the next activity is read from. */
.v2-core-loop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(115, 202, 222, 0.75);
}

.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.v2-chip.state {
    background: rgba(115, 202, 222, 0.16);
    border: 1px solid rgba(115, 202, 222, 0.5);
    color: #9FDDEB;
}

.v2-chip.act {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.v2-chip.act small {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
}

.v2-chip-arrow {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
}

.v2-chip-return {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    width: calc(100% - 28px);
    height: 20px;
}

.v2-core-note {
    margin: -6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Interactive example: the selected actor shares one record and rule set. */
.v2-eco [hidden] { display: none !important; }
.v2-eco-instruction { margin: 20px 0 0; color: #b9dce9; font-size: 14px; }
.v2-lane.people { --actor-color: var(--actor-people); }
.v2-lane.ai { --actor-color: var(--actor-ai); }
.v2-lane.auto { --actor-color: var(--actor-auto); }
.v2-actor-choice {
    margin-top: 16px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid #526074;
    border-radius: 9px;
    background: #111d2e;
    color: #d6dfeb;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.v2-actor-choice span { margin-left: 8px; }
.v2-actor-choice:hover,
.v2-actor-choice[aria-pressed="true"] { border-color: var(--actor-color); color: var(--actor-color); background: #1a2a3c; }
.v2-actor-choice[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--actor-color); }
.v2-eco button:focus-visible,
.v2-eco input:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.v2-eco.is-interactive .v2-flow .pulse { display: none; }
.v2-eco[data-actor="people"] .v2-flow .p1,
.v2-eco[data-actor="ai"] .v2-flow .p2,
.v2-eco[data-actor="auto"] .v2-flow .p3 { display: block; animation-delay: 0s; }
.v2-eco[data-actor="people"] .v2-flow .track:nth-child(1) { stroke: var(--actor-people); }
.v2-eco[data-actor="ai"] .v2-flow .track:nth-child(2) { stroke: var(--actor-ai); }
.v2-eco[data-actor="auto"] .v2-flow .track:nth-child(3) { stroke: var(--actor-auto); }
.v2-eco.is-interactive .v2-eco-core { width: 760px; box-sizing: border-box; padding: 24px; }
.v2-eco.is-interactive .v2-eco-core::before { animation: none; box-shadow: 0 0 40px rgba(63, 184, 228, 0.12); }
.v2-eco-example { width: 100%; color: #c3cddd; font-size: 14px; line-height: 1.55; text-align: left; scroll-margin-top: 100px; }
.v2-eco-example .v2-eco-kicker { color: #9baec4; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 10px; }
.v2-eco-example h3 { color: #fff; font-size: 18px; line-height: 1.4; margin: 4px 0 0; }
.v2-eco-example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.v2-eco-example h4 { font-size: 16px; color: #fff; margin: 0 0 8px; line-height: 1.4; }
.v2-eco-checks { padding-left: 24px; border-left: 1px solid #2e3b4c; }
.v2-eco-checks ul { list-style: none; padding: 0; margin: 0; }
.v2-eco-checks li + li { margin-top: 16px; }
.v2-eco-checks strong { display: block; color: #edf3fb; font-weight: 600; margin-bottom: 3px; }
@media (max-width: 700px) {
    .v2-eco.is-interactive .v2-eco-core { padding: 20px 16px; }
    .v2-eco-example-grid { grid-template-columns: 1fr; gap: 22px; }
    .v2-eco-checks { border-left: 0; border-top: 1px solid #2e3b4c; padding: 18px 0 0; }
}

/* Shared workflow explorer: light in the hero, dark inside the ecosystem. */
.v2-workflow-demo {
    --demo-text: #20344b;
    --demo-muted: #586a7e;
    --demo-line: #dce5ed;
    --demo-surface: #f6f9fc;
    --demo-accent: #17627b;
    --demo-active: #e5f5fa;
    color: var(--demo-text);
    min-width: 0;
}
.v2-workflow-demo[data-workflow-demo="eco"] {
    --demo-text: #edf3fb;
    --demo-muted: #acbdd2;
    --demo-line: #3e536b;
    --demo-surface: #132338;
    --demo-accent: #9fddeb;
    --demo-active: #1b394a;
}
.v2-workflow-demo [hidden] { display: none !important; }
.v2-workflow-picker { padding: 18px; border-bottom: 1px solid var(--demo-line); }
.v2-workflow-options { display: flex; flex-wrap: wrap; gap: 7px; }
.v2-workflow-options button { padding: 8px 10px; min-height: 44px; border: 1px solid var(--demo-line); border-radius: 8px; background: transparent; color: var(--demo-muted); font: inherit; font-size: 12px; cursor: pointer; }
.v2-workflow-options button:hover { border-color: var(--demo-accent); color: var(--demo-accent); }
.v2-workflow-options button[aria-pressed="true"] { border-color: var(--demo-accent); background: var(--demo-active); color: var(--demo-accent); box-shadow: inset 0 -2px var(--demo-accent); }
.v2-workflow-demo button:focus-visible,
.v2-workflow-demo input:focus-visible { outline: 3px solid var(--demo-accent); outline-offset: 3px; }
.v2-workflow-content { padding: 20px 18px 14px; }
.v2-workflow-demo .v2-row-label { color: var(--demo-muted); font-size: 10px; line-height: 1.5; }
.v2-workflow-record { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.v2-workflow-record .v2-row-label { margin: 0 0 4px; }
.v2-workflow-demo h3 { color: var(--demo-text); font-size: 17px; line-height: 1.4; margin: 0; }
.v2-workflow-current { flex-shrink: 0; padding: 4px 10px; border: 1px solid var(--demo-line); border-radius: 20px; font-size: 11px; color: var(--demo-accent); background: var(--demo-active); }
.v2-workflow-current.is-complete { color: #236340; background: #e4f3e8; border-color: #69a47d; }
.v2-workflow-diagram { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.2fr) 14px minmax(0, 1fr); align-items: stretch; gap: 5px; margin: 0 0 16px; }
.v2-workflow-node { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 7px; border: 1px solid var(--demo-line); border-radius: 10px; background: var(--demo-surface); text-align: center; }
.v2-workflow-node small { color: var(--demo-muted); text-transform: uppercase; font-size: 9px; letter-spacing: 0.03em; }
.v2-workflow-node strong { font-size: 13px; line-height: 1.4; color: var(--demo-text); font-weight: 600; }
.v2-workflow-node.is-activity { border-style: dashed; }
.v2-workflow-node.is-current { background: var(--demo-active); border-color: var(--demo-accent); box-shadow: inset 0 -2px var(--demo-accent); }
.v2-workflow-arrow { align-self: center; color: var(--demo-accent); font-size: 16px; }
.v2-workflow-context { font-size: 13px; line-height: 1.6; color: var(--demo-muted); margin: 0 0 16px; }
.v2-workflow-evidence { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; color: var(--demo-text); font-size: 13px; line-height: 1.5; }
.v2-workflow-evidence input { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; accent-color: #2b9ec6; }
.v2-workflow-evidence small { display: block; font-size: 11px; color: var(--demo-muted); }
.v2-workflow-submit { width: 100%; min-height: 44px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--demo-accent); border-radius: 8px; background: var(--demo-active); color: var(--demo-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.v2-workflow-submit:hover { filter: brightness(0.95); }
.v2-workflow-submit:disabled { border-color: #69a47d; background: #e4f3e8; color: #236340; cursor: default; }
.v2-workflow-feedback { padding: 10px 12px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-surface); color: var(--demo-muted); margin: 14px 0 18px; font-size: 12px; line-height: 1.5; }
.v2-workflow-feedback[data-result="blocked"] { background: #fff5e5; color: #805216; border-color: #d7a15a; }
.v2-workflow-feedback[data-result="success"] { background: #e4f3e8; color: #236340; border-color: #69a47d; }
.v2-workflow-demo .v2-history { border-color: var(--demo-line); gap: 9px; padding-top: 12px; }
.v2-workflow-demo .v2-event-text { color: var(--demo-text); font-size: 12px; }
.v2-workflow-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--demo-line); margin-top: 16px; padding-top: 8px; }
.v2-workflow-footer p { margin: 0; color: var(--demo-muted); font-size: 10px; line-height: 1.5; }
.v2-workflow-footer button { flex-shrink: 0; min-height: 44px; background: none; border: 0; color: var(--demo-accent); font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v2-eco-example .v2-workflow-picker { padding: 16px 0; margin-top: 4px; border-top: 1px solid var(--demo-line); }
.v2-eco-example .v2-workflow-content { padding: 20px 0 0; }
.v2-eco-example [data-actor-description] { min-height: 64px; margin: 8px 0 16px; font-size: 13px; color: var(--demo-muted); }
.v2-eco-example .v2-workflow-evidence { padding: 12px; border: 1px solid var(--demo-line); border-radius: 8px; }
.v2-hero-visual { min-width: 0; }
@media (max-width: 700px) {
    .v2-eco-example [data-actor-description] { min-height: 0; }
    .v2-workflow-picker { padding: 14px; }
    .v2-workflow-content { padding: 16px 14px 12px; }
}
@media (max-width: 380px) {
    .v2-workflow-diagram { gap: 3px; grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1.2fr) 10px minmax(0, 1fr); }
    .v2-workflow-node { padding: 10px 3px; }
    .v2-workflow-node strong { font-size: 11px; overflow-wrap: anywhere; }
    .v2-workflow-node small { font-size: 8px; }
    .v2-workflow-arrow { font-size: 13px; }
}

/* ---- long tail ---- */

.v2-tail {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 36px;
    text-align: center;
}

.v2-tail-label { font-size: 14px; color: rgba(255, 255, 255, 0.48); margin: 0 0 20px; }

.v2-tail-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.v2-tail-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 88px;
    padding: 0 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.88);
    transition: transform 0.28s cubic-bezier(.2,.7,.3,1), background 0.28s ease;
}

.v2-tail-tile:hover { transform: translateY(-3px); background: #fff; }
.v2-tail-logos img { height: 16px; width: auto; }

.v2-tail-more { font-size: 15px; color: rgba(255, 255, 255, 0.68); margin: 0; }
.v2-tail-more a { color: #73CADE; text-decoration: none; }
.v2-tail-more a:hover { text-decoration: underline; }

/* ---- entrance ---- */

/* Gated on .js so the content is visible when scripting is off, blocked, or
   simply broken. The reveal is an enhancement, never a precondition for
   reading the section. */
.js .v2-eco [data-rise] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.v2-eco.is-in [data-rise] { opacity: 1; transform: none; }
.v2-eco.is-in [data-rise="1"] { transition-delay: 0.05s; }
.v2-eco.is-in [data-rise="2"] { transition-delay: 0.15s; }
.v2-eco.is-in [data-rise="3"] { transition-delay: 0.25s; }
.v2-eco.is-in [data-rise="4"] { transition-delay: 0.35s; }
.v2-eco.is-in [data-rise="5"] { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    .v2-eco::before,
    .v2-eco::after,
    .v2-eco-core::before,
    .v2-flow .pulse { animation: none; }
    .v2-flow .pulse { opacity: 0.85; stroke-dashoffset: 0; stroke-dasharray: none; }
    .v2-eco [data-rise] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
    .v2-eco { padding: 64px 0 56px; }
    .v2-eco-lanes { grid-template-columns: 1fr; gap: 34px; }
    .v2-flow { display: none; }
    .v2-eco-core { margin-top: 34px; }
}

/* -------------------------------------------- hero: proof line, interaction --- */

.v2-hero-proof {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-color-secondary);
}

.v2-row-hint {
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-link-default);
    font-weight: var(--font-weight-medium);
}

/* The permitted activities are buttons now. Blocked ones stay in the row so
   the visitor can see what the state does not allow, which is half the point. */
button.v2-activity {
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

button.v2-activity:not(:disabled):hover,
button.v2-activity:not(:disabled):focus-visible {
    background: var(--system-brand-primary-100);
    border-color: var(--background-base-brand);
    color: var(--color-brand-primary-700);
    transform: translateY(-1px);
}

button.v2-activity:disabled {
    cursor: not-allowed;
}

.v2-actor.you {
    background: #dff3f8;
    color: #1E6F8B;
}

.v2-event.is-new {
    animation: v2-row-in 0.45s cubic-bezier(.2,.7,.3,1);
}

@keyframes v2-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.v2-demo-foot {
    margin: 14px 0 0;
    text-align: right;
}

.v2-replay {
    font: inherit;
    font-size: 12px;
    color: var(--text-color-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-replay:hover { color: var(--color-brand-primary-700); }

.v2-demo-caption {
    margin: 14px 4px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color-secondary);
    text-align: center;
}

/* The secondary button is an in-page anchor now. Land it clear of the sticky
   header, and glide there unless the visitor has asked for no motion. */
#qualify { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-event.is-new { animation: none; }
}

/* On touch screens the activities are the hero's main interaction, so they get
   a thumb-sized target. Coarse pointer rather than a width breakpoint, because
   a small laptop is not a phone and a large tablet is. */
@media (pointer: coarse) {
    button.v2-activity {
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }
    .v2-activities { gap: 10px; }
}

@media (max-width: 420px) {
    .v2-core-loop { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    .v2-chip-return { display: none; }
}

/* ------------------------------------------------- mechanism: the diagram --- */

.v2-flow2 {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding-top: 54px;            /* room for the loop arc */
}

.v2-flow2-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.35fr) 96px minmax(0, 1fr);
    align-items: start;
    gap: 0;
}

.v2-node {
    position: relative;
    padding: 20px 20px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e4e9ef;
    text-align: left;
}

.v2-node strong {
    display: block;
    font-size: 19px;
    font-weight: var(--font-weight-medium);
    color: var(--default-text-color);
    margin: 4px 0 2px;
}

.v2-node em,
.v2-node-form em,
.v2-feed em,
.v2-out em {
    display: block;
    font-style: normal;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-color-secondary);
}

.v2-node-k {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary-700);
}

.v2-node.state {
    background: var(--system-brand-primary-100);
    border-color: rgba(43, 158, 198, 0.35);
}

.v2-node.state.next {
    border-color: var(--background-base-brand);
    box-shadow: 0 0 0 4px rgba(43, 158, 198, 0.12);
}

/* The activity is the gate: the only place a transition can happen, and the
   form sits inside it because the form is what the activity requires. */
.v2-node.act {
    border-color: var(--background-base-brand);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.v2-node-form {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.v2-node-form .v2-node-k { color: var(--text-color-primary); }

.v2-form-fields { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 6px; }

.v2-form-fields i {
    font-style: normal;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d8e3ec;
    color: var(--default-text-color);
}

.v2-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 30px;
    color: var(--background-base-brand);
}

.v2-arrow svg { width: 56px; height: 22px; }

.v2-arrow span {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
    white-space: nowrap;
}

/* The loop: from the landing state back to the start. */
.v2-loop {
    position: absolute;
    top: 8px;
    left: 12%;
    right: 12%;
    height: 44px;
    border: 1.5px dashed rgba(43, 158, 198, 0.6);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
}

.v2-loop::before {
    /* arrowhead pointing down onto the first state */
    content: "";
    position: absolute;
    left: -6px;
    bottom: -2px;
    border: 5px solid transparent;
    border-top: 8px solid var(--background-base-brand);
}

.v2-loop span {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
    background: #f8fafc;
    font-size: 12px;
    color: var(--color-brand-primary-700);
    white-space: nowrap;
}

.v2-flow2-under {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.v2-feed, .v2-out {
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e4e9ef;
}

.v2-feed .v2-node-k, .v2-out .v2-node-k { color: var(--text-color-primary); margin-bottom: 8px; }

.v2-feed-actors { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.v2-out code {
    display: block;
    font-family: inherit;
    font-size: 13px;
    color: var(--default-text-color);
    background: #f8fafc;
    border: 1px solid #e4e9ef;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .v2-flow2 { padding-top: 0; }
    .v2-loop { display: none; }
    .v2-flow2-row { grid-template-columns: 1fr; gap: 0; }
    .v2-arrow { padding: 10px 0; flex-direction: row; justify-content: center; gap: 10px; }
    .v2-arrow svg { transform: rotate(90deg); width: 26px; height: 26px; }
    .v2-flow2-under { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ hero: the stage --- */

/* A self-running picture of the primitive, with no controls on it: the
   ecosystem band below is where a visitor gets to drive the same thing, and two
   interactive demos on one page compete rather than compound.

   Everything runs off one 9s clock. A shared v2-stage-dash keyframe draws every
   travelling signal, and each signal is placed in the cycle by its
   animation-delay rather than by its own keyframes, so the sequence can be
   retimed from the delays alone. Only transform, opacity and stroke-dashoffset
   animate, and all of it stops under prefers-reduced-motion. */

.v2-stage {
    --stage-people: var(--actor-people);
    --stage-ai: var(--actor-ai);
    --stage-auto: var(--actor-auto);
    --stage-line: #e6ecf2;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 20px 24px 18px;
    border-radius: 18px;
    /* A hairline in the three actor colours, faint enough to read as one edge
       rather than three. The white fill is the padding-box layer under it. */
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(118deg, rgba(115, 202, 223, 0.34), rgba(43, 158, 198, 0.26) 48%, rgba(164, 206, 58, 0.30)) border-box;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

/* A soft brand light behind the gate, drifting slowly, so the card has depth
   without anything decorative reading as a control. */
.v2-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 34%;
    width: 620px;
    height: 620px;
    margin: -310px 0 0 -310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 158, 198, 0.13), rgba(164, 206, 58, 0.07) 42%, transparent 62%);
    animation: v2-stage-drift 26s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes v2-stage-drift {
    from { transform: translate3d(-26px, -10px, 0) scale(0.94); }
    to   { transform: translate3d(26px, 14px, 0) scale(1.06); }
}

/* ---- the record ---- */

.v2-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--stage-line);
}

.v2-stage-kicker {
    margin: 0 0 3px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.v2-stage h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: var(--font-weight-medium);
    color: var(--default-text-color);
}

/* Both labels occupy one grid cell, so the pill never resizes the header as it
   flips from the state it was in to the state it landed in. */
.v2-stage-pill {
    display: grid;
    flex-shrink: 0;
}

.v2-stage-pill b {
    grid-area: 1 / 1;
    place-self: center end;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    animation: v2-stage-flip 9s linear infinite;
}

.v2-stage-pill .is-from {
    background: var(--system-brand-primary-100);
    border: 1px solid rgba(43, 158, 198, 0.45);
    color: var(--color-brand-primary-700);
}

.v2-stage-pill .is-to {
    background: #e4f3e8;
    border: 1px solid #69a47d;
    color: #236340;
    opacity: 0;
    animation-name: v2-stage-flip-in;
}

/* ---- who acts, and from where ---- */

/* Explicit rows rather than three self-contained lanes, so the labels stay on
   one line and the notes on another even when a lane's tiles wrap. The tiles
   hang from the bottom of their row, which is where the beams are drawn from. */
.v2-stage-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-items: end;
    column-gap: 10px;
    margin-top: 16px;
}

.v2-stage-lane { display: contents; }
.v2-stage-lane-k { grid-row: 1; }
.v2-stage-tiles { grid-row: 2; }
.v2-stage-note { grid-row: 3; }
.v2-stage-lane.people > * { grid-column: 1; }
.v2-stage-lane.ai > *     { grid-column: 2; }
.v2-stage-lane.auto > *   { grid-column: 3; }

/* The named marks are the ones a visitor recognises; the note is what says they
   are examples rather than the list. */
.v2-stage-note {
    margin: 6px 0 0;
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-color-secondary);
}

.v2-stage-lane-k {
    margin: 0 0 7px;
    text-align: center;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.v2-stage-lane.people .v2-stage-lane-k { color: var(--actor-people-ink); --swatch: var(--actor-people); }
.v2-stage-lane.ai     .v2-stage-lane-k { color: var(--actor-ai-ink); --swatch: var(--actor-ai); }
.v2-stage-lane.auto   .v2-stage-lane-k { color: var(--actor-auto-ink); --swatch: var(--actor-auto); }

/* The swatch is what tells the two blues apart: their inks are near identical. */
.v2-stage-lane-k::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 5px 1px 0;
    border-radius: 2px;
    background: var(--swatch);
    vertical-align: middle;
}

/* The tiles lift as their lane fires, which is the only reason they move. */
.v2-stage-tiles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    animation: v2-stage-lift 9s cubic-bezier(.2,.7,.3,1) infinite;
}

.v2-stage-lane.people .v2-stage-tiles { animation-delay: 0.45s; }
.v2-stage-lane.ai     .v2-stage-tiles { animation-delay: 0.70s; }
.v2-stage-lane.auto   .v2-stage-tiles { animation-delay: 0.95s; }

/* Marks sit on a light tile rather than being recoloured, the same call the
   ecosystem band makes. */
.v2-stage-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--stage-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: #0b1220;
    white-space: nowrap;
}

/* Fluid, because the widest lane carries three wordmarks and the hero column is
   at its narrowest just before the layout goes to one column. */
.v2-stage-tile img { height: clamp(8px, 0.78vw, 11px); width: auto; }
.v2-stage-tile svg { width: 13px; height: 13px; color: #334155; }

/* ---- the converging signal ---- */

.v2-stage-feed-wrap {
    position: relative;
    margin-top: 2px;
}

/* Faded at the top so the beams read as coming from the lanes without having to
   land on a tile edge exactly, whatever the tiles wrap to. */
.v2-stage-feed {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%);
    mask-image: linear-gradient(to bottom, transparent, #000 38%);
}

/* Same coordinate space as the feed, laid over it, but outside the fade so the
   arrow head stays solid where it meets the automation lane. */
.v2-stage-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.v2-stage-trigger .rail {
    stroke: rgba(164, 206, 58, 0.45);
    stroke-dasharray: 4 5;
}

.v2-stage-trigger .head {
    fill: none;
    stroke: var(--stage-auto);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v2-stage-trigger-k {
    position: absolute;
    right: 14%;
    bottom: 0;
    max-width: 20%;
    text-align: right;
    font-size: 9.5px;
    line-height: 1.25;
    color: var(--actor-auto-ink);
}

.v2-stage .rail {
    fill: none;
    stroke: #dde5ee;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* pathLength normalises every path to 100 units, so one dash pattern and one
   duration read identically on paths of different real length. */
.v2-stage .beam {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 13 87;
    stroke-dashoffset: 100;
    opacity: 0;
    animation: v2-stage-dash 9s cubic-bezier(.45,.05,.55,.95) infinite;
}

.v2-stage .beam.b1 { stroke: var(--stage-people); animation-delay: 0.45s; }
.v2-stage .beam.b2 { stroke: var(--stage-ai);     animation-delay: 0.70s; }
.v2-stage .beam.b3 { stroke: var(--stage-auto);   animation-delay: 0.95s; }
.v2-stage .beam.l1 { stroke: var(--background-base-brand); animation-delay: 0.80s; }
.v2-stage .beam.l2 { stroke: var(--background-base-brand); animation-delay: 3.10s; }
.v2-stage .beam.t1 { stroke: var(--stage-auto);            animation-delay: 5.20s; }
.v2-stage .beam.r1 { stroke: var(--background-base-brand); animation-delay: 6.50s; }

/* ---- State to Activity (Form) to State ---- */

.v2-stage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.35fr) 34px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 2px;
}

.v2-stage-node {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid var(--stage-line);
    background: #ffffff;
    text-align: center;
}

.v2-stage-node > * { position: relative; z-index: 1; }

/* The lit skin is a separate layer, so becoming current is an opacity change
   rather than a repaint of borders and shadows on every frame. */
.v2-stage-node::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    border-radius: 13px;
    opacity: 0;
}

.v2-stage-node.is-state::after {
    background: var(--system-brand-primary-100);
    border: 1px solid var(--background-base-brand);
    box-shadow: 0 0 0 4px rgba(43, 158, 198, 0.12);
    opacity: 1;
    animation: v2-stage-leave 9s linear infinite;
}

.v2-stage-node.is-next::after {
    background: #e4f3e8;
    border-color: #69a47d;
    box-shadow: 0 0 0 4px rgba(105, 164, 125, 0.14);
    opacity: 0;
    animation-name: v2-stage-land;
}

.v2-stage-node.is-gate::after {
    background: #ffffff;
    border: 1px solid var(--background-base-brand);
    box-shadow: 0 12px 28px rgba(43, 158, 198, 0.20);
    animation: v2-stage-gate 9s linear infinite;
}

.v2-stage-k {
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-primary-700);
}

.v2-stage-node strong {
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--default-text-color);
}

/* The form sits inside the activity because the form is what the activity
   requires: nothing moves until it validates. */
.v2-stage-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 7px auto 0;
    padding: 4px 8px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    font-size: 10.5px;
    line-height: 1.3;
    color: #475569;
}

.v2-stage-check { width: 13px; height: 13px; flex-shrink: 0; }
.v2-stage-check rect { fill: none; stroke: #cbd5e1; stroke-width: 1.2; }

.v2-stage-check .tick {
    fill: none;
    stroke: var(--background-base-brand);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    opacity: 0;
    animation: v2-stage-tick 9s cubic-bezier(.2,.7,.3,1) infinite;
}

.v2-stage-link { align-self: center; }
.v2-stage-link svg { display: block; width: 100%; height: auto; }
.v2-stage-link .rail { stroke: #cbd5e1; stroke-width: 1.4; }

/* ---- the return ---- */

.v2-stage-return {
    position: relative;
    margin-top: 4px;
}

.v2-stage-return svg { display: block; width: 100%; height: auto; }

.v2-stage-return .rail {
    stroke: rgba(43, 158, 198, 0.45);
    stroke-dasharray: 4 5;
}

.v2-stage-return .head {
    fill: none;
    stroke: var(--background-base-brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v2-stage-return span {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    padding: 0 8px;
    background: #ffffff;
    font-size: 10.5px;
    color: var(--color-brand-primary-700);
    white-space: nowrap;
}

/* ---- what lands on the history ---- */

/* The strip stays put and the lines inside it change, so the card never holds a
   blank band waiting for the transition to happen. */
.v2-stage-out {
    display: grid;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--stage-line);
}

.v2-stage-line {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
}

.v2-stage-line.is-before {
    color: var(--text-color-secondary);
    animation: v2-stage-unwrite 9s cubic-bezier(.2,.7,.3,1) infinite;
}

.v2-stage-line.is-after {
    opacity: 0;
    animation: v2-stage-write 9s cubic-bezier(.2,.7,.3,1) infinite;
}

.v2-stage-out b {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: var(--rounded-4);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v2-stage-out .person { background: var(--actor-people-chip); color: var(--actor-people-chip-ink); }
.v2-stage-out .ai     { background: var(--actor-ai-chip); color: var(--actor-ai-chip-ink); }
.v2-stage-out .auto   { background: var(--actor-auto-chip); color: var(--actor-auto-chip-ink); }

/* The credit rotates every cycle: the same activity, the same form and the same
   transition, whoever performed it. */
.v2-stage-credit {
    display: grid;
    flex-shrink: 0;
}

.v2-stage-credit b {
    grid-area: 1 / 1;
    place-self: center start;
    opacity: 0;
    animation: v2-stage-credit 27s steps(1, end) infinite;
}

.v2-stage-credit .person { animation-delay: 0s; }
.v2-stage-credit .ai     { animation-delay: 9s; }
.v2-stage-credit .auto   { animation-delay: 18s; }

.v2-stage-out code {
    font-family: inherit;
    color: var(--default-text-color);
    overflow-wrap: anywhere;
}

/* ---- the clock ---- */

/* One travelling signal, placed in the cycle by animation-delay. 20% of 9s is
   the 1.8s it takes to cross a path; the rest of the cycle it is not there. */
@keyframes v2-stage-dash {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    4%   { opacity: 1; }
    16%  { opacity: 1; }
    20%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* 0.45-2.75s  the three lanes fire, and the record arrives from its state
   2.20-2.80s  the activity opens
   2.60-3.15s  the form validates
   3.10-4.90s  the transition runs
   4.50-5.20s  the record lands, and the pill flips
   5.00-5.80s  the line is written to the history
   5.20-7.00s  the state it landed in triggers an automation
   6.50-8.30s  the return: the next activity is read from where it landed
   8.10-8.70s  the example resets, and the next workflow is swapped in */

@keyframes v2-stage-gate {
    0%, 24%   { opacity: 0; }
    31%, 90%  { opacity: 1; }
    96%, 100% { opacity: 0; }
}

@keyframes v2-stage-tick {
    0%, 29%   { stroke-dashoffset: 12; opacity: 0; }
    30%       { opacity: 1; }
    35%, 90%  { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 12; opacity: 0; }
}

@keyframes v2-stage-leave {
    0%, 50%   { opacity: 1; }
    57%, 92%  { opacity: 0; }
    97%, 100% { opacity: 1; }
}

@keyframes v2-stage-land {
    0%, 50%   { opacity: 0; }
    57%, 92%  { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes v2-stage-flip {
    0%, 52%   { opacity: 1; }
    58%, 92%  { opacity: 0; }
    97%, 100% { opacity: 1; }
}

@keyframes v2-stage-flip-in {
    0%, 52%   { opacity: 0; }
    58%, 92%  { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes v2-stage-write {
    0%, 56%   { opacity: 0; transform: translateY(6px); }
    64%, 90%  { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes v2-stage-unwrite {
    0%, 54%   { opacity: 1; transform: none; }
    62%, 90%  { opacity: 0; transform: translateY(-6px); }
    96%, 100% { opacity: 1; transform: none; }
}

@keyframes v2-stage-lift {
    0%, 1%    { transform: none; }
    4%        { transform: translateY(-4px); }
    12%, 100% { transform: none; }
}

@keyframes v2-stage-credit {
    0%, 32.5%   { opacity: 1; }
    33.4%, 100% { opacity: 0; }
}

/* ---- smaller screens ---- */

@media (max-width: 1279px) {
    /* The hero is a single column here, so the stage has the whole container. */
    .v2-stage { max-width: 760px; margin: 0 auto; }
}

@media (max-width: 560px) {
    .v2-stage { padding: 16px 14px 14px; }
    .v2-stage h3 { font-size: 15px; }
    .v2-stage-trigger-k { display: none; }
    .v2-stage-rail { column-gap: 6px; }
    .v2-stage-note { font-size: 9px; }
    .v2-stage-tile { height: 25px; padding: 0 5px; font-size: 10px; gap: 4px; }
    .v2-stage-tile img { height: 9px; }
    .v2-stage-row { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.3fr) 20px minmax(0, 1fr); }
    .v2-stage-node { padding: 10px 5px; }
    .v2-stage-node strong { font-size: 11.5px; overflow-wrap: anywhere; }
    .v2-stage-form { font-size: 9.5px; padding: 3px 6px; gap: 4px; }
    .v2-stage-check { width: 11px; height: 11px; }
    .v2-stage-return span { font-size: 9.5px; }
    .v2-stage-out { gap: 7px; padding: 8px 9px; }
    .v2-stage-out code { font-size: 10.5px; }
}

/* The same picture without the motion: the record has landed, the form
   validated, and the line is on the history. */
/* Each selector here has to match the specificity of the rule that started the
   animation, or the running animation keeps winning the cascade over the
   resting values below it. */
@media (prefers-reduced-motion: reduce) {
    .v2-stage::before,
    .v2-stage-tiles,
    .v2-stage .beam,
    .v2-stage-node.is-state::after,
    .v2-stage-node.is-next::after,
    .v2-stage-node.is-gate::after,
    .v2-stage-check .tick,
    .v2-stage-pill b,
    .v2-stage-line.is-before,
    .v2-stage-line.is-after,
    .v2-stage-credit b { animation: none; }
    .v2-stage .beam { opacity: 0.85; stroke-dasharray: none; stroke-dashoffset: 0; }
    .v2-stage-node.is-state::after { opacity: 0; }
    .v2-stage-node.is-next::after,
    .v2-stage-node.is-gate::after { opacity: 1; }
    .v2-stage-check .tick { opacity: 1; stroke-dashoffset: 0; }
    .v2-stage-pill .is-from { opacity: 0; }
    .v2-stage-pill .is-to { opacity: 1; }
    .v2-stage-line.is-before { opacity: 0; }
    .v2-stage-line.is-after { opacity: 1; transform: none; }
    .v2-stage-credit .person { opacity: 1; }
}

/* ------------------------------------------------------- the channels --- */

/* Each actor works somewhere different. The cards say what each is good for and
   name its channel; the panel under them shows that channel, on the same record
   every time. The line under the panel never changes, which is the point of the
   whole section: the channel changes, the record and the rule do not.

   home-v2-channels.js promotes the cards to a tablist. Without it, the three
   channels stack (see the noscript block in the page) and nothing is lost. */

/* Column layout so the channel cue sits on the bottom edge of every card,
   whatever the description above it runs to. */
.v2-actor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.v2-actor-card:hover { border-color: #cbd8e3; transform: translateY(-2px); }
.v2-actor-card:focus-visible { outline: 3px solid var(--background-base-brand); outline-offset: 3px; }

/* The selected card points at the panel below it. */
.v2-actor-card.is-on { border-color: var(--background-base-brand); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
.v2-actor-card.is-on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform: rotate(45deg);
    background: #fbfcfe;
    border: 1px solid var(--background-base-brand);
    border-width: 0 1px 1px 0;
}

.v2-actor-cue {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
    font-size: 13px;
    color: var(--text-color-secondary);
}

.v2-actor-card.is-on .v2-actor-cue { color: var(--color-brand-primary-700); }

/* ---- the panel ---- */

/* All three occupy one grid cell, so the section is as tall as the tallest
   channel and switching never moves the page. */
.v2-channels {
    display: grid;
    max-width: 1040px;
    margin: 0 auto;
}

/* All three share one cell, so the box is as tall as the longest channel and the
   shorter ones centre in it rather than sitting against the top. */
.v2-channel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 24px 20px;
    border-radius: 18px;
    background: #fbfcfe;
    border: 1px solid #e6ecf2;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.v2-channel.is-on { visibility: visible; opacity: 1; }

.v2-channel-k {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text-color-primary);
}

.v2-channel-k .v2-actor { margin: 0; }

.v2-channel-note {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color-secondary);
    text-align: center;
}

.v2-channel-same {
    max-width: 1040px;
    margin: 18px auto 34px;
    text-align: center;
    font-size: 15px;
    color: var(--text-color-primary);
}

.v2-channel-same strong { font-weight: var(--font-weight-medium); color: var(--default-text-color); }

/* ---- people: the product on the two surfaces a person uses ---- */

/* Explicit width: everything inside is absolutely positioned, so as a flex item
   this box would otherwise shrink-to-fit to nothing and take the devices with
   it. */
.v2-devices {
    position: relative;
    height: 382px;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    flex-shrink: 0;
}

/* The soft field behind the devices, so they do not float on a flat panel. */
.v2-devices::before {
    content: "";
    position: absolute;
    left: 4%;
    top: 6%;
    width: 76%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 158, 198, 0.16), rgba(164, 206, 58, 0.10) 45%, transparent 68%);
}

.v2-devices img { position: absolute; width: auto; }
.v2-device-laptop { height: 250px; left: 0; bottom: 48px; z-index: 1; }
.v2-device-phone { height: 362px; right: 2%; bottom: 10px; z-index: 2; }

/* ---- ai: the agent's own client ---- */

.v2-chat, .v2-canvas {
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
}

.v2-chat-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6ecf2;
}

.v2-chat-bar em {
    font-style: normal;
    font-size: 12px;
    color: var(--text-color-secondary);
}

/* The hero's tile, one size up: these sit on a panel rather than in a rail. */
.v2-chat-bar .v2-stage-tile { height: 32px; padding: 0 9px; }
.v2-chat-bar .v2-stage-tile img { height: 13px; }

.v2-chat-msg {
    max-width: 82%;
    margin: 0;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
}

.v2-chat-msg.is-you {
    margin-left: auto;
    border-bottom-right-radius: 4px;
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
}

.v2-chat-msg.is-ai {
    border-bottom-left-radius: 4px;
    background: #fff;
    border: 1px solid #e6ecf2;
    color: var(--text-color-primary);
}

.v2-chat-msg + .v2-chat-msg { margin-top: 10px; }

/* A read is still a tool call; it just does not need the whole card. */
.v2-chat-tool {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--color-brand-primary-700);
}

/* The call is the point of the panel: not a private API, the same activity. */
.v2-chat-call {
    max-width: 82%;
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d8e3ec;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.v2-chat-call-k {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary-700);
}

.v2-chat-call code {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--default-text-color);
}

.v2-chat-call dl { margin: 0; display: grid; gap: 5px; }
.v2-chat-call dl > div { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }

.v2-chat-call dt {
    flex: 0 0 66px;
    color: var(--text-color-secondary);
    font-size: 12px;
}

.v2-chat-call dd { margin: 0; color: var(--default-text-color); }
.v2-chat-ok { color: #2f7d4f; font-weight: var(--font-weight-bold); }

/* ---- automation: the canvas they already build on ---- */

.v2-canvas-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.25fr) 40px minmax(0, 1fr);
    align-items: center;
    margin-top: 4px;
}

.v2-canvas-node {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 14px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e6ecf2;
    text-align: left;
}

.v2-canvas-node.is-inistate {
    border-color: var(--background-base-brand);
    box-shadow: 0 10px 26px rgba(43, 158, 198, 0.16);
}

.v2-canvas-k {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--text-color-secondary);
}

.v2-canvas-node.is-inistate .v2-canvas-k { color: var(--color-brand-primary-700); }

.v2-canvas-node strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--default-text-color);
}

.v2-canvas-form {
    margin: 7px 0 5px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    font-size: 11.5px;
    color: #475569;
}

.v2-canvas-node small { font-size: 11.5px; color: var(--text-color-secondary); }

.v2-canvas-arrow { display: block; color: #b6c4d2; }
.v2-canvas-arrow svg { display: block; width: 100%; height: auto; }

/* ---- smaller screens ---- */

@media (max-width: 860px) {
    .v2-actor-card.is-on::after { display: none; }
    .v2-devices { height: 300px; }
    .v2-device-laptop { height: 186px; bottom: 40px; }
    .v2-device-phone { height: 272px; bottom: 8px; }
    .v2-chat-msg, .v2-chat-call { max-width: 100%; }
    .v2-canvas-row { grid-template-columns: 1fr; }
    .v2-canvas-arrow { justify-self: center; width: 26px; padding: 8px 0; transform: rotate(90deg); }
}

@media (max-width: 560px) {
    .v2-channel { padding: 16px 14px 14px; }
    .v2-devices { height: 232px; }
    .v2-device-laptop { height: 140px; bottom: 34px; }
    .v2-device-phone { height: 205px; bottom: 6px; right: 0; }
    .v2-chat-msg { font-size: 13px; }
    .v2-channel-note, .v2-channel-same { font-size: 13px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-actor-card, .v2-channel { transition: none; }
}

/* ---- automation panel: both directions ---- */

/* Sits directly under .v2-channel-k, which carries the 18px gap for the pair. */
.v2-channel-sub {
    margin: -13px 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color-secondary);
}

.v2-canvas { max-width: 840px; }

.v2-canvas-lane-k {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-color-secondary);
}

.v2-canvas-lane-k:first-of-type { margin-top: 4px; }

.v2-canvas-lane-k b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--system-brand-primary-100);
    color: var(--color-brand-primary-700);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

/* Two nodes going in, three coming out. */
.v2-canvas-row.is-in  { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.4fr); }
.v2-canvas-row.is-out { grid-template-columns: minmax(0, 1.25fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); }

.v2-canvas-k {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.v2-canvas-k svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (max-width: 860px) {
    .v2-canvas-row.is-in,
    .v2-canvas-row.is-out { grid-template-columns: 1fr; }
}

/* Folded, end-to-end workflow examples. */
.v2-stories { background: #f7fafc; }
.v2-stories-list { display: grid; gap: 14px; }
.v2-story { border: 1px solid #dfe7ed; border-radius: 18px; background: #fff; overflow: hidden; }
.v2-story summary { display: flex; align-items: center; gap: 22px; padding: 20px 24px; cursor: pointer; list-style: none; }
.v2-story summary::-webkit-details-marker { display: none; }
.v2-story summary:hover { background: #f4f9fc; }
.v2-story summary:focus-visible, .v2-story button:focus-visible { outline: 3px solid #2488aa; outline-offset: -4px; }
.v2-story-thumb { width: 88px; height: 64px; object-fit: cover; border-radius: 9px; }
.v2-story-heading { flex: 1; min-width: 0; }
.v2-story-heading strong { display: block; font-size: 21px; line-height: 1.3; color: #172b3a; }
.v2-story-heading > span { display: block; margin-top: 5px; font-size: 14px; color: #637381; }
.v2-story-open-label { font-size: 12px; color: #44677b; }
.v2-story-plus { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #eaf5f9; color: #237491; font-size: 24px; transition: transform .2s; }
.v2-story[open] .v2-story-plus { transform: rotate(45deg); }
.v2-story[open] summary { border-bottom: 1px solid #e5edf2; }
.v2-story[open] .v2-story-open-label { visibility: hidden; }
.v2-story-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 32px; padding: 28px; }
.v2-story-photo { position: relative; min-height: 380px; border-radius: 12px; overflow: hidden; align-self: stretch; }
.v2-story-photo > img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; }
.v2-story-photo > div { position: absolute; inset: auto 0 0; padding: 60px 24px 24px; background: linear-gradient(transparent, rgba(13,32,45,.9)); color: #fff; }
.v2-story-photo span { display: block; font-size: 12px; margin-bottom: 8px; opacity: .85; }
.v2-story-photo strong { display: block; font-size: 17px; line-height: 1.5; }
.v2-story-explorer { min-width: 0; }
.v2-story-instruction { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 12px; font-weight: 600; color: #385669; }
.v2-story-instruction span { color: #6a7b88; font-weight: 400; }
.v2-story-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
.v2-story-steps button { position: relative; padding: 8px 3px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #5c6e7d; cursor: pointer; font: inherit; text-align: center; }
.v2-story-steps button:hover { background: #f4f8fb; }
.v2-story-steps button[aria-pressed="true"] { background: #edf7fb; border-color: #86bdd0; color: #173e50; }
.v2-story-number { display: grid; place-items: center; margin: 0 auto 10px; width: 27px; height: 27px; border: 1px solid #bdcfd9; border-radius: 50%; font-size: 12px; background: #fff; }
.v2-story-steps button[aria-pressed="true"] .v2-story-number { color: #fff; background: #247b99; border-color: #247b99; }
/* Escaped rather than a literal arrow: this file has no @charset, and a literal
   once came through a Windows-1252 save as "?". */
.v2-story-steps button:not(:last-child)::after { content: "\2192"; position: absolute; top: 10px; right: -10px; z-index: 1; color: #849aa7; font-size: 14px; }
.v2-story-steps .v2-actor { font-size: 9px; padding: 3px 5px; }
.v2-story-steps strong { display: block; font-size: 11px; line-height: 1.4; margin-top: 7px; font-weight: 500; }
.v2-story-panel { border: 1px solid #dfe8ee; border-radius: 12px; padding: 22px; margin-bottom: 12px; }
.v2-story-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: #677987; }
.v2-story-panel h3 { margin: 16px 0 9px; font-size: 23px; color: #183747; }
.v2-story-panel p { margin: 12px 0; color: #566b7a; font-size: 14px; line-height: 1.7; }
.v2-story-panel .v2-story-state { color: #216e8a; font-size: 12px; font-weight: 600; }
.v2-story-outcome { padding-top: 15px; margin-top: 18px; border-top: 1px solid #e4edf1; font-size: 13px; line-height: 1.6; color: #2d6953; }
.v2-story-outcome > span { margin-right: 4px; }
.v2-story-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-story-controls > span { font-size: 11px; color: #6d7f8d; }
.v2-story-controls button { border: 0; border-radius: 8px; padding: 12px 17px; min-height: 44px; background: #eaf5f9; color: #216d88; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.v2-story-controls button:hover { background: #d8edf5; }
.v2-story [hidden] { display: none !important; }
@media (max-width: 1000px) {
    .v2-story-body { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 20px; padding: 20px; }
}
@media (max-width: 760px) {
    .v2-story summary { padding: 16px; gap: 12px; }
    .v2-story-thumb { width: 60px; height: 60px; }
    .v2-story-heading strong { font-size: 17px; }
    .v2-story-heading > span { font-size: 12px; line-height: 1.5; }
    .v2-story-open-label { display: none; }
    .v2-story-body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .v2-story-photo { min-height: 240px; }
    .v2-story-photo > img { object-position: center 35%; }
    .v2-story-panel { padding: 18px; }
    .v2-story-steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .v2-story-steps button { display: flex; gap: 12px; align-items: center; padding: 8px 10px; text-align: left; }
    .v2-story-number { margin: 0; flex-shrink: 0; }
    .v2-story-steps button > span:last-child { display: flex; gap: 8px; align-items: center; }
    .v2-story-steps strong { margin: 0; font-size: 12px; }
    .v2-story-steps button:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-story-plus { transition: none; }
}

/* Outgoing automation triggered by a successful state transition. */
.v2-after-state { margin: 0 0 24px; padding: 20px; border: 1px solid #3b4b61; border-radius: 12px; background: rgba(137, 174, 82, .035); }
.v2-after-state-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.v2-after-state-heading .v2-eco-kicker { margin: 0; }
.v2-after-state-status { font-size: 10px; color: #acbac9; }
.v2-after-state-flow { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.6fr); gap: 12px; align-items: center; }
.v2-after-state-event { padding: 16px; border: 1px solid #415c70; border-radius: 8px; background: #142638; }
.v2-after-state-event > span { display: block; color: #a9bdcd; font-size: 11px; margin-bottom: 8px; }
.v2-after-state-event strong { font-size: 15px; color: #d6e7ef; }
.v2-after-state-arrow { color: #93a876; font-size: 25px; text-align: center; }
.v2-after-state-action > strong { display: block; margin: 8px 0 6px; color: #e2eadb; font-size: 14px; }
.v2-after-state-action > p { margin: 0; color: #b3c1ce; font-size: 12px; line-height: 1.6; }
.v2-after-state-result { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #344557; color: #bdcad6; font-size: 12px; line-height: 1.6; }
.v2-after-state-note { margin: 10px 0 0; color: #94a7ba; font-size: 10px; line-height: 1.6; }
.v2-after-state[data-triggered="true"] { border-color: #87ae59; background: rgba(137, 174, 82, .08); }
.v2-after-state[data-triggered="true"] .v2-after-state-status,
.v2-after-state[data-triggered="true"] .v2-after-state-result { color: #c2e59c; }
@media (max-width: 520px) {
    .v2-after-state { padding: 16px; }
    .v2-after-state-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .v2-after-state-arrow { transform: rotate(90deg); }
}

/* Narrative: compact roles, optional channel detail, and the history payoff. */
.v2-trigger-confirm { margin-top: 14px; min-height: 44px; padding: 10px 14px; border: 1px solid #87ae59; border-radius: 8px; color: #d0eab4; background: #24372d; font: inherit; font-size: 12px; cursor: pointer; }
.v2-trigger-confirm:hover:enabled { background: #334d39; }
.v2-trigger-confirm:disabled { opacity: .55; cursor: default; }
.v2-eco-example .v2-workflow-history { padding: 22px; border: 1px solid #3e6175; border-radius: 12px; background: rgba(89, 174, 201, .045); }
.v2-eco-example .v2-history-title { margin: 8px 0 10px; color: #e1f0f7; font-size: 22px; }
.v2-eco-example .v2-history-intro { margin: 0 0 22px; color: #b1c4d3; font-size: 13px; line-height: 1.7; }
.v2-eco-example .v2-history { border-top: 0; padding-left: 16px; margin-left: 5px; border-left: 1px solid #496475; }
.v2-eco-example .v2-event { position: relative; padding: 5px 0 12px; }
.v2-eco-example .v2-event::before { content: ''; position: absolute; left: -21px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #8dc9dc; box-shadow: 0 0 0 4px #101e2b; }
@media (max-width: 760px) {
    .v2-eco-example .v2-workflow-history { padding: 16px; }
}

.v2-channel-instruction { margin: 0 0 20px; text-align: center; color: #42657a; font-size: 14px; }

/* ---- reserved activities ---- */

/* While the example on show is one whose activity is reserved for a person,
   the credit does not rotate: the AI and the automation prepared it, a person
   performed it. Attribute set by home-v2-hero.js. */
.v2-stage[data-reserved="person"] .v2-stage-credit b { animation: none; opacity: 0; }
.v2-stage[data-reserved="person"] .v2-stage-credit .person { opacity: 1; }

/* ---- the mechanism, named ---- */

.v2-mech {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 1040px;
    margin: 26px auto 0;
}

.v2-mech-item {
    padding: 18px 18px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e4e9ef;
}

.v2-mech-item .v2-node-k { margin-bottom: 6px; }

.v2-mech-item strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    color: var(--default-text-color);
}

.v2-mech-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-color-primary);
}

@media (max-width: 900px) { .v2-mech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .v2-mech { grid-template-columns: 1fr; } }

/* ---- talk to us ---- */

/* The hero keeps two buttons; a third would compete with both. Someone who
   wants a person gets a quieter link rather than a longer scroll. */
.v2-hero-talk {
    align-self: center;
    padding: 4px 2px;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--text-link-default);
    text-decoration: none;
    white-space: nowrap;
}

.v2-hero-talk:hover,
.v2-hero-talk:focus-visible {
    color: var(--color-brand-primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    /* The buttons above it go full width here, so it centres under them. */
    .v2-hero-talk { width: 100%; text-align: center; padding: 6px 0 0; }
}

/* ---- the contract, part by part ---- */

.v2-anat { max-width: 1040px; margin: 0 auto; }

.v2-anat-line {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
}

.v2-anat-token {
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid #dce5ed;
    background: #fff;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--text-color-secondary);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.v2-anat-token.is-form { font-size: 14px; padding: 6px 12px; }
.v2-anat-arrow { color: #b6c4d2; font-size: 15px; }

.v2-anat-token.is-lit {
    background: var(--system-brand-primary-100);
    border-color: var(--background-base-brand);
    color: var(--color-brand-primary-700);
}

.v2-anat-tail { margin: 10px 0 0; text-align: center; }

.v2-anat-tail .v2-anat-token {
    font-size: 13px;
    font-weight: var(--font-weight-light);
    padding: 5px 13px;
    border-style: dashed;
}

/* The cards become the control once the script runs; before that they are the
   four cards this section has always been, so nothing invites a dead click. */
.v2-anat.is-interactive .v2-mech-item {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.v2-anat.is-interactive .v2-mech-item:hover { border-color: #cbd8e3; transform: translateY(-2px); }
.v2-anat.is-interactive .v2-mech-item:focus-visible { outline: 3px solid var(--background-base-brand); outline-offset: 3px; }

.v2-anat.is-interactive .v2-mech-item[aria-pressed="true"] {
    border-color: var(--background-base-brand);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* All four stacked in one cell: the strip is as tall as the longest line, so
   choosing a part never moves the page. */
.v2-anat-without {
    display: grid;
    max-width: 760px;
    margin: 18px auto 0;
}

.v2-anat-without p {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color-primary);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.v2-anat-without p.is-on { visibility: visible; opacity: 1; }

.v2-anat-without b {
    color: var(--color-brand-primary-700);
    font-weight: var(--font-weight-bold);
}

/* Without the script every line would stack on top of the others in that one
   cell, so let them flow instead. */
.v2-anat:not(.is-interactive) .v2-anat-without { display: block; }
.v2-anat:not(.is-interactive) .v2-anat-without p { visibility: visible; opacity: 1; margin-bottom: 6px; }

@media (max-width: 560px) {
    .v2-anat-line { gap: 6px; }
    .v2-anat-token { font-size: 14px; padding: 6px 12px; }
    .v2-anat-without p { text-align: left; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-anat-token,
    .v2-mech-item,
    .v2-anat-without p { transition: none; }
}

/* ---- questions, answered ---- */

/* Each question is a button inside an h3 (see home-v2-faq.ejs). landing.css
   styles .faq-item-title; these rules take away what the heading and the button
   bring with them, so the question looks as it did when it was a paragraph.
   Only the question toggles its answer, so the rest of the item keeps a plain
   cursor and an open answer's text can be selected. */
.faq-item { cursor: auto; }

.faq-item-header {
    margin: 0;
    font: inherit;
}

.faq-item-title {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.faq-item-title:focus-visible { outline: 2px solid #2488aa; outline-offset: 4px; }

/* A closed answer is hidden from the keyboard and screen readers too, not only
   squeezed to no height. Visibility waits until the closing animation ends. */
.faq-item:not(.active) .faq-item-body {
    visibility: hidden;
    transition: height 0.3s ease, visibility 0s linear 0.3s;
}