/* ============================================================
   HERO WITH USE CASES (home page, 2026-10-23). Under the hero buttons,
   set well apart from them: a strip of use-case tabs as wide as the stage,
   over the PROCESS.md animation from "Workflow automation, made personal and
   human." (#process-md, css/process-explainer.css), one stage per use case
   (tools/build-hero-usecases.py). The stages share one grid cell, so the
   hero keeps the tallest one's height; the hidden ones are .is-off. The whole
   block enters last in the hero cascade (css/v8.css: title, description,
   buttons), on the cue the app used; js/process-explainer.js holds the first
   play for data-start ms so it never plays unseen. Also here: the
   description's pink sweep, and the flowchart box's slightly darker border.
   ============================================================ */
.hu { margin-top: 96px; }
.hero--static .hu {
    opacity: 0;
    transform: translateY(10px);
    animation: hero-compare-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 1020ms forwards;
}

/* the tabs: one strip as wide as the stage under it, a cell per use case.
   Each names the tool that starts the workflow (its logo is the trigger's in
   the PROCESS.md below), the use case and what starts it; the line under the
   open one fills while its stage plays, then the next one opens. */
.hu-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px;   /* four tabs since 26 Oct 2026 (Dom) */
    max-width: 1136px; margin: 0 auto;
}
.hu-tab {
    position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 0 0 20px; border: 0; background: none; text-align: left; cursor: pointer;
    font: inherit; color: var(--muted);
    transition: color .22s ease;
}
.hu-tab-ico {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 14px; background: #fff; border: 1px solid var(--line);
    transition: border-color .22s ease, box-shadow .22s ease;
}
.hu-tab-ico img, .hu-tab-ico svg { width: 22px; height: 22px; display: block; transition: filter .22s ease, opacity .22s ease; }
.hu-tab-ico svg { color: var(--brand-magenta); }
.hu-tab:not([aria-selected="true"]) .hu-tab-ico img,
.hu-tab:not([aria-selected="true"]) .hu-tab-ico svg { filter: grayscale(1); opacity: .7; }
.hu-tab-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hu-tab-t b { font-size: 1.1875rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; color: #3F3846; transition: color .22s ease; }   /* bigger and darker, so every tab reads (Dom, 26 Oct 2026) */
.hu-tab-t small {
    font-size: .875rem; line-height: 1.35; color: #8A8390;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .22s ease;
}
.hu-tab:hover { color: var(--body); }
.hu-tab:hover .hu-tab-t b { color: var(--ink); }
.hu-tab:hover .hu-tab-ico img, .hu-tab:hover .hu-tab-ico svg { opacity: .8; }
.hu-tab[aria-selected="true"] { color: var(--ink); }
/* the open tab's name takes its logo's colour (--brand on the tab), Dom */
.hu-tab[aria-selected="true"] .hu-tab-t b { color: var(--brand, var(--ink)); }
.hu-tab[aria-selected="true"] .hu-tab-t small { color: var(--body); }
.hu-tab[aria-selected="true"] .hu-tab-ico { border-color: #DCD3D0; box-shadow: 0 6px 16px -10px rgba(38, 20, 40, .35); }
.hu-tab:focus-visible { outline: 2px solid #4C6BEE; outline-offset: 4px; border-radius: 8px; }
.hu-tab-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden;
    border-radius: 2px; background: #E9E1DE; transition: background .22s ease;
}
.hu-tab[aria-selected="true"] .hu-tab-bar { background: #F3DCF3; }
.hu-tab-bar i {
    position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, var(--brand-magenta), #F27BE6);
}

/* the stages, one on top of the other */
.hu-stack { display: grid; margin-top: 32px; }
.pmx--hero { grid-area: 1 / 1; padding: 0; border-top: 0; transition: opacity .35s ease, visibility 0s; }
.pmx--hero.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s .2s; }

/* a trigger from your own system: the webhook glyph where a tool's logo sits */
.pmx-trig-ico { width: 15px; height: 15px; flex: none; transition: opacity .4s; }
.pmx.is-anim .pmx-line:not(.is-in) .pmx-trig-ico { opacity: 0; }

@media (max-width: 1179px) {
    /* the strip no longer fits: a full-width rail the tabs scroll along */
    .hero { overflow-x: clip; }
    .hu-tabs {
        display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
        margin: 0 calc(50% - 50vw); padding: 0 16px; scroll-padding: 0 16px;
    }
    .hu-tabs::-webkit-scrollbar { display: none; }
    .hu-tab { flex: 0 0 auto; min-width: 196px; scroll-snap-align: start; }
}
@media (max-width: 767px) {
    .hu { margin-top: 56px; }
    .hu-stack { margin-top: 24px; }
    .pmx--hero { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--static .hu { opacity: 1; transform: none; animation: none; }
    .pmx--hero, .pmx--hero.is-off { transition: none; }
    .hu-tab[aria-selected="true"] .hu-tab-bar i { transform: none; }
}

/* the column labels: the same height, so both columns start level; the
   PROCESS.md one reads "Agentic Automation" in a black-bordered box */
.pmx--hero .pmx-label { display: flex; align-items: center; justify-content: center; min-height: 30px; }
.pmx-label--box span {
    display: inline-block; padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 8px; line-height: 1.2;
    /* a light wash of the logo's three colours, orange, magenta and blue (Dom; then a bit lighter) */
    background: linear-gradient(90deg, rgba(238, 132, 76, .09) 0%, rgba(238, 76, 238, .08) 50%, rgba(76, 107, 238, .09) 100%), #fff;
}

/* the flowchart box: a slightly darker border than the section's */
.pmx--hero .pmx-canvas { border-color: #D9D0CD; }

/* the description: a pink band flies through the text once it has landed,
   then again every 6s. The text is the gradient (background-clip: text), so
   the band only shows on the letters. */
.hero-desc--sweep {
    background-image: linear-gradient(100deg, var(--body) 0%, var(--body) 45%, var(--brand-magenta) 48%, var(--pink-core) 50%, var(--brand-magenta) 52%, var(--body) 55%, var(--body) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    /* the text is painted from the background, which ends at the box: room
       under the last line so descenders (the g of "English") are not cut */
    padding-bottom: .14em; margin-bottom: -.14em;
}
.hero--static .hero-desc.hero-desc--sweep {
    animation: hero-compare-in 520ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards,
               hero-desc-sweep 8s cubic-bezier(0.45, 0, 0.25, 1) 900ms infinite;
}
/* the band takes about 3s to cross (Dom: a bit slower), then rests */
@keyframes hero-desc-sweep {
    0% { background-position: 100% 0; }
    40%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-desc--sweep { background: none; color: var(--body); -webkit-text-fill-color: currentColor; }
    .hero--static .hero-desc.hero-desc--sweep { animation: none; opacity: 1; transform: none; }
}

/* .hero-bg: the same glow and grid on a page without the home hero, such as
   integrations.html (Dom, 26 Oct 2026). */
/* ---- backgrounds swapped (Dom, 23 Oct 2026): the hero takes the glow and
   the faint grid of "Ready-to-run workflows" (css/workflow-packs.css .wfp),
   its four colours faint (Dom: less visible twice; about a third of the section's), and that section takes
   the hero's plain page colour ---- */
.hero.hero--static, .hero-bg { position: relative; isolation: isolate; }
.hero.hero--static::before, .hero-bg::before, .hw-band > section#how-it-works.grid-band::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    /* heights in px (the home hero's, 1440px tall), so a taller first section,
       such as How it works, shows the same glow (Dom, 26 Oct 2026) */
    display: block;
    background:
        radial-gradient(38% 432px at 18% 317px, rgba(245, 128, 56, 0.07), transparent 70%),
        radial-gradient(40% 460px at 82% 259px, rgba(213, 59, 213, 0.07), transparent 70%),
        radial-gradient(45% 504px at 70% 1122px, rgba(124, 92, 255, 0.06), transparent 70%),
        radial-gradient(35% 432px at 22% 1180px, rgba(76, 107, 238, 0.04), transparent 70%);
}
.hero.hero--static::after, .hero-bg::after, .hw-band > section#how-it-works.grid-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* the 56px grid with the Askpilot mark, in grey and faint (Dom: not colourful), at
       every fourth crossing (Dom, 26 Oct 2026: as the Lower costs pattern) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='224'%3E%3Cpath d='M0 .5H224M0 56.5H224M0 112.5H224M0 168.5H224M.5 0V224M56.5 0V224M112.5 0V224M168.5 0V224' stroke='%2316121A' stroke-opacity='.05'/%3E%3Csvg x='106.00' y='106.46' width='13.00' height='12.08' viewBox='0 0 490 455.462' opacity='.11' fill='%2316121A'%3E%3Cg transform='translate%28-66.191 -400.36%29'%3E %3Cpath d='M330.635,237.129l-.569-.957-32.208-65.115q-3.3-6.675-6.131-12.5c-12.521-25.611-18.808-38.443-27.707-43.746-8.9-5.277-24.37-5.122-54.948-4.734H182.528c-18.575,0-36.606,0-54.612-.052h-.155A30,30,0,0,0,98.5,125.189c-14.694,27.578-28.483,55.052-43,84.182q-6.791,13.582-13.556,27.138l.078.052-4.838,8.382a250.483,250.483,0,0,0,70.134,36.089l.362-.776h0l-.052-.052q6.558-13.077,12.987-25.948c13.866-27.707,26.957-53.862,40.487-80.534,6.959-13.659,15.522-20.619,25.43-20.619h0c9.857,0,18.368,6.856,25.223,20.36,11.46,22.636,22.895,45.79,33.916,68.142q6.83,13.892,13.737,27.733c1.863,3.751,3.751,7.476,5.666,11.305l.078-.052v.052l.233.492a250.262,250.262,0,0,0,69.617-35.7c-.129-.259-3.958-8.046-4.243-8.408M44.3,235.163v-.052h0v.052' transform='translate%28125.195 574.688%29'/%3E %3Cpath d='M221.879,140.976c-8.434,15.833-16.816,31.769-25.482,48.17l-10.5,19.894-1.889,3.7c-13.918,27.138-20.9,40.849-29.932,46.308s-23.412,4.838-52.361,3.725l-14.1-.517L12.848,259.72H2.268A249.61,249.61,0,0,1,4.13,181h0c4.294.129,8.537.31,12.806.414l31.406,1.061c25.327.854,51.507,1.733,77.248,2.38,15.393.362,25.534-3.881,30.139-12.573,4.6-8.718,2.406-19.635-6.674-32.286C131.049,114.9,113.25,90.426,94.417,64.5q-7.412-10.167-14.9-20.489l.233-.207A250.245,250.245,0,0,1,144.89.01l3.1,4.734h.052q9.042,12.418,18.083,24.861c19.454,26.724,37.874,52.025,55.8,78.128a29.905,29.905,0,0,1-.078,33.243' transform='translate%2866.186 400.35%29'/%3E %3Cpath d='M106.743,140.945c8.434,15.833,16.816,31.769,25.482,48.17l10.5,19.894,1.889,3.7c13.918,27.138,20.9,40.849,29.932,46.308s23.412,4.838,52.361,3.725l14.1-.517,74.765-2.509H326.38a249.769,249.769,0,0,0-1.863-78.749h0c-4.294.129-8.537.31-12.806.414l-31.406,1.061c-25.327.854-51.507,1.733-77.248,2.38-15.393.362-25.534-3.881-30.139-12.573s-2.406-19.635,6.675-32.286c18.005-25.094,35.8-49.567,54.638-75.489q7.412-10.167,14.9-20.489l-.233-.207A249.125,249.125,0,0,0,183.732.03l-3.1,4.734h-.052q-9.042,12.418-18.083,24.861c-19.454,26.724-37.874,52.025-55.8,78.128A29.905,29.905,0,0,0,106.768,141' transform='translate%28227.549 400.372%29'/%3E %3C/g%3E%3C/svg%3E%3C/svg%3E");
    background-size: 224px 224px; background-position: 50% 0;
    /* the grid at full strength across the width, as How it works had it
       (Dom, 26 Oct 2026: same opacity on every page), fading out under the
       title; in px so every page fades at the same height */
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 320px, transparent 700px);
            mask-image: linear-gradient(180deg, #000 0, #000 320px, transparent 700px);
}
.wfs.wfp { background: var(--cream); }
.wfs.wfp::before, .wfs.wfp::after { display: none; }
/* the packages box: the outline and lift of the How it works box's left
   card (css/ai-handover.css .ho-card), Dom */
.wfs.wfp .wfp-viewport {
    border-radius: 20px; border: 1px solid #E3DCDA;
    box-shadow:
        0 1px 2px rgba(20, 17, 26, 0.06),
        0 4px 10px -4px rgba(20, 17, 26, 0.08),
        0 20px 40px -20px rgba(20, 17, 26, 0.22);
}

/* under the stage: a border-only note that every workflow is a PROCESS.md,
   with a link to the guide (Dom: "learn more about PROCESS.md") */
.hu-md {
    display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%;
    margin: 36px auto 0; padding: 10px 12px 10px 10px;
    border: 1.5px dashed #CDBFCB; border-radius: 14px; background: transparent;
    font-size: .9375rem; line-height: 1.4; color: var(--body);
}
.hu-md-ico {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    background: var(--pink-wash); border: 1px solid var(--pink-surface); color: var(--pink-deep);
}
.hu-md-ico svg { width: 17px; height: 17px; }
.hu-md-t b { font-weight: 750; color: var(--ink); }
.hu-md-a {
    flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 6px 4px 6px 10px;
    font-weight: 700; color: var(--pink-deep); text-decoration: none; white-space: nowrap;
}
.hu-md-a svg { width: 14px; height: 14px; transition: transform var(--t-fast, 160ms); }
.hu-md-a:hover svg { transform: translateX(2px); }
.hu-md-a:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 600px) {
    .hu-md { flex-wrap: wrap; justify-content: center; text-align: center; margin-top: 28px; padding: 12px 14px; }
    .hu-md-ico { display: none; }
    .hu-md-a { margin-left: 0; }
}