/* ===== Homepage: In-app Distribb Agent + AI-agent Skill sections ===== */
/* In-app agent (dark, reuses .or-section / .or-layout from original-research) */
/* Left-align eyebrow only on desktop; on mobile .or-heading centers, so let the eyebrow follow */
@media (min-width: 769px) {
    #in-app-agent .or-eyebrow { text-align: left; }
}
.agent-chat-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 1.25rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.agent-chat-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.agent-chat-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e11d2a, #e11d2a);
    box-shadow: 0 0 0 3px rgba(225,29,42,0.15);
    flex-shrink: 0;
}
.agent-chat-title { font-size: 0.8rem; font-weight: 600; color: #ddd; }
.agent-chat-msg {
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    max-width: 92%;
}
.agent-chat-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #e11d2a, #e11d2a);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.agent-chat-msg.bot {
    align-self: flex-start;
    background: #262626;
    color: #cfcfcf;
    border-bottom-left-radius: 4px;
}
.agent-chat-msg.bot strong { color: #fff; }
.agent-chat-applied {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: #86efac;
    background: rgba(134,239,172,0.08);
    border: 1px solid rgba(134,239,172,0.22);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    margin-top: 0.1rem;
}
.agent-chat-applied span { color: #9ca3af; text-decoration: underline; }

/* AI-agent Skill (light, centered; plain-language summary of /agentic) */
.agent-skill-section {
    padding: 5rem 2rem 1.5rem;
    background: #fff;
    text-align: center;
}
.skill-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e11d2a;
    margin-bottom: 0.75rem;
}
.agent-skill-section .section-subtitle {
    max-width: 660px;
    margin: 0 auto 2rem;
}
.skill-demo-video {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 1.75rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 50px rgba(17,24,39,0.12);
    background: #0f0f0f;
    line-height: 0;
}
.skill-demo-video video {
    width: 100%;
    height: auto;
    display: block;
}
.skill-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.skill-pills-label {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
    margin-right: 0.15rem;
}
.skill-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
@media (max-width: 768px) {
    .agent-chat-card { max-width: 100%; }
    .agent-skill-section { padding: 3rem 1rem; }
}

/* ===== Homepage: Growth analytics (GSC + AI visibility) + Proactive suggestions ===== */
/* Light gray split sections reusing the .or-layout copy/visual pattern.
   #growth-analytics opted out of this and uses the dark .or-section instead. */
.proof-section {
    padding: 5rem 1.5rem;
    background: #f8f9fa;
}
#agent-suggestions {
    background: #fff;
}
.proof-section .container {
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.proof-section .or-heading { color: #000; }
.proof-section .or-lead { color: #4b5563; }
.proof-section .or-lead strong { color: #000; }
@media (min-width: 769px) {
    .proof-section .or-eyebrow { text-align: left; }
}

/* #growth-analytics runs on the dark .or-section band, so the eyebrow needs the same
   desktop left-align the .proof-section rule above gives the light bands. */
@media (min-width: 769px) {
    #growth-analytics .or-eyebrow { text-align: left; }
}

/* Analytics card (mirrors the in-app dashboard; dark palette to match .or-card) */
.ga-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 1.25rem;
    width: 100%;
    max-width: 460px;
}
.ga-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.ga-head-title { font-size: 0.8rem; font-weight: 600; color: #fff; }
.ga-head-range { font-size: 0.66rem; font-weight: 600; color: #999; background: rgba(255,255,255,0.06); padding: 2px 9px; border-radius: 99px; }
.ga-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.ga-metric-value { font-size: 1rem; font-weight: 700; color: #fff; }
.ga-metric-label { font-size: 0.58rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.03em; }
.ga-legend { display: flex; gap: 0.9rem; margin-bottom: 0.35rem; }
.ga-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 600; color: #999; }
.ga-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ga-legend .clicks i { background: #e11d2a; }
.ga-legend .impr i { background: #6b7280; }
.ga-chart { margin-bottom: 1rem; }
.ga-chart svg { width: 100%; height: 92px; display: block; }
.ga-aiv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.8rem;
    margin-bottom: 0.35rem;
}
.ga-aiv-title { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
.ga-aiv-sub { font-size: 0.66rem; color: #777; }
.ga-aiv-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ga-aiv-row:last-child { border-bottom: none; padding-bottom: 0; }
.ga-aiv-name { flex: 1; font-size: 0.8rem; color: #ccc; }
.ga-badge { font-size: 0.62rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.ga-badge.cited { color: #fff; background: #e11d2a; }
.ga-badge.mentioned { color: #ccc; border: 1px solid rgba(255,255,255,0.22); }

/* Suggestions inbox card (mirrors the Suggestions page) */
.sugg-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17,24,39,0.08);
    padding: 1.25rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sugg-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid #f3f4f6; }
.sugg-title { flex: 1; font-size: 0.8rem; font-weight: 600; color: #111827; }
.sugg-new { font-size: 0.64rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #e11d2a, #e11d2a); padding: 2px 9px; border-radius: 99px; }
.sugg-item { display: flex; align-items: center; gap: 0.7rem; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.65rem 0.75rem; }
.sugg-item-main { flex: 1; min-width: 0; }
.sugg-chip { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-bottom: 0.25rem; }
.sugg-chip.sd { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sugg-chip.lb { background: #f0fdfa; color: #115e59; border: 1px solid #99f6e4; }
.sugg-chip.rw { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.sugg-text { font-size: 0.78rem; color: #374151; line-height: 1.45; }
.sugg-apply { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: #fff; background: #111827; border-radius: 8px; padding: 0.4rem 0.85rem; }
.sugg-item.applied { background: #f0fdf4; border-color: #bbf7d0; }
.sugg-done { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: #15803d; }
/* GBP card (reviews + posts run by the agent or the skill) */
.gbp-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17,24,39,0.08);
    padding: 1.25rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.gbp-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid #f3f4f6; }
.gbp-title { flex: 1; font-size: 0.8rem; font-weight: 600; color: #111827; }
.gbp-connected { display: inline-flex; align-items: center; font-size: 0.64rem; font-weight: 700; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 2px 9px; border-radius: 99px; }
.gbp-stars { color: #fbbc04; font-size: 0.85rem; letter-spacing: 2px; }
.gbp-review-meta { font-size: 0.7rem; color: #6b7280; margin-left: 0.5rem; }
.gbp-review-text { font-size: 0.8rem; color: #374151; line-height: 1.45; margin-top: 0.25rem; }
.gbp-reply { margin-top: 0.55rem; margin-left: 0.9rem; padding: 0.6rem 0.75rem; background: #f9fafb; border-left: 2px solid #e11d2a; border-radius: 0 10px 10px 0; }
.gbp-reply-tag { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #e11d2a; margin-bottom: 0.2rem; }
.gbp-reply-text { font-size: 0.78rem; color: #374151; line-height: 1.45; }
.gbp-post { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid #f3f4f6; padding-top: 0.7rem; }
.gbp-post-icon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #fef2f2; border-radius: 8px; font-size: 0.8rem; }
.gbp-post-main { flex: 1; min-width: 0; }
.gbp-post-title { font-size: 0.78rem; font-weight: 600; color: #111827; }
.gbp-post-sub { font-size: 0.68rem; color: #6b7280; }
.gbp-post-views { font-size: 0.68rem; font-weight: 700; color: #15803d; white-space: nowrap; }
/* Link Outreach stays white: it's the light break between the dark .backlink-exchange-section
   above it and the dark #growth-analytics band below it */
#link-outreach { background: #fff; }

/* Link Outreach card (find "best of" lists, draft pitches, run campaigns) */
.lo-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17,24,39,0.08);
    padding: 1.25rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.lo-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid #f3f4f6; }
.lo-title { flex: 1; font-size: 0.8rem; font-weight: 600; color: #111827; }
.lo-count { font-size: 0.66rem; font-weight: 700; color: #6b7280; background: #f3f4f6; padding: 2px 9px; border-radius: 99px; }
.lo-target { display: flex; align-items: center; gap: 0.6rem; }
.lo-target-icon { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #fef2f2; border-radius: 8px; }
.lo-target-main { flex: 1; min-width: 0; }
.lo-target-title { font-size: 0.8rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-target-sub { font-size: 0.68rem; color: #6b7280; }
.lo-status { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.lo-status.drafted { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.lo-status.sent { color: #fff; background: #e11d2a; }
.lo-draft { margin-left: 2.1rem; padding: 0.6rem 0.75rem; background: #f9fafb; border-left: 2px solid #e11d2a; border-radius: 0 10px 10px 0; }
.lo-draft-tag { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #e11d2a; margin-bottom: 0.2rem; }
.lo-draft-text { font-size: 0.78rem; color: #374151; line-height: 1.45; }
@media (max-width: 768px) {
    .proof-section { padding: 3rem 1rem; }
    .ga-card, .sugg-card, .gbp-card, .lo-card { max-width: 100%; }
}
/* ===== Link Outreach showcase =========================================
   A full-bleed, steeply tilted reproduction of the real Link Outreach screen
   with the Distribb Agent docked to it, running one scripted story on a loop:
     type the prompt -> send -> the agent clicks Find opportunities ->
     results land one by one -> the top card expands -> the pitch modal opens ->
     the email types itself -> the status walks to "in outreach".
   Copy sits on the site's usual 1100px text rail; the slab breaks out of it
   and runs off the right edge (the section clips it).
   Layer stack, one transform per element so nothing fights:
     .ds-stage (clip + state flags) > .ds-scene (perspective)
     > .ds-tilt (rotate/scale + entrance) > .ds-float (idle drift)
     > .ds-app (the window) + .lo-agent / .lo-mail / .ds-cursor (3D-floating)
   The story is state classes on .ds-stage driven by one JS timeline; the CSS
   only owns transitions. Everything defaults to the FINISHED state, and the
   script adds .armed to opt into the animation, so if the script never runs the
   section still renders in full instead of leaving a blank gap.
   Mock content is illustrative: the domains were checked unregistered and it
   makes no claim about any real third-party site. */
/* Stays white: it's the light break between the dark .backlink-exchange-section
   above it and the dark #growth-analytics band below it */
#link-outreach { background: #fff; }
/* Every showcase clips its own slab at the viewport edge. This MUST stay on the
   base class: scoping it to one id lets the other three slabs push the whole page
   into horizontal scroll. */
.ds-showcase { position: relative; overflow: hidden; }
/* Ids only for specificity, to beat .proof-section's and .or-section's own padding.
   Bottom padding clears the agent bar / panel overhang, which is a fixed px offset,
   so floor it in px too: a small root font-size must not clip them. */
#link-outreach.ds-showcase,
#growth-analytics.ds-showcase,
#in-app-agent.ds-showcase,
#agent-suggestions.ds-showcase {
    padding: 5.5rem 0 max(8rem, 140px);
}
.ds-inner {
    display: grid;
    grid-template-columns: minmax(0, 460px) 1fr;
    align-items: center;
    column-gap: 3.5rem;
    /* --gutter puts the copy on the same text rail as every other section. The
       neighbours are .proof-section (1.5rem) wrapping .container (30px), so the
       rail is the 1100px box plus 30px, and 54px once the box stops centring.
       --edge is the right-hand gutter; .ds-stage cancels it so the slab still
       reaches the viewport edge. */
    --gutter: max(54px, calc((100% - 1100px) / 2 + 30px));
    --edge: 0px;
    padding-left: var(--gutter);
    padding-right: var(--edge);
}
@media (max-width: 768px) { .ds-inner { --gutter: 32px; } }
@media (max-width: 480px) { .ds-inner { --gutter: 28px; } }
.ds-copy { position: relative; z-index: 2; }
/* Left-aligned at every width on purpose. The other sections centre their copy on
   mobile, but the slab here is anchored hard to the left gutter and bleeds right,
   so centred copy would float off its axis. */
.ds-showcase .or-eyebrow { text-align: left; }
.ds-showcase .or-heading { text-align: left; }
.ds-showcase .or-lead { text-align: left; }
/* .ds-light = the showcase sits on a white band. The dark .or-section bands keep
   their own white heading and grey lead, so they get no override at all. */
.ds-showcase.ds-light .or-heading { color: #000; }
.ds-showcase.ds-light .or-lead { color: #4b5563; }
.ds-showcase.ds-light .or-lead strong { color: #000; }
/* a white slab needs a heavier, darker shadow to read on a near-black band */
.ds-showcase:not(.ds-light) .ds-app { box-shadow: 0 4px 12px rgba(0,0,0,.35), 0 40px 90px rgba(0,0,0,.55); }
.ds-showcase:not(.ds-light) .ds-glow { background: radial-gradient(ellipse at 42% 50%, rgba(225,29,42,0.30), rgba(225,29,42,0) 66%); }

/* --- stage, perspective, tilt, drift --- */
.ds-stage { position: relative; min-width: 0; height: 700px; margin-right: calc(-1 * var(--edge)); }
.ds-glow {
    position: absolute; top: 50%; left: -10%;
    width: 95%; height: 80%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at 42% 50%, rgba(225,29,42,0.14), rgba(225,29,42,0) 66%);
    filter: blur(22px);
    pointer-events: none;
}
.ds-scene {
    position: absolute; top: 50%; left: 0;
    width: 1560px;
    /* Not half the window height: the roll drops the far edge, so the slab's
       bounding box grows downward. This offset re-centres what you actually see. */
    margin-top: -500px;
    perspective: 2600px;
    perspective-origin: 22% 50%;
}
/* --ry/--rz/--sc are the resting tilt (retuned per breakpoint below). The entrance
   only animates --dx, so each breakpoint stays a one-line change. */
.ds-tilt {
    --ry: -13deg; --rz: 9deg; --sc: .70; --enter: 80px;
    transform-origin: 0% 50%;        /* pivot on the left edge: right side swings away */
    transform-style: preserve-3d;
    transform: rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--sc)) translate3d(var(--dx, 0px), 0, 0);
}
.ds-stage.armed .ds-tilt {
    --dx: var(--enter);
    opacity: 0;
    transition: transform 1.3s cubic-bezier(.16,.86,.3,1), opacity .9s ease-out;
}
.ds-stage.armed.is-live .ds-tilt { --dx: 0px; opacity: 1; }
.ds-float { position: relative; transform-style: preserve-3d; }
/* Idle drift only once the section has actually been reached. */
.ds-stage.is-live .ds-float { animation: dsFloat 12s ease-in-out infinite; }
@keyframes dsFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -12px, 0); }
}

/* --- the app window --- */
.ds-app {
    position: relative;
    display: grid;
    grid-template-columns: 226px 1fr;
    width: 1560px;
    height: 820px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 18px;
    overflow: hidden;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    color: #111827;
    /* Fixed-width box full of small text: stop iOS Safari font-boosting it. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    box-shadow:
        0 2px 6px rgba(16,24,40,.05),
        0 26px 50px rgba(16,24,40,.10),
        0 64px 130px rgba(16,24,40,.16);
}
/* The mock is built out of spans and divs only: no heading, no landmark, nothing
   tabbable, so it cannot enter the page outline or the a11y tree. Blockify the ones
   that stack. .ds-app p only resets alignment; its margin is set on .ds-sub. */
.ds-app p { text-align: left; }
.ds-h1, .ds-proj-main, .ds-proj-name, .ds-proj-dom,
.ds-row-title, .ds-row-sub, .lo-angle, .ds-card-body,
.lo-mail-meta, .lo-mail-subj, .lo-mail-body { display: block; }

/* sidebar */
.ds-sb { border-right: 1px solid #eef0f2; padding: 18px 14px; display: flex; flex-direction: column; gap: 13px; background: #fff; }
.ds-sb-top { display: flex; align-items: center; gap: 5px; padding: 0 4px; }
.ds-sb-word { font-size: 21px; font-weight: 900; letter-spacing: -.5px; color: #111; }
.ds-sb-collapse { margin-left: auto; color: #b6bcc4; display: flex; }
.ds-proj { display: flex; align-items: center; gap: 9px; border: 1px solid #eceef1; border-radius: 12px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.ds-proj-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #6b7280; }
.ds-proj-main { min-width: 0; }
.ds-proj-name { font-size: 12.5px; font-weight: 700; color: #111827; line-height: 1.25; }
.ds-proj-dom { font-size: 10.5px; color: #9ca3af; }
.ds-proj-chev { margin-left: auto; color: #b6bcc4; display: flex; }
.ds-nav { display: flex; flex-direction: column; gap: 1px; }
.ds-navitem { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: #374151; white-space: nowrap; }
.ds-navitem svg { flex: 0 0 auto; color: #8b919a; }
.ds-navitem.sub { margin-left: 12px; font-size: 12px; }
.ds-navitem.active { background: #f3f4f6; font-weight: 700; color: #0b0d10; }
.ds-navitem.active svg { color: #0b0d10; }
.ds-beta { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #6b7280; background: #f3f4f6; border-radius: 99px; padding: 1px 6px; }
.ds-navitem.active .ds-beta { background: #fee2e2; color: #b91c1c; }
.ds-sb-div { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 800; letter-spacing: .13em; color: #c2c7ce; padding: 9px 6px 1px; }
.ds-sb-div::before, .ds-sb-div::after { content: ""; height: 1px; background: #eef0f2; flex: 1; }

/* main pane */
.ds-main { position: relative; padding: 26px 30px 0; overflow: hidden; }
.ds-main::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
    pointer-events: none;
}
.ds-h1row { display: flex; align-items: center; gap: 10px; }
.ds-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #0b0d10; }
.ds-h1-beta { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: #6b7280; background: #f3f4f6; border: 1px solid #e9ebee; border-radius: 6px; padding: 3px 7px; }
.ds-sub { margin: 9px 0 22px; max-width: 760px; font-size: 12px; color: #8b919a; line-height: 1.65; }
.ds-actions { display: flex; align-items: center; gap: 14px; }
.ds-cta {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    background: #e11d2a; color: #fff; font-size: 13px; font-weight: 700;
    border-radius: 10px; padding: 11px 18px;
    box-shadow: 0 6px 16px rgba(225,29,42,.26);
    transition: transform .12s ease, box-shadow .12s ease;
}
.ds-cta-label { display: inline-flex; align-items: center; gap: 8px; }
.ds-cta-label.busy { display: none; }
.ds-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: dsSpin .7s linear infinite; }
@keyframes dsSpin { to { transform: rotate(360deg); } }
/* the click ripple the agent leaves on the button */
.ds-cta::after {
    content: ""; position: absolute; inset: 0; border-radius: 10px;
    border: 2px solid #e11d2a; opacity: 0; transform: scale(1);
}
.ds-hint { font-size: 11px; color: #a3a9b1; }
.ds-pilot { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #4b5563; }
.ds-toggle { position: relative; width: 40px; height: 22px; border-radius: 99px; background: #e11d2a; }
.ds-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.ds-stats { margin: 20px 0 24px; font-size: 12.5px; color: #8b919a; }
.ds-stats b { font-size: 15px; font-weight: 800; color: #0b0d10; font-variant-numeric: tabular-nums; }
.ds-label { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: #b6bcc4; margin-bottom: 7px; }
.ds-note { margin-bottom: 12px; max-width: 900px; font-size: 11px; color: #a3a9b1; line-height: 1.65; }
.ds-note b { color: #6b7280; }

/* rows */
.ds-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid #eceef1; border-radius: 13px; background: #fff; }
.ds-row-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; border: 1.5px solid #c9ced5; }
.ds-row-main { flex: 1; min-width: 0; }
.ds-row-title { font-size: 13px; font-weight: 700; color: #0b0d10; }
.ds-row-sub { margin-top: 2px; font-size: 11px; color: #a3a9b1; }
.ds-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; border: 1px solid #dfe3e8; border-radius: 99px; padding: 4px 11px; color: #4b5563; background: #fff; white-space: nowrap; }
.ds-badge.red { background: #e11d2a; border-color: #e11d2a; color: #fff; }
.ds-row.focus { border-color: #f3c2c6; box-shadow: 0 12px 30px rgba(225,29,42,.10); }
/* the part of the focused card that unfolds when the agent opens it */
.ds-card-body { overflow: hidden; }
.lo-angle { margin: 11px 0 12px; padding: 1px 0 1px 12px; border-left: 3px solid #e11d2a; font-size: 12px; color: #4b5563; }
.lo-angle b { color: #0b0d10; }
.ds-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #4b5563; background: #f6f7f8; border: 1px solid #eceef1; border-radius: 99px; padding: 4px 10px; }
.ds-chip .k { color: #a3a9b1; }
.ds-btns { display: flex; gap: 10px; margin-top: 12px; }
.ds-btn { position: relative; font-size: 11.5px; font-weight: 700; border: 1px solid #dfe3e8; border-radius: 9px; padding: 8px 13px; color: #0b0d10; background: #fff; transition: transform .12s ease, border-color .12s ease; }
.ds-btn.red { border-color: #f6cfd3; color: #e11d2a; }

/* status pill: reviewing -> sending soon -> in outreach, stepped by the story */
.lo-cycle { position: relative; flex: 0 0 auto; width: 108px; height: 24px; }
.lo-cycle .ds-badge { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.lo-cycle .s3 { opacity: 1; }

/* --- the Distribb Agent command bar, matching the real one: suggestion chips
       over a pill-shaped bar with the attach / history icons and a red send --- */
.lo-agent {
    position: absolute; left: 150px; bottom: -44px; width: 580px;
    display: flex; flex-direction: column; gap: 10px;
    text-align: left;
    transform: translate3d(0, 0, 150px);
}
.lo-agent-chips { display: none; align-items: center; gap: 8px; padding: 0 8px; }
.lo-agent-chip {
    font-size: 11.5px; color: #4b5563; background: #fff; white-space: nowrap;
    border: 1px solid #e4e7ea; border-radius: 99px; padding: 6px 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.lo-agent-x { margin-left: auto; display: flex; color: #9ca3af; padding-right: 6px; }
.lo-agent-log { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.lo-bubble { max-width: 78%; font-size: 12px; line-height: 1.55; border-radius: 12px; padding: 8px 12px; }
.lo-bubble.user { align-self: flex-end; background: #e11d2a; color: #fff; border-bottom-right-radius: 4px; }
.lo-bubble.bot { align-self: flex-start; background: #fff; color: #374151; border: 1px solid #e4e7ea; border-bottom-left-radius: 4px; box-shadow: 0 2px 6px rgba(16,24,40,.05); }
.lo-agent-bar {
    display: flex; align-items: center; gap: 12px;
    height: 52px; padding: 0 7px 0 18px;
    background: #fff;
    border: 1.5px solid #0b0d10;
    border-radius: 99px;
    box-shadow: 0 18px 40px rgba(16,24,40,.16), 0 3px 10px rgba(16,24,40,.08);
}
.lo-agent-ico { flex: 0 0 auto; display: flex; color: #6b7280; }
.lo-agent-text { flex: 1; min-width: 0; font-size: 14px; color: #0b0d10; white-space: nowrap; overflow: hidden; }
.lo-agent-text:empty::before { content: "Run a fresh opportunity hunt..."; color: #9ca3af; }
.lo-agent-caret { flex: 0 0 auto; width: 1.5px; height: 18px; background: #0b0d10; opacity: 0; }
.lo-agent-send {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e11d2a; color: #fff;
    transition: transform .12s ease;
}

/* the agent's pointer */
.ds-cursor {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px;
    transform: translate3d(696px, 828px, 190px);
    transition: transform .95s cubic-bezier(.5,.02,.2,1);
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(16,24,40,.35));
    opacity: 0;
}
.ds-cursor svg { display: block; }

/* the pitch panel the agent opens, floating above the window */
.lo-mail {
    position: absolute; left: 540px; bottom: 470px; width: 370px;
    padding: 15px 18px 17px;
    background: #fff;
    border: 1px solid #e9ebee;
    border-radius: 16px;
    text-align: left;
    box-shadow: 0 34px 70px rgba(16,24,40,.20), 0 8px 18px rgba(16,24,40,.07);
    transform: translate3d(0, 0, 150px);
}
.lo-mail-head { display: flex; align-items: center; gap: 8px; }
.lo-mail-title { font-size: 14px; font-weight: 800; color: #0b0d10; }
.lo-mail-x { margin-left: auto; color: #c2c7ce; display: flex; }
.lo-mail-meta { margin: 3px 0 11px; padding-bottom: 11px; border-bottom: 1px solid #f1f3f5; font-size: 11px; color: #a3a9b1; }
.lo-mail-subj { font-size: 12.5px; font-weight: 600; color: #0b0d10; background: #f8f9fa; border: 1px solid #eceef1; border-radius: 9px; padding: 8px 11px; }
.lo-mail-body { margin-top: 8px; font-size: 12px; color: #374151; line-height: 1.65; border: 1px solid #eceef1; border-radius: 9px; padding: 10px 12px; }
.lo-type i { display: block; font-style: normal; white-space: nowrap; }
.lo-caret { display: inline-block; width: 2px; height: 12px; margin-left: 1px; background: #e11d2a; vertical-align: -1px; opacity: 0; }

/* ===== the story ======================================================
   .armed is added by the script, so everything above is the finished state
   and everything below only applies while the story is actually running. */
.ds-stage.armed .ds-stats,
.ds-stage.armed .ds-row,
.ds-stage.armed .lo-mail { opacity: 0; }
.ds-stage.armed .lo-bubble { opacity: 0; transform: translateY(8px); }
.ds-stage.armed .ds-stats { transform: translateY(6px); }
.ds-stage.armed .ds-row { transform: translateY(14px); }
.ds-stage.armed .ds-card-body { max-height: 0; opacity: 0; }
.ds-stage.armed .lo-mail { transform: translate3d(26px, 20px, 150px) scale(.96); }
.ds-stage.armed .lo-mail-subj,
.ds-stage.armed .lo-mail-body { opacity: 0; }
.ds-stage.armed .lo-type i { clip-path: inset(0 100% 0 0); }
.ds-stage.armed .lo-cycle .s3 { opacity: 0; }

.ds-stage.armed .lo-bubble,
.ds-stage.armed .ds-stats,
.ds-stage.armed .ds-row,
.ds-stage.armed .lo-mail,
.ds-stage.armed .lo-mail-subj,
.ds-stage.armed .lo-mail-body { transition: opacity .45s ease, transform .55s cubic-bezier(.16,.86,.3,1); }
.ds-stage.armed .ds-card-body { transition: max-height .55s cubic-bezier(.16,.86,.3,1), opacity .4s ease .1s; }

/* 1. the prompt is typed, the caret blinks in the agent's input */
.ds-stage.s-caret .lo-agent-caret { animation: dsBlink 1s steps(1, end) infinite; }
@keyframes dsBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.ds-stage.armed:not(.s-sent) .lo-agent-chips { display: flex; }
.ds-stage.armed:not(.s-sent) .lo-agent-log { display: none; }
/* 2. send is pressed, the prompt becomes a message */
.ds-stage.s-press-send .lo-agent-send { transform: scale(.86); }
.ds-stage.s-sent .lo-bubble.user { opacity: 1; transform: none; }
/* 3. the agent answers */
.ds-stage.s-reply .lo-bubble.bot { opacity: 1; transform: none; }
/* 4. the pointer travels to the Find button and presses it */
.ds-stage.armed .ds-cursor { opacity: 1; }
.ds-stage.s-press-cta .ds-cta { transform: scale(.96); box-shadow: 0 2px 8px rgba(225,29,42,.3); }
.ds-stage.s-press-cta .ds-cta::after { animation: dsRipple .55s ease-out; }
@keyframes dsRipple {
    from { opacity: .55; transform: scale(1); }
    to   { opacity: 0;   transform: scale(1.35); }
}
/* 5. it searches */
.ds-stage.s-searching:not(.s-results) .ds-cta-label.idle { display: none; }
.ds-stage.s-searching:not(.s-results) .ds-cta-label.busy { display: inline-flex; }
/* 6. the results land, one after another */
.ds-stage.s-results .ds-stats { opacity: 1; transform: none; }
.ds-stage.s-results .ds-row { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
/* 7. the top card unfolds */
.ds-stage.s-expand .ds-card-body { max-height: 200px; opacity: 1; }
/* 8. the pitch modal opens and writes itself */
.ds-stage.s-press-mail .ds-btn.opens { transform: scale(.95); border-color: #f3c2c6; }
.ds-stage.s-mail .lo-mail { opacity: 1; transform: translate3d(0, 0, 150px) scale(1); }
.ds-stage.s-subject .lo-mail-subj { opacity: 1; }
.ds-stage.s-body .lo-mail-body { opacity: 1; }
.ds-stage.s-body .lo-type i { animation: dsType .7s steps(32, end) forwards; }
.ds-stage.s-body .lo-type i:nth-child(2) { animation-delay: .7s; }
.ds-stage.s-body .lo-type i:nth-child(3) { animation-delay: 1.4s; }
@keyframes dsType { to { clip-path: inset(0 0 0 0); } }
.ds-stage.s-body .lo-caret { animation: dsBlink 1s steps(1, end) 2.1s infinite; }
/* 9. the status walks forward as the mail actually goes out */
/* The story only adds classes, so each step has to switch the previous one off
   or all three pills stack on top of each other. */
.ds-stage.s-p1:not(.s-p2) .lo-cycle .s1,
.ds-stage.s-p2:not(.s-p3) .lo-cycle .s2,
.ds-stage.s-p3 .lo-cycle .s3 { opacity: 1; }

/* --- responsive ------------------------------------------------------
   The copy stacks above the slab and the stage runs to the viewport edge.
   Each tier narrows the mock itself rather than scaling the same window down:
   shrinking to fit would put the app's 13px type at 6px and kill both the
   legibility and the bleed. */
@media (max-width: 1180px) {
    #link-outreach.ds-showcase,
#growth-analytics.ds-showcase,
#in-app-agent.ds-showcase,
#agent-suggestions.ds-showcase { padding: 5rem 0 5.5rem; }
    .ds-inner { grid-template-columns: 1fr; row-gap: 2.5rem; --edge: 1.5rem; }
    .ds-copy { max-width: 660px; }
    .ds-app { height: 720px; }
    .ds-stage { height: 840px; }
    .ds-scene { top: 0; margin-top: -33px; perspective-origin: 8% 50%; }
    .ds-tilt { --ry: -10deg; --rz: 7deg; --sc: .82; --enter: 60px; }
    /* Near native size once stacked, so the window carries the section on its own.
       The two floating panels only have room left by covering the rows. */
    .lo-agent, .lo-mail, .ds-cursor { display: none; }
}
@media (max-width: 900px) {
    .ds-app { grid-template-columns: 1fr; width: 1180px; height: 700px; }
    .ds-sb { display: none; }
    .ds-scene { width: 1180px; margin-top: -20px; }
    .ds-stage { height: 740px; }
    .ds-tilt { --sc: .78; }
}
@media (max-width: 600px) {
    #link-outreach.ds-showcase,
#growth-analytics.ds-showcase,
#in-app-agent.ds-showcase,
#agent-suggestions.ds-showcase { padding: 3.25rem 0 4rem; }
    .ds-inner { --edge: 1rem; }
    .ds-stage { height: 620px; }
    .ds-app { width: 820px; height: 660px; }
    .ds-scene { width: 820px; margin-top: -10px; }
    .ds-tilt { --ry: -8deg; --rz: 5deg; --sc: .74; --enter: 40px; }
    .ds-main { padding: 20px 22px 0; }
    .ds-h1 { font-size: 22px; }
    /* #in-app-agent keeps its panel on mobile because the panel IS the section,
       so pull it and the toast to the left gutter where they are actually visible.
       Id-qualified: the base .ia-* rules are declared later in this stylesheet and
       would otherwise win on source order at equal specificity. */
    #in-app-agent .ia-panel { left: 20px; top: 24px; bottom: 24px; }
    #in-app-agent .ia-toast { left: 20px; bottom: 74px; width: 300px; }
}

/* The script does not add .armed when reduced motion is requested, so the whole
   section already resolves to its finished state. This only has to stop the idle
   drift, and it double-covers the case where .armed got added anyway. */
@media (prefers-reduced-motion: reduce) {
    .ds-stage.is-live .ds-float { animation: none; }
    .ds-stage.armed .lo-bubble,
    .ds-stage.armed .ds-stats,
    .ds-stage.armed .ds-row,
    .ds-stage.armed .lo-mail,
    .ds-stage.armed .lo-mail-subj,
    .ds-stage.armed .lo-mail-body { opacity: 1; transform: none; transition: none; }
    .ds-stage.armed .lo-mail { transform: translate3d(0, 0, 150px); }
    .ds-stage.armed .ds-tilt { --dx: 0px; opacity: 1; transition: none; }
    .ds-stage.armed .ds-card-body { max-height: none; opacity: 1; transition: none; }
    .ds-stage.armed .lo-type i { clip-path: none; animation: none; }
    .ds-stage.armed .lo-cycle .s3 { opacity: 1; }
    .ds-stage.armed .ds-cursor,
    .ds-stage.armed .lo-agent-caret { display: none; }
    .ds-stage.armed .lo-caret { animation: none; }
}

/* ===== Growth analytics showcase ("Stop flying blind on your SEO.") =========
   Reproduces the real /dashboard Analytics card: the Search Console pane with
   its four tiles, dual-line trend and Top queries table, then the AI visibility
   pane with the five engines. Story: ask the agent, it hits Refresh, the numbers
   land, the queries fill in, then it flips to AI visibility and the engines
   resolve one by one.
   NOTE ON COLOUR: the real dashboard has NO green. Improving deltas are BLACK,
   declining ones are RED. Do not "fix" that to green. */
.ga2-head { display: flex; align-items: flex-start; gap: 12px; }
.ga2-head-main { flex: 1; min-width: 0; }
.ga2-h3 { display: block; font-size: 17px; font-weight: 700; color: #111827; }
.ga2-status { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11.5px; color: #6b7280; }
.ga2-dot { width: 7px; height: 7px; border-radius: 50%; background: #111827; }
.ga2-headbtns { display: flex; gap: 8px; flex: 0 0 auto; }
.ga2-obtn { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 12px; transition: transform .12s ease, border-color .12s ease; }
.ga2-seg { display: inline-flex; gap: 3px; margin: 18px 0 16px; padding: 3px; background: #f3f4f6; border-radius: 10px; }
.ga2-seg-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #6b7280; border-radius: 8px; padding: 7px 13px; border: 1px solid transparent; transition: transform .12s ease; }
.ga2-seg-btn.on { background: #fff; border-color: #e5e7eb; color: #111827; }

.ga2-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ga2-tile { border: 1px solid #eef0f3; border-radius: 10px; padding: 12px 14px; }
.ga2-tile-v { display: block; font-size: 21px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.ga2-tile-l { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.ga2-tile-s { font-size: 12px; font-weight: 600; color: #9ca3af; }
.ga2-delta { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #000; }
.ga2-delta.down { color: #e11d2a; }

.ga2-legend { display: flex; gap: 14px; margin: 18px 0 4px; }
.ga2-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #6b7280; }
.ga2-legend i { width: 8px; height: 8px; border-radius: 2px; }
.ga2-legend .k i { background: #111827; }
.ga2-legend .i i { background: #e11d2a; }
.ga2-chart { height: 128px; }
.ga2-chart svg { display: block; width: 100%; height: 128px; }
/* both lines draw themselves left to right when the data lands */
.ga2-line { stroke-dasharray: 1400; stroke-dashoffset: 0; }
.ga2-area { opacity: 1; }

.ga2-tabs { display: flex; align-items: center; gap: 20px; margin: 16px 0 0; border-bottom: 1px solid #e5e7eb; }
.ga2-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 0 10px; font-size: 12.5px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ga2-tab.on { color: #111827; border-bottom-color: #111827; }
.ga2-count { font-size: 10px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 99px; padding: 1px 7px; }
.ga2-tab.on .ga2-count { background: #111827; color: #fff; }

.ga2-th, .ga2-tr { display: grid; grid-template-columns: minmax(0,3fr) 88px 108px 76px 92px; gap: 14px; align-items: center; }
.ga2-th { padding: 11px 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; border-bottom: 1px solid #f0f0f0; }
.ga2-tr { padding: 11px 2px; font-size: 12.5px; color: #374151; border-bottom: 1px solid #f0f0f0; }
.ga2-q { color: #111827; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga2-num { text-align: right; font-variant-numeric: tabular-nums; }
.ga2-brand { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 99px; padding: 1px 7px; vertical-align: 1px; }
.ga2-note { margin-top: 12px; font-size: 11px; color: #9ca3af; }

/* AI visibility pane */
.ga2-scanrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ga2-scanwhen { flex: 1; font-size: 11.5px; color: #9ca3af; }
/* The real component collapses the five engines to two columns on a narrow pane,
   which is exactly what we need: at five across, three of them sit past the
   viewport and the story's finale is invisible. */
.ga2-pane-ai { max-width: 620px; }
.ga2-engines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.ga2-engine { display: flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 12px; }
.ga2-engine-n { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga2-epill { flex: 0 0 auto; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; background: #f3f4f6; color: #9ca3af; border: 1px solid transparent; }
.ga2-epill.cited { background: #e11d2a; color: #fff; }
.ga2-epill.mentioned { background: #fff; color: #374151; border-color: #d1d5db; }
.ga2-esw { position: relative; display: inline-flex; }
.ga2-esw .ga2-epill { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity .3s ease; }
.ga2-esw .ga2-epill.pending { position: static; opacity: 1; }
.ga2-prompts { margin-top: 16px; }
.ga2-prow { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #f0f0f0; }
.ga2-prow-main { flex: 1; min-width: 0; }
.ga2-ptext { display: block; font-size: 12.5px; color: #111827; }
.ga2-psub { display: block; margin-top: 2px; font-size: 11px; color: #9ca3af; }
.ga2-ppill { flex: 0 0 auto; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 3px 9px; background: #e11d2a; color: #fff; }
.ga2-ppill.zero { background: #f3f4f6; color: #9ca3af; }

/* the two panes swap when the agent flips the segmented control */
.ds-stage.armed .ga2-pane-ai { display: none; }
.ds-stage.armed.s-ai .ga2-pane-ai { display: block; }
.ds-stage.armed.s-ai .ga2-pane-search { display: none; }
.ds-stage.armed.s-ai .ga2-seg-btn.k { background: none; border-color: transparent; color: #6b7280; }
.ds-stage.armed.s-ai .ga2-seg-btn.a { background: #fff; border-color: #e5e7eb; color: #111827; }
/* without the script both panes would stack, so the finished state shows AI visibility */
.ds-stage:not(.armed) .ga2-pane-search { display: none; }
.ds-stage:not(.armed) .ga2-seg-btn.k { background: none; border-color: transparent; color: #6b7280; }
.ds-stage:not(.armed) .ga2-seg-btn.a { background: #fff; border-color: #e5e7eb; color: #111827; }

/* story: nothing has loaded yet */
.ds-stage.armed .ga2-tile-v,
.ds-stage.armed .ga2-delta,
.ds-stage.armed .ga2-note,
.ds-stage.armed .ga2-tr { opacity: 0; }
.ds-stage.armed .ga2-tr { transform: translateY(8px); }
.ds-stage.armed .ga2-line { stroke-dashoffset: 1400; }
.ds-stage.armed .ga2-area { opacity: 0; }
.ds-stage.armed .ga2-tile-v,
.ds-stage.armed .ga2-delta,
.ds-stage.armed .ga2-note,
.ds-stage.armed .ga2-tr { transition: opacity .45s ease, transform .5s cubic-bezier(.16,.86,.3,1); }
.ds-stage.armed .ga2-line { transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.3,1); }
.ds-stage.armed .ga2-area { transition: opacity .8s ease .5s; }

.ds-stage.armed.s-press-refresh .ga2-obtn.refresh { transform: scale(.95); border-color: #111827; }
.ds-stage.armed.s-press-ai .ga2-seg-btn.a { transform: scale(.95); }
.ds-stage.armed.s-data .ga2-tile-v,
.ds-stage.armed.s-data .ga2-delta { opacity: 1; }
.ds-stage.armed.s-data .ga2-line { stroke-dashoffset: 0; }
.ds-stage.armed.s-data .ga2-area { opacity: 1; }
.ds-stage.armed.s-rows .ga2-tr { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.ds-stage.armed.s-note .ga2-note { opacity: 1; }
/* each engine resolves from "checking" to its real verdict, one after another */
.ds-stage.armed.s-e1 .ga2-engine:nth-child(1) .ga2-epill.pending,
.ds-stage.armed.s-e2 .ga2-engine:nth-child(2) .ga2-epill.pending,
.ds-stage.armed.s-e3 .ga2-engine:nth-child(3) .ga2-epill.pending,
.ds-stage.armed.s-e4 .ga2-engine:nth-child(4) .ga2-epill.pending,
.ds-stage.armed.s-e5 .ga2-engine:nth-child(5) .ga2-epill.pending { opacity: 0; }
.ds-stage.armed.s-e1 .ga2-engine:nth-child(1) .ga2-epill.done,
.ds-stage.armed.s-e2 .ga2-engine:nth-child(2) .ga2-epill.done,
.ds-stage.armed.s-e3 .ga2-engine:nth-child(3) .ga2-epill.done,
.ds-stage.armed.s-e4 .ga2-engine:nth-child(4) .ga2-epill.done,
.ds-stage.armed.s-e5 .ga2-engine:nth-child(5) .ga2-epill.done { opacity: 1; }
.ds-stage:not(.armed) .ga2-epill.pending { opacity: 0; position: absolute; }
.ds-stage:not(.armed) .ga2-epill.done { opacity: 1; position: static; }

@media (prefers-reduced-motion: reduce) {
    .ds-stage.armed .ga2-tile-v,
    .ds-stage.armed .ga2-delta,
    .ds-stage.armed .ga2-note,
    .ds-stage.armed .ga2-tr { opacity: 1; transform: none; transition: none; }
    .ds-stage.armed .ga2-line { stroke-dashoffset: 0; transition: none; }
    .ds-stage.armed .ga2-area { opacity: 1; transition: none; }
    .ds-stage.armed .ga2-pane-search { display: none; }
    .ds-stage.armed .ga2-pane-ai { display: block; }
    .ds-stage.armed .ga2-epill.pending { opacity: 0; position: absolute; }
    .ds-stage.armed .ga2-epill.done { opacity: 1; position: static; }
}

/* ===== In-app agent showcase ("Talk to Distribb like you'd talk to an employee.")
   Reproduces the real AgentBar, which is the actual customer-facing agent surface:
   a right-side "Distribb Agent" panel over whatever page you are on, a proposal
   card with a Current/Proposed diff, and the dark "Article updated. [Undo]" toast.
   Deliberately NOT /assistant-v2, which is admin-only. */

/* ===== In-app agent: the article page the agent sits on =====================
   Mirrors a real Distribb article: byline with author photo, feature image,
   the blue Key takeaways callout (.key-takeaway in styles.css), body with an
   inline figure and caption, and the table-of-contents rail. The real rail is
   on the LEFT, but the app's own nav already owns the left edge here, so it
   reads better on the right in the mock.
   Column is 384px because that is roughly a 65-character measure at this type
   size, i.e. what the real article actually looks like, and it keeps both the
   text and the rail inside the visible part of the slab. */
.ia-doc { display: grid; grid-template-columns: 384px 190px; gap: 30px; align-items: start; }
.ia-art { min-width: 0; }
.ia-crumb { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b6bcc4; }
.ia-title { display: block; margin: 9px 0 12px; font-size: 25px; font-weight: 900; letter-spacing: -.02em; color: #000; line-height: 1.18; }
.ia-by { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ia-by-photo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, #d8dde3, #b9c0c9 55%, #cfd5dc); }
.ia-by-name { display: block; font-size: 12px; font-weight: 700; color: #0b0d10; }
.ia-by-when { display: block; font-size: 10.5px; color: #9ca3af; }
.ia-fig {
    height: 150px; border-radius: 10px; margin-bottom: 6px;
    background:
        radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
        radial-gradient(90% 80% at 82% 78%, rgba(225,29,42,.20), rgba(225,29,42,0) 60%),
        linear-gradient(128deg, #e7eaee, #cfd6de 45%, #eef1f4);
}
.ia-fig.small { height: 108px; margin-top: 14px; }
.ia-cap { display: block; margin-bottom: 14px; font-size: 10px; color: #b6bcc4; }
/* the real .key-takeaway from styles.css, reproduced */
/* display:block is load-bearing: this is a <span>, and an inline box with padding
   and a background fragments across every line it wraps onto, which is what the
   broken border and overlapping heading were. */
.ia-kt {
    display: block;
    margin: 14px 0; padding: 12px 14px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 4px solid #2563eb;
    border-radius: 0 8px 8px 0;
}
.ia-kt-h { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; color: #1e40af; }
.ia-kt-l { display: block; position: relative; padding-left: 15px; margin-bottom: 5px; font-size: 11.5px; line-height: 1.5; color: #1e293b; }
.ia-kt-l::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #2563eb; }
.ia-kt-l:last-child { margin-bottom: 0; }
.ia-p { display: block; margin-bottom: 10px; font-size: 12px; line-height: 1.75; color: #374151; }
.ia-h2 { display: block; margin: 16px 0 8px; font-size: 15px; font-weight: 800; color: #0b0d10; letter-spacing: -.01em; }
.ia-quote { display: block; margin: 14px 0; padding: 2px 0 2px 13px; border-left: 3px solid #e5e7eb; font-style: italic; font-size: 12px; line-height: 1.65; color: #1e293b; }
/* table of contents rail */
.ia-toc { position: sticky; top: 0; }
.ia-toc-l { display: block; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #eee; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #000; }
.ia-toc-i { display: block; padding: 5px 0 5px 10px; border-left: 2px solid #f0f0f0; font-size: 11px; line-height: 1.45; color: #9ca3af; }
.ia-toc-i.on { border-left-color: #e11d2a; color: #0b0d10; font-weight: 600; }

/* the agent panel starts COLLAPSED: only the command bar is on screen until
   the prompt is sent, which is how the real AgentBar behaves */
.ds-stage.armed .ia-panel { opacity: 0; transform: translate3d(28px, 0, 60px); pointer-events: none; }
.ds-stage.armed.s-open .ia-panel { opacity: 1; transform: translate3d(0, 0, 60px); }

/* the agent panel, docked to the right edge of the window */
.ia-panel {
    /* Docked left of centre, not to the window's right edge: the right edge of
       the slab is off the viewport on this layout, and this panel IS the section. */
    position: absolute; top: 34px; left: 452px; bottom: 34px; width: 412px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e9ebee;
    border-radius: 16px;
    text-align: left;
    transform: translate3d(0, 0, 60px);
    box-shadow: 0 34px 70px rgba(16,24,40,.22), 0 8px 18px rgba(16,24,40,.08);
}
.ia-phead { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid #f1f3f5; }
.ia-pname { font-size: 13.5px; font-weight: 800; color: #0b0d10; }
.ia-pbusy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 99px; padding: 3px 9px; }
.ia-plog { display: flex; flex-direction: column; gap: 10px; }
.ia-umsg { align-self: flex-end; max-width: 88%; font-size: 12px; line-height: 1.55; color: #111827; background: #f1f3f4; border-radius: 12px; border-bottom-right-radius: 4px; padding: 9px 12px; }
.ia-amsg { font-size: 12px; line-height: 1.65; color: #374151; }

/* the proposal card: header, summary, a two-row diff, then Discard / Apply */
.ia-prop { border: 1px solid #e4e7ea; border-radius: 12px; overflow: hidden; }
.ia-prop-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid #f1f3f5; font-size: 11.5px; font-weight: 800; color: #0b0d10; }
.ia-prop-b { padding: 11px 13px; }
.ia-prop-sum { display: block; margin-bottom: 10px; font-size: 11.5px; color: #6b7280; line-height: 1.55; }
.ia-diff { display: block; border: 1px solid #eceef1; border-radius: 8px; overflow: hidden; }
.ia-diff-r { display: block; padding: 8px 11px; font-size: 11.5px; line-height: 1.5; }
.ia-diff-r.cur { background: #fafafa; color: #6b7280; border-bottom: 1px solid #eceef1; }
.ia-diff-r.pro { background: #fff; color: #000; font-weight: 600; }
.ia-diff-k { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #b6bcc4; margin-bottom: 3px; }
.ia-prop-a { display: flex; gap: 8px; padding: 0 13px 12px; }
.ia-pbtn { font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 8px 14px; border: 1px solid #dfe3e8; color: #0b0d10; background: #fff; transition: transform .12s ease; }
.ia-pbtn.apply { background: #0b0d10; border-color: #0b0d10; color: #fff; }
.ia-prop-res { display: block; margin: 0 13px 12px; font-size: 11.5px; font-weight: 700; color: #0b0d10; }

/* the toast that lands after the change */
.ia-toast {
    position: absolute; left: 150px; bottom: 96px; width: 330px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #0b0d10; color: #fff;
    border-radius: 12px;
    font-size: 12px;
    transform: translate3d(0, 0, 170px);
    box-shadow: 0 20px 44px rgba(16,24,40,.35);
}
.ia-toast-a { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 5px 11px; }

/* ---- story ---- */
.ds-stage.armed .ia-plog,
.ds-stage.armed .ia-prop,
.ds-stage.armed .ia-toast { opacity: 0; }
.ds-stage.armed .ia-umsg,
.ds-stage.armed .ia-amsg { opacity: 0; transform: translateY(8px); }
.ds-stage.armed .ia-plog { opacity: 1; }
.ds-stage.armed .ia-pbusy { opacity: 0; }
.ds-stage.armed .ia-prop { transform: translateY(12px); }
.ds-stage.armed .ia-toast { transform: translate3d(0, 14px, 170px); }
.ds-stage.armed .ia-prop-res { display: none; }
.ds-stage.armed .ia-umsg,
.ds-stage.armed .ia-amsg,
.ds-stage.armed .ia-prop,
.ds-stage.armed .ia-toast,
.ds-stage.armed .ia-pbusy { transition: opacity .4s ease, transform .55s cubic-bezier(.16,.86,.3,1); }

.ds-stage.armed.s-sent .ia-umsg { opacity: 1; transform: none; }
.ds-stage.armed.s-think .ia-pbusy { opacity: 1; }
.ds-stage.armed.s-reply .ia-amsg { opacity: 1; transform: none; }
.ds-stage.armed.s-prop .ia-prop { opacity: 1; transform: none; }
.ds-stage.armed.s-press-apply .ia-pbtn.apply { transform: scale(.94); }
/* once applied the card dims and disables, exactly like the real one */
.ds-stage.armed.s-applying .ia-prop { opacity: .6; }
.ds-stage.armed.s-applying .ia-prop-res { display: block; }
.ds-stage.armed.s-applying .ia-prop-a { opacity: .5; }
.ds-stage.armed.s-applying .ia-pbusy { opacity: 0; }
.ds-stage.armed.s-applied .ia-prop-res::after { content: "Applied."; }
.ds-stage.armed.s-applying:not(.s-applied) .ia-prop-res::after { content: "Applying…"; }
.ds-stage.armed.s-toast .ia-toast { opacity: 1; transform: translate3d(0, 0, 170px); }
.ds-stage:not(.armed) .ia-prop-res::after { content: "Applied."; }
.ds-stage:not(.armed) .ia-prop { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .ds-stage.armed .ia-plog,
    .ds-stage.armed .ia-umsg,
    .ds-stage.armed .ia-amsg,
    .ds-stage.armed .ia-prop,
    .ds-stage.armed .ia-toast { opacity: 1; transform: none; transition: none; }
    .ds-stage.armed .ia-toast { transform: translate3d(0, 0, 170px); }
    .ds-stage.armed .ia-prop { opacity: .6; }
    .ds-stage.armed .ia-prop-res { display: block; }
    .ds-stage.armed .ia-prop-res::after { content: "Applied."; }
    .ds-stage.armed .ia-pbusy { opacity: 0; }
}

/* ===== Optimizations showcase ("Never wonder what to improve next.") =========
   Reproduces the real /suggestions screen. Status is carried by pill SHAPE, not
   hue, the way the real one does it: outline = in progress, solid black =
   published, solid red = rejected. */
.sg-h1 { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #0b0d10; }
.sg-sub { margin: 9px 0 20px; max-width: 680px; font-size: 12px; color: #8b919a; line-height: 1.65; }
.sg-head { display: flex; align-items: flex-start; gap: 12px; max-width: 600px; }
.sg-head-main { flex: 1; min-width: 0; }
.sg-auto { display: flex; align-items: center; gap: 11px; max-width: 690px; margin-bottom: 22px; padding: 13px 15px; border: 1px solid #e5e7eb; border-radius: 12px; }
.sg-auto-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #6b7280; }
.sg-auto-main { flex: 1; min-width: 0; }
.sg-auto-t { display: block; font-size: 12.5px; font-weight: 700; color: #0b0d10; }
.sg-auto-p { display: block; margin-top: 2px; font-size: 11px; color: #9ca3af; }
.sg-toggle { flex: 0 0 auto; position: relative; width: 34px; height: 19px; border-radius: 99px; background: #d1d5db; }
.sg-toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.sg-h2 { display: block; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #0b0d10; }
.sg-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; max-width: 690px; flex-wrap: wrap; }
.sg-tab { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
.sg-tab.on { background: #0b0d10; border-color: #0b0d10; color: #fff; }
.sg-tab-c { font-size: 10px; font-weight: 700; background: #f3f4f6; color: #6b7280; border-radius: 99px; padding: 1px 6px; }
.sg-tab.on .sg-tab-c { background: #fff; color: #0b0d10; }
.sg-types { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.sg-types-l { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-right: 3px; }
.sg-type { font-size: 11px; font-weight: 600; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.sg-type.on { background: #0b0d10; border-color: #0b0d10; color: #fff; }
/* Capped so the Status and Actions columns, which the story points at, land inside
   the visible part of the slab instead of off the right edge. The Status and Actions
   tracks are sized to the widest pill ("published") and the widest button row
   (View diff / Download / Publish): if either track is too small the right-aligned
   action row overflows LEFT and sits on top of the status pill. */
.sg-table { max-width: 690px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.sg-th, .sg-row { display: grid; grid-template-columns: minmax(0,1fr) 54px 96px 206px; gap: 12px; align-items: center; padding: 13px 15px; }
.sg-th > :nth-child(3), .sg-row > :nth-child(3) { display: none; }   /* impressions: no room */
.sg-th { background: #f9fafb; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.sg-row { border-top: 1px solid #f0f0f0; }
.sg-a { min-width: 0; }
.sg-a-t { display: block; font-size: 12.5px; font-weight: 600; color: #0b0d10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-a-u { display: block; margin-top: 2px; font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-a-b { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: #0b0d10; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 8px; }
.sg-m-v { display: block; font-size: 13px; font-weight: 700; color: #0b0d10; font-variant-numeric: tabular-nums; }
.sg-m-l { display: block; font-size: 10.5px; color: #9ca3af; }
.sg-pill { justify-self: start; font-size: 10.5px; font-weight: 600; border-radius: 99px; padding: 3px 10px; background: #fff; color: #0b0d10; border: 1px solid #0b0d10; white-space: nowrap; }
.sg-pill.done { background: #0b0d10; color: #fff; }
.sg-pill.bad { background: #e11d2a; border-color: #e11d2a; color: #fff; }
.sg-pill.grey { background: #f3f4f6; border-color: transparent; color: #374151; }
.sg-acts { display: flex; gap: 6px; justify-content: flex-end; min-width: 0; }
.sg-btn { font-size: 10px; font-weight: 700; border-radius: 7px; padding: 5px 8px; border: 1px solid #e5e7eb; background: #fff; color: #0b0d10; white-space: nowrap; transition: transform .12s ease; }
.sg-btn.go { background: #0b0d10; border-color: #0b0d10; color: #fff; }
.sg-btn.no { border-color: #e11d2a; color: #e11d2a; }

/* ---- story ---- */
.ds-stage.armed .sg-row { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .55s cubic-bezier(.16,.86,.3,1); }
.ds-stage.armed.s-rows .sg-row { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.ds-stage.armed .sg-scanning { display: none; }
.ds-stage.armed.s-scanning:not(.s-rows) .sg-scanning { display: inline-flex; }
.ds-stage.armed.s-scanning:not(.s-rows) .sg-scanlabel { display: none; }
.ds-stage.armed.s-press-scan .sg-scan { transform: scale(.95); border-color: #0b0d10; }
.ds-stage.armed.s-press-approve .sg-btn.go { transform: scale(.93); }
/* Row one walks pending -> approved -> rewriting -> ready as the agent drives it.
   The story only ever ADDS classes, so each step has to switch the previous one
   off with :not(), or all four pills (and both action groups) show at once. */
.ds-stage.armed .sg-r1 .sg-st,
.ds-stage.armed .sg-r1 .sg-act { display: none; }
.ds-stage.armed:not(.s-approved) .sg-r1 .sg-st.st-pending { display: inline-block; }
.ds-stage.armed.s-approved:not(.s-rewriting) .sg-r1 .sg-st.st-approved { display: inline-block; }
.ds-stage.armed.s-rewriting:not(.s-ready) .sg-r1 .sg-st.st-rewriting { display: inline-block; }
.ds-stage.armed.s-ready .sg-r1 .sg-st.st-ready { display: inline-block; }
.ds-stage.armed:not(.s-rewriting) .sg-r1 .sg-act.act-review { display: flex; }
.ds-stage.armed.s-rewriting:not(.s-ready) .sg-r1 .sg-act.act-busy { display: flex; }
.ds-stage.armed.s-ready .sg-r1 .sg-act.act-ready { display: flex; }
/* finished state without the script: row one is ready to publish */
.ds-stage:not(.armed) .sg-r1 .sg-st { display: none; }
.ds-stage:not(.armed) .sg-r1 .sg-st.st-ready { display: inline-block; }
.ds-stage:not(.armed) .sg-r1 .sg-act { display: none; }
.ds-stage:not(.armed) .sg-r1 .sg-act.act-ready { display: flex; }
.ds-stage:not(.armed) .sg-scanning { display: none; }
.ds-stage:not(.armed) .sg-scrim,
.ds-stage:not(.armed) .sg-modal { display: none; }


/* --- the diff modal: the actual before/after of the rewrite --- */
.sg-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sg-modal {
    position: absolute; left: 58px; top: 96px; width: 800px;
    background: #fff; border: 1px solid #e4e7ea; border-radius: 16px;
    text-align: left; overflow: hidden;
    transform: translate3d(0, 0, 190px);
    box-shadow: 0 40px 90px rgba(16,24,40,.32), 0 10px 22px rgba(16,24,40,.12);
}
.sg-mhead { display: flex; align-items: flex-start; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #f1f3f5; }
.sg-mhead-main { flex: 1; min-width: 0; }
.sg-mtitle { display: block; font-size: 14.5px; font-weight: 800; color: #0b0d10; }
.sg-murl { display: block; margin-top: 2px; font-size: 11px; color: #9ca3af; }
.sg-mx { flex: 0 0 auto; display: flex; color: #c2c7ce; }
.sg-why { display: flex; align-items: flex-start; gap: 9px; padding: 11px 18px; background: #f9fafb; border-bottom: 1px solid #f1f3f5; font-size: 11.5px; color: #4b5563; }
.sg-why .sg-a-b { flex: 0 0 auto; white-space: nowrap; }
.sg-why b { color: #0b0d10; }
.sg-cols { display: grid; grid-template-columns: 1fr 1fr; }
.sg-col { padding: 15px 18px; }
.sg-col.before { background: #fafafa; border-right: 1px solid #f1f3f5; }
.sg-col-k { display: block; margin-bottom: 11px; font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #b6bcc4; }
.sg-col.after .sg-col-k { color: #e11d2a; }
.sg-fk { display: block; margin: 10px 0 3px; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #c2c7ce; }
.sg-fv { display: block; font-size: 11.5px; line-height: 1.55; color: #6b7280; }
.sg-col.after .sg-fv { color: #0b0d10; }
.sg-col.after .sg-fv.hl { font-weight: 600; }
.sg-mfoot { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-top: 1px solid #f1f3f5; }
.sg-mnote { flex: 1; font-size: 11px; color: #9ca3af; }

.ds-stage.armed .sg-scrim,
.ds-stage.armed .sg-modal { opacity: 0; pointer-events: none; }
.ds-stage.armed .sg-modal { transform: translate3d(0, 16px, 190px) scale(.97); }
.ds-stage.armed .sg-scrim,
.ds-stage.armed .sg-modal { transition: opacity .4s ease, transform .5s cubic-bezier(.16,.86,.3,1); }
.ds-stage.armed.s-press-diff .sg-r1 .sg-btn.viewdiff { transform: scale(.93); border-color: #0b0d10; }
.ds-stage.armed.s-diff .sg-scrim { opacity: 1; }
.ds-stage.armed.s-diff .sg-modal { opacity: 1; transform: translate3d(0, 0, 190px) scale(1); }
/* the rewritten side lands a beat after the modal, so you read old then new */
.ds-stage.armed .sg-col.after .sg-fv,
.ds-stage.armed .sg-col.after .sg-fk { opacity: 0; transition: opacity .45s ease; }
.ds-stage.armed.s-after .sg-col.after .sg-fv,
.ds-stage.armed.s-after .sg-col.after .sg-fk { opacity: 1; }
/* nth-CHILD, not nth-of-type: every field in the column is a <span>, so
   nth-of-type would count the label spans too and never hit the values. */
.ds-stage.armed.s-after .sg-col.after > :nth-child(5) { transition-delay: .12s; }
.ds-stage.armed.s-after .sg-col.after > :nth-child(7) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .ds-stage.armed .sg-row { opacity: 1; transform: none; transition: none; }
    .ds-stage.armed .sg-scanning { display: none; }
    .ds-stage.armed .sg-r1 .sg-st { display: none; }
    .ds-stage.armed .sg-r1 .sg-st.st-ready { display: inline-block; }
    .ds-stage.armed .sg-r1 .sg-act { display: none; }
    .ds-stage.armed .sg-r1 .sg-act.act-ready { display: flex; }
    /* the modal is a transient beat, not an end state: leave it shut */
    .ds-stage.armed .sg-scrim,
    .ds-stage.armed .sg-modal { opacity: 0; transition: none; }
}

/* --- per-section CTA, sitting under the copy ------------------------------
   One button per showcase so a scrolling visitor always has an action in view.
   It lives in the copy column, not centred under the whole section: the grid
   collapses at 1180px and .ds-stage is 840px tall there, so anything placed
   outside .ds-inner lands most of a screen below the sentence that earns it.
   NOT named .ds-cta: that class is already the mock "Find opportunities now"
   button inside the Link Outreach slab. */
.ds-copy-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 1.75rem; }
/* .hero-cta ships margin: 0.5rem auto 0, and in a flex column an auto cross-axis
   margin beats align-items, so without this the button centres in the column. */
.ds-copy-cta .hero-cta.primary { margin: 0; }
.ds-copy-cta-note { margin: 0; font-size: 0.8rem; color: #6b7280; }
.ds-showcase:not(.ds-light) .ds-copy-cta-note { color: #9ca3af; }
/* The primary button is BLACK (--cta-brand-bg resolves to --color-ink #000) with a
   5px red strip. On the #0f0f0f bands that is ~1.1:1, so the silhouette vanishes
   and it reads as underlined text; the red fill otherwise only arrives on :hover,
   which never fires on touch. Fill it red on the dark bands. */
.ds-showcase:not(.ds-light) .ds-copy-cta .hero-cta.primary {
    background: var(--cta-brand-strip) bottom / 100% 5px no-repeat, #e11d2a;
    box-shadow: 0 6px 22px rgba(0,0,0,.45) !important;
}
.ds-showcase:not(.ds-light) .ds-copy-cta .hero-cta.primary:hover {
    background: var(--cta-brand-strip) bottom / 100% 5px no-repeat, #b3141f !important;
}
@media (max-width: 700px) { .ds-copy-cta { margin-top: 1.4rem; } }

/* ===== Mobile: the slab becomes an upright, fitted card ======================
   Below 700px the tilted, bleeding treatment stops working: a 1560px window
   scaled into a 375px viewport renders the app's 13px type at about 6px, so you
   get texture instead of a product. So on phones we drop the perspective, the
   tilt, the bleed and the sidebar, let the window reflow to the viewport width at
   full type size, and put the floating panels into normal flow underneath it.
   The stories still run: they only ever touch opacity, transform and display on
   the inner elements, none of which depend on the 3D layer.
   This block is last in the stylesheet on purpose, so it wins on source order
   against the earlier tiers at equal specificity. */
@media (max-width: 700px) {
    #link-outreach.ds-showcase,
    #growth-analytics.ds-showcase,
    #in-app-agent.ds-showcase,
    #agent-suggestions.ds-showcase { padding: 2.75rem 0 3rem; }
    .ds-inner { --edge: 1.25rem; row-gap: 1.75rem; }
    .ds-copy { max-width: none; }

    .ds-stage { height: auto; margin-right: 0; }
    .ds-glow { display: none; }
    .ds-scene { position: static; width: auto; margin-top: 0; perspective: none; }
    .ds-tilt {
        --ry: 0deg; --rz: 0deg; --sc: 1; --enter: 0px;
        transform: none; transform-origin: 50% 50%; opacity: 1;
    }
    .ds-stage.armed .ds-tilt { opacity: 1; transition: none; }
    .ds-float { position: static; }
    .ds-stage.is-live .ds-float { animation: none; }
    .ds-cursor { display: none; }

    .ds-app {
        width: 100%; height: auto;
        grid-template-columns: 1fr;
        border-radius: 14px;
        box-shadow: 0 2px 6px rgba(16,24,40,.05), 0 14px 34px rgba(16,24,40,.10);
    }
    .ds-showcase:not(.ds-light) .ds-app { box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.45); }
    .ds-sb { display: none; }
    .ds-main { padding: 18px 16px; }
    .ds-main::after { display: none; }   /* nothing is cut off, so no fade */
    .ds-h1 { font-size: 19px; }
    .ds-sub { font-size: 11.5px; margin-bottom: 16px; }
    .ds-actions { flex-wrap: wrap; gap: 9px; }
    .ds-hint, .ds-pilot { display: none; }
    .ds-note { font-size: 10.5px; }

    /* The floating panels drop into normal flow, full width, untransformed. The
       1180px tier hides .lo-agent / .lo-mail because they had nowhere to go on a
       tilted slab; here they DO, so switch them back on explicitly. */
    .lo-agent, .lo-mail, .ia-panel, .ia-toast, .sg-modal {
        position: static; width: auto; max-width: none;
        transform: none;
        margin-top: 14px;
    }
    .lo-agent { display: flex; }
    .lo-mail { display: block; }
    .sg-scrim { display: none; }

    /* --- link outreach --- */
    .ds-row { flex-wrap: wrap; }
    .ds-row:not(.focus) { display: none; }        /* one worked example is enough */
    .lo-agent { order: 2; }
    .lo-agent-chips { display: none; }
    .ds-stage.armed:not(.s-sent) .lo-agent-chips { display: none; }
    .lo-agent-bar { height: 46px; padding: 0 6px 0 14px; }
    .lo-agent-text { font-size: 12.5px; }
    .lo-mail { border-radius: 14px; }

    /* --- analytics: keep the numbers and the engines, drop the wide table --- */
    .ga2-headbtns { display: none; }
    .ga2-tiles { grid-template-columns: 1fr 1fr; }
    .ga2-tile-v { font-size: 18px; }
    .ga2-chart, .ga2-chart svg { height: 96px; }
    .ga2-tabs, .ga2-th, .ga2-tr, .ga2-note, .ga2-prompts, .ga2-scanrow { display: none; }
    .ga2-engines { grid-template-columns: 1fr; }
    .ga2-pane-ai { max-width: none; }

    /* --- in-app agent: the panel IS the section, so give it the room --- */
    .ia-doc { grid-template-columns: 1fr; gap: 0; }
    .ia-toc, .ia-quote, .ia-fig.small, .ia-cap + .ia-p { display: none; }
    .ia-title { font-size: 19px; }
    .ia-fig { height: 116px; }
    /* on mobile the panel is in flow underneath, so it is always open */
    .ds-stage.armed .ia-panel { opacity: 1; transform: none; pointer-events: auto; }
    .ia-panel { border-radius: 14px; }
    .ia-diff-r { font-size: 11px; }
    .ia-toast { border-radius: 12px; }

    /* --- optimizations: the table stacks into cards --- */
    .sg-h1 { font-size: 19px; }
    .sg-sub { font-size: 11.5px; margin-bottom: 16px; }
    .sg-auto, .sg-types { display: none; }
    .sg-tabs { gap: 6px; }
    .sg-tab:nth-child(n+4) { display: none; }
    .sg-table { max-width: none; }
    .sg-th { display: none; }
    .sg-row { display: block; padding: 13px 14px; }
    .sg-row > :nth-child(2) { display: none; }    /* position, no room */
    .sg-table .sg-row:nth-child(n+4) { display: none; }   /* two worked rows is enough */
    .sg-col > :nth-child(4), .sg-col > :nth-child(5) { display: none; }  /* meta desc */
    .sg-pill { margin-top: 9px; }
    .sg-acts { margin-top: 10px; justify-content: flex-start; flex-wrap: wrap; }
    .sg-btn { font-size: 11px; padding: 6px 10px; }
    .sg-modal { border-radius: 14px; }
    .sg-cols { grid-template-columns: 1fr; }
    .sg-col.before { border-right: none; border-bottom: 1px solid #f1f3f5; }
    .sg-mfoot { flex-wrap: wrap; }
    .sg-mnote { flex: 1 0 100%; margin-bottom: 8px; }
}

/* ===== Founder support, directly above the pricing table ==============
   Two 504x504 headshots overlapped into one unit, so the pair reads as
   "both of us" rather than two separate people. The same pair repeats
   at 26px inside the pricing table (.plan-col-founder-faces, styles.css)
   so the promise and the price line are visibly the same offer. */
.fsup { padding: 3.5rem 0 0.5rem; }
.fsup-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 1.75rem;
    max-width: 940px;
    margin: 0 auto;
    padding: 2.25rem 2.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.fsup-faces { display: flex; align-items: center; padding-top: .3rem; }
.fsup-face {
    width: 78px; height: 78px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    background: #f1f3f5;
}
.fsup-face + .fsup-face { margin-left: -26px; }
.fsup-eyebrow {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #e11d2a; margin: 0 0 .5rem;
}
.fsup-title {
    font-size: 1.5rem; font-weight: 800; color: #111;
    line-height: 1.25; margin: 0 0 .85rem;
    /* Without this the hyphen in "Co-Founders" takes the line break. */
    text-wrap: balance;
}
.fsup-lede {
    font-size: 1rem; font-weight: 600; color: #111;
    line-height: 1.55; margin: 0 0 .75rem;
}
.fsup-body { font-size: .92rem; color: #555; line-height: 1.6; margin: 0 0 1.1rem; }
.fsup-points {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
.fsup-points li {
    position: relative; padding-left: 1.4rem;
    font-size: .88rem; font-weight: 600; color: #111; line-height: 1.45;
}
.fsup-points li::before {
    content: '✓'; position: absolute; left: 0;
    font-weight: 800; color: #e11d2a;
}

/* On phones the faces stack above the copy instead of beside it. */
@media (max-width: 700px) {
    .fsup { padding: 2.5rem 0 0; }
    .fsup-card {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.6rem 1.35rem;
        border-radius: 14px;
    }
    .fsup-faces { padding-top: 0; }
    .fsup-face { width: 62px; height: 62px; }
    .fsup-face + .fsup-face { margin-left: -20px; }
    .fsup-title { font-size: 1.2rem; }
    .fsup-lede { font-size: .95rem; }
}