/* ============================================================
   Askpilot — use-case page vocabulary.
   ------------------------------------------------------------
   A use-case page runs the same V8 shell as the industry pages,
   plus two things they do not have: a full-width feature block
   (a headline, a line of copy, then a product animation running
   underneath at full width) and the kept call-intelligence
   demos.

   This file exists so the use-case pages can drop tailwind.css
   and main.css entirely. It defines only what those two used to
   supply here: the section rhythm, the feature-block type, and
   a couple of spacing shims. Everything else comes from v8.css.
   ============================================================ */

/* The stack of feature blocks inside one section. The gap is the
   section rhythm, not a margin on each block, so blocks can be
   added or reordered without the spacing drifting. */
.uc-stack {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
@media (min-width: 640px) {
    .uc-stack { margin-top: 64px; gap: 96px; }
}

/* A feature block: copy left, product underneath at full width. */
.uc-feature-copy { max-width: 768px; }

/* Same type as the capability-panel headline (.hx-panel .pl-title), so a
   feature headline and a panel headline read as the same rank of thing.
   Left-aligned rather than centred, because the copy block it heads is. */
.uc-feature-h {
    margin-top: 12px;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.12;
    font-weight: 780;
    letter-spacing: -0.024em;
    color: var(--ink);
    text-wrap: balance;
}
.uc-feature-p {
    margin-top: 12px;
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--body);
    text-wrap: pretty;
}
/* The animation under a feature block, and anything else that sits
   a section-heading's distance below what precedes it. */
.ucd-gap { margin-top: 32px; }
.uc-mt   { margin-top: 48px; }
@media (min-width: 640px) {
    .ucd-gap { margin-top: 48px; }
    .uc-mt   { margin-top: 64px; }
}

/* ------------------------------------------------------------
   Ported from brand.css, which this page no longer loads. These
   are the only rules in it that the kept demos depended on: the
   product-window frame (white window, cream ring, 1px ink
   outline) and the ink card borders. Without them the demos keep
   their layout but lose the frame that makes them read as
   product rather than markup.
   ------------------------------------------------------------ */
.uc-sec .hsd-left,
.uc-sec .hsd-right {
    margin: 12px;
    border-radius: 18px;
    box-shadow:
        0 0 0 10px var(--cream),
        0 0 0 11px var(--ink),
        0 30px 60px -30px rgba(38, 20, 40, 0.24);
}
/* The uncertain demo's right pane is a transparent stage; the .unc-desk
   window inside it carries the frame, so the stage itself stays unringed. */
.uc-sec #unc-demo .hsd-right { box-shadow: none; margin: 12px; }
.uc-sec #unc-demo .unc-desk {
    border-radius: 18px;
    box-shadow:
        0 0 0 10px var(--cream),
        0 0 0 11px var(--ink),
        0 30px 60px -30px rgba(38, 20, 40, 0.24);
}
.uc-sec .wy-card { border-color: var(--ink); }

.uc-sec .hsd-frame { background: var(--surface); }
/* .wy-stage keeps the mint gradient why-askpilot.css gives it — the same
   one the IVA control cards use. Overriding it here to a neutral token
   flattened the cards and broke that match. */

/* ------------------------------------------------------------
   The partnership section. The industry pages fill this slot
   with a two-card credential grid beside a quote; a use-case
   page has one thing to prove, so it centres a single citation
   under the partner's own logo.
   ------------------------------------------------------------ */
.origin--partner > .wrap {
    display: grid;
    justify-items: center;
    text-align: center;
}
.origin-partner-logo {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 24px;
}
.origin--partner .origin-title { text-wrap: balance; }
/* Outside a .cred-card, .cred-cite is just a footer row with a divider above
   it. Standing alone it has to be the card. Every value below is taken from
   the same citation on /integrations/callswitchone.html (.cs-cite), measured
   rather than eyeballed, so the two render identically. */
.origin-partner-cite {
    margin-top: 40px;
    max-width: 700px;
    text-align: left;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.origin-partner-cite:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -16px rgba(22, 18, 26, 0.4);
}
.origin-partner-cite small {
    font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted);
}
.origin-partner-cite b {
    margin-top: 2px;
    font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink);
}
.origin-partner-cite svg { width: 18px; height: 18px; margin-left: 2px; color: #9CA3AF; }
.origin-partner-cite:hover svg { color: var(--ink); transform: translate(1px, -1px); }
.origin-partner-cite:hover b { color: var(--ink); }
/* the source's own mark, in a tile, so the citation reads as coming from them */
.origin-partner-ico {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid #EEF0F5;
    border-radius: 11px;
}
.origin-partner-ico img { width: 24px; height: 24px; display: block; }
@media (max-width: 767px) {
    .origin-partner-logo { height: 22px; margin-bottom: 18px; }
    .origin-partner-cite { margin-top: 28px; }
    .origin--partner .origin-title br { display: none; }
}