/* v10.5.72-forge-page: the Forge product page — design 2 ("Katalog").

   Everything lives under .agfp, apart from the handful of overrides at the end that seat
   the .agfg tester sign-up on this page. The tokens are declared on .agfp, never on :root.

   The page runs inside the site theme, whose own rules reach bare elements (h1, p, a,
   table, figure …) and whose Elementor kit reaches them through a body class. So nothing
   here is written against a bare element: every rule is two classes deep, which outweighs
   both, and link colours carry !important the same way plugins.css does.

   Palette as the plugin: background #201F22, card #2B292E, display #111012, text #E9E6E2,
   secondary #9C9792, label #6A6661. Ember #F0752E is the only accent and means one thing:
   active or modulated. Two radii only, 0 and 3px. Seven type sizes, no fractions. */

.agfp {
    --agfp-bg: #201F22;
    --agfp-card: #2B292E;
    --agfp-display: #111012;
    --agfp-text: #E9E6E2;
    --agfp-second: #9C9792;
    --agfp-label: #6A6661;
    --agfp-quiet: #474441;
    --agfp-accent: #F0752E;

    --agfp-hair: rgba(255, 255, 255, .07);
    --agfp-hair-soft: rgba(255, 255, 255, .045);
    --agfp-shadow: 0 0 0 1px var(--agfp-hair), 0 28px 64px -24px rgba(0, 0, 0, .9);

    --agfp-f1: 64px;
    --agfp-f2: 40px;
    --agfp-f3: 22px;
    --agfp-f4: 19px;
    --agfp-f5: 16px;
    --agfp-f6: 14px;
    --agfp-f7: 12px;

    --agfp-w-wide: 1280px;
    --agfp-w-mid: 1040px;
    --agfp-w-narrow: 640px;
    --agfp-gutter: 32px;
    --agfp-sec: 80px;
    --agfp-r: 3px;

    --agfp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ the field */

/* The dark field runs the full width of the window whatever the theme's content column
   is: the margins pull it out to the viewport edges. --agfp-sb is the width of a classic
   scrollbar (set by forge-page.js), because 100vw counts it and the page must not. */
.agfp.agfp {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw + var(--agfp-sb, 0px) / 2) !important;
    margin-right: calc(50% - 50vw + var(--agfp-sb, 0px) / 2) !important;
    padding: 0 0 96px;
    background: var(--agfp-bg);
    color: var(--agfp-text);
    font-family: var(--agfp-font);
    font-size: var(--agfp-f4);
    font-weight: 400;
    line-height: 1.58;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

/* before the script has measured the scrollbar, the page still must not scroll sideways */
:root:has(.agfp) { overflow-x: clip; }

.agfp *,
.agfp *::before,
.agfp *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ containers */

.agfp .agfp-wide,
.agfp .agfp-mid,
.agfp .agfp-narrow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--agfp-gutter);
    padding-right: var(--agfp-gutter);
}

.agfp .agfp-wide { max-width: calc(var(--agfp-w-wide) + var(--agfp-gutter) * 2); }
.agfp .agfp-mid { max-width: calc(var(--agfp-w-mid) + var(--agfp-gutter) * 2); }
.agfp .agfp-narrow { max-width: calc(var(--agfp-w-narrow) + var(--agfp-gutter) * 2); }

/* ------------------------------------------------------------------ type */

.agfp .agfp-h1,
.agfp .agfp-h2,
.agfp .agfp-h3 {
    margin: 0;
    padding: 0;
    font-family: var(--agfp-font);
    font-weight: 600;
    color: var(--agfp-text);
    text-transform: none;
}

.agfp .agfp-h1 { font-size: var(--agfp-f1); line-height: 1.02; letter-spacing: -.028em; max-width: 12em; }
.agfp .agfp-h2 { font-size: var(--agfp-f2); line-height: 1.12; letter-spacing: -.010em; }
.agfp .agfp-h3 { font-size: var(--agfp-f3); line-height: 1.32; letter-spacing: -.006em; }

.agfp .agfp-lead,
.agfp .agfp-intro-text,
.agfp .agfp-body,
.agfp .agfp-li,
.agfp .agfp-cap,
.agfp .agfp-eyebrow,
.agfp .agfp-num,
.agfp .agfp-facts,
.agfp .agfp-mod-desc,
.agfp .agfp-faq-a,
.agfp .agfp-footline {
    margin: 0;
    padding: 0;
    font-family: var(--agfp-font);
    font-weight: 400;
}

.agfp .agfp-lead { font-size: var(--agfp-f3); line-height: 1.46; letter-spacing: -.006em; color: var(--agfp-second); max-width: 27em; }
.agfp .agfp-body { font-size: var(--agfp-f4); line-height: 1.58; color: var(--agfp-second); }
.agfp .agfp-cap { font-size: var(--agfp-f6); line-height: 1.5; letter-spacing: .003em; color: var(--agfp-label); margin-top: 12px; }

.agfp .agfp-eyebrow {
    font-size: var(--agfp-f7);
    line-height: 1.4;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-label);
    font-weight: 600;
}

.agfp .agfp-num {
    font-size: var(--agfp-f7);
    line-height: 1.4;
    letter-spacing: .10em;
    color: var(--agfp-quiet);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agfp .agfp-num-state { color: var(--agfp-label); }

/* ------------------------------------------------------------------ pictures */

.agfp .agfp-figure { margin: 0; padding: 0; }

.agfp .agfp-plate {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: var(--agfp-shadow);
    background: var(--agfp-display);
}

/* ------------------------------------------------------------------ top bar: notices, language */

.agfp .agfp-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px 24px;
    padding-top: 24px;
}

.agfp .agfp-notices { flex: 1 1 320px; min-width: 0; }

.agfp .agfp-lang {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f7);
    line-height: 1.4;
    letter-spacing: .10em;
    font-weight: 600;
    color: var(--agfp-label);
}

.agfp .agfp-lang-on { color: var(--agfp-text); }
.agfp .agfp-lang-sep { color: var(--agfp-quiet); }

.agfp .agfp-lang .agfp-lang-link {
    color: var(--agfp-label) !important;
    text-decoration: none !important;
    border: 0;
    box-shadow: none;
    background: none;
}

.agfp .agfp-lang .agfp-lang-link:hover,
.agfp .agfp-lang .agfp-lang-link:focus-visible { color: var(--agfp-text) !important; }

/* ------------------------------------------------------------------ masthead */

.agfp .agfp-masthead { padding-top: 40px; }

.agfp .agfp-mark {
    width: 272px;
    max-width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--agfp-display);
    box-shadow: 0 0 0 1px var(--agfp-hair);
}

.agfp .agfp-mark .agfp-mark-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 0%;
}

.agfp .agfp-title { margin-top: 32px; display: grid; gap: 8px; }

.agfp .agfp-facts {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: var(--agfp-f7);
    line-height: 1.4;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agfp .agfp-fact { display: inline-flex; align-items: center; gap: 24px; }
.agfp .agfp-fact::after { content: ""; width: 1px; height: 10px; background: var(--agfp-quiet); }
.agfp .agfp-fact:last-child::after { display: none; }

.agfp .agfp-hero { margin-top: 48px; }

.agfp .agfp-intro { margin-top: var(--agfp-sec); }

.agfp .agfp-intro-text {
    font-size: var(--agfp-f3);
    line-height: 1.46;
    letter-spacing: -.006em;
    color: var(--agfp-text);
}

/* ------------------------------------------------------------------ sections */

.agfp .agfp-sections { margin-top: var(--agfp-sec); }
.agfp .agfp-section { padding-top: var(--agfp-sec); }
.agfp .agfp-sections > .agfp-section:first-child { padding-top: 0; }

.agfp .agfp-grid {
    display: grid;
    grid-template-columns: minmax(0, 27em) minmax(0, 1.42fr);
    gap: 24px 72px;
    align-items: start;
}

.agfp .agfp-flip .agfp-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 27em); }
.agfp .agfp-flip .agfp-text { order: 2; }
.agfp .agfp-flip .agfp-media { order: 1; }

.agfp .agfp-text { max-width: 27em; min-width: 0; }
.agfp .agfp-text .agfp-h2 { margin-top: 8px; }
.agfp .agfp-text .agfp-body { margin-top: 16px; }

.agfp .agfp-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.agfp .agfp-list .agfp-li {
    position: relative;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    font-size: var(--agfp-f5);
    line-height: 1.6;
    letter-spacing: .002em;
    color: var(--agfp-second);
}

.agfp .agfp-list .agfp-li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 1px;
    background: var(--agfp-quiet);
}

.agfp .agfp-list .agfp-li::marker { content: none; }

.agfp .agfp-media { display: grid; gap: 24px; min-width: 0; }

/* a 1:1 crop of a larger shot: the slot strip at double scale */
.agfp .agfp-detail {
    height: 240px;
    overflow: hidden;
    background: var(--agfp-display);
    box-shadow: var(--agfp-shadow);
}

.agfp .agfp-detail .agfp-detail-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: none;
    object-position: var(--op, 2% 8%);
}

.agfp .agfp-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ------------------------------------------------------------------ before / after */

.agfp .agfp-compare { margin-top: var(--agfp-sec); }

.agfp .agfp-head { display: grid; gap: 8px; max-width: 27em; }

.agfp .agfp-cmp {
    position: relative;
    margin-top: 32px;
    line-height: 0;
    box-shadow: var(--agfp-shadow);
    background: var(--agfp-display);
    cursor: ew-resize;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.agfp .agfp-cmp .agfp-cmp-img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    -webkit-user-drag: none;
    pointer-events: none;
}

.agfp .agfp-cmp-top {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 var(--p, 50%));
}

.agfp .agfp-cmp-top .agfp-cmp-img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.agfp .agfp-cmp-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--p, 50%);
    width: 1px;
    background: var(--agfp-accent);
    pointer-events: none;
}

.agfp .agfp-cmp-line::after {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(50% - 15px);
    width: 15px;
    height: 30px;
    background: var(--agfp-accent);
}

/* the range carries the keyboard and the screen reader; the pointer is handled on the
   picture itself by forge-page.js, so the input stays out of the way of the mouse */
.agfp .agfp-cmp .agfp-cmp-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: ew-resize;
    pointer-events: none;
}

.agfp .agfp-cmp:focus-within .agfp-cmp-line { box-shadow: 0 0 0 2px rgba(240, 117, 46, .35); }

.agfp .agfp-cmp-legend {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f7);
    line-height: 1.4;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-label);
    font-weight: 600;
}

/* ------------------------------------------------------------------ module catalogue */

.agfp .agfp-catalog { margin-top: var(--agfp-sec); }

.agfp .agfp-mod {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    margin: 0;
    padding: 16px;
    background: var(--agfp-card);
    border-radius: var(--agfp-r);
}

.agfp .agfp-mod-desc {
    font-size: var(--agfp-f6);
    line-height: 1.5;
    letter-spacing: .003em;
    color: var(--agfp-second);
}

/* ------------------------------------------------------------------ specs */

.agfp .agfp-specs { margin-top: var(--agfp-sec); }

.agfp .agfp-specs .agfp-table {
    width: 100%;
    margin: 48px 0 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f5);
    font-variant-numeric: tabular-nums;
}

.agfp .agfp-specs .agfp-tr,
.agfp .agfp-specs .agfp-tr:hover { background: transparent; }

.agfp .agfp-specs .agfp-th,
.agfp .agfp-specs .agfp-td {
    text-align: left;
    vertical-align: baseline;
    padding: 16px 24px 16px 0;
    border: 0;
    border-top: 1px solid var(--agfp-hair-soft);
    background: transparent;
}

.agfp .agfp-specs .agfp-tr:last-child .agfp-th,
.agfp .agfp-specs .agfp-tr:last-child .agfp-td { border-bottom: 1px solid var(--agfp-hair-soft); }

.agfp .agfp-specs .agfp-th {
    width: 15em;
    padding-top: 19px;
    font-size: var(--agfp-f6);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-label);
}

.agfp .agfp-specs .agfp-td {
    font-size: var(--agfp-f5);
    line-height: 1.6;
    font-weight: 400;
    color: var(--agfp-second);
}

/* ------------------------------------------------------------------ questions */

.agfp .agfp-faq { margin-top: var(--agfp-sec); }

.agfp .agfp-faq-list {
    margin-top: 48px;
    display: grid;
    gap: 48px 72px;
    grid-template-columns: repeat(2, minmax(0, 27em));
}

.agfp .agfp-faq-item { display: grid; gap: 8px; max-width: 27em; margin: 0; }
.agfp .agfp-faq-item .agfp-h3 { font-size: var(--agfp-f4); line-height: 1.32; letter-spacing: -.004em; }

.agfp .agfp-faq-a {
    font-size: var(--agfp-f5);
    line-height: 1.6;
    letter-spacing: .002em;
    color: var(--agfp-second);
}

/* ------------------------------------------------------------------ the closing line */

.agfp .agfp-foot { margin-top: var(--agfp-sec); }

.agfp .agfp-footline {
    border-top: 1px solid var(--agfp-hair-soft);
    padding-top: 24px;
    font-size: var(--agfp-f6);
    line-height: 1.5;
    color: var(--agfp-label);
}

.agfp .agfp-footline .agfp-join-toggle {
    color: var(--agfp-second) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    border: 0;
    background: none;
    cursor: pointer;
}

.agfp .agfp-footline .agfp-join-toggle:hover,
.agfp .agfp-footline .agfp-join-toggle[aria-expanded="true"] { color: var(--agfp-text) !important; }

.agfp .agfp-footline .agfp-join-toggle:focus-visible,
.agfp .agfp-lang .agfp-lang-link:focus-visible {
    outline: 2px solid var(--agfp-accent);
    outline-offset: 3px;
}

.agfp .agfp-join {
    margin-top: 32px;
    scroll-margin-top: 112px;
}

.agfp .agfp-join[hidden] { display: none; }
.agfp .agfp-join:focus { outline: none; }

/* ------------------------------------------------------------------ the tester sign-up (.agfg)

   Plugins::beta_section() as it is, seated on this page: no field of its own, the
   page's card for its panel, the page's radii and type, and its own summary line hidden,
   because the closing line above is what opens it. Without JavaScript the summary comes
   back (see the <noscript> in ForgePage) so the form can still be reached. */

.agfp .agfg.agfg-embed {
    --bg: transparent;
    --panel: var(--agfp-card);
    --panel2: var(--agfp-card);
    --disp: var(--agfp-display);
    --radius: 3px;
    --radius-band: 3px;
    --font: var(--agfp-font);
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: var(--agfp-font);
    font-size: 15px;
}

.agfp .agfg.agfg-embed > * { max-width: none; margin-left: 0; margin-right: 0; }

.agfp .agfg-embed .agfg-dev {
    margin: 0;
    padding: 0;
    border: 0;
    scroll-margin-top: 112px;
}

.agfp .agfg-embed .agfg-dev > details > summary { display: none; }

.agfp .agfg-embed .agfg-dev-body {
    margin-top: 0;
    padding: 32px;
    gap: 32px 48px;
    background: var(--agfp-card);
    border: 0;
    border-radius: var(--agfp-r);
}

.agfp .agfg-embed .agfg-dev-text h3 { font-family: var(--agfp-font); color: var(--agfp-text); }
.agfp .agfg-embed .agfg-dev-text p { color: var(--agfp-second); }

.agfp .agfg-embed .agfg-beta-done {
    background: transparent;
    border: 1px solid var(--agfp-hair);
    border-radius: var(--agfp-r);
}

.agfp .agfg-embed .agfg-btn,
.agfp .agfg-embed .agfg-notice,
.agfp .agfg-embed .agfg-card,
.agfp .agfg-embed .agfg-form input[type="text"],
.agfp .agfg-embed .agfg-form input[type="email"],
.agfp .agfg-embed .agfg-form select,
.agfp .agfg-embed .agfg-form textarea { border-radius: var(--agfp-r); }

.agfp .agfp-notices .agfg-notice { margin: 0 0 8px; background: var(--agfp-card); }
.agfp .agfp-notices .agfg-notice:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ widths */

@media (max-width: 1100px) {
    .agfp .agfp-grid,
    .agfp .agfp-flip .agfp-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .agfp .agfp-flip .agfp-text { order: 1; }
    .agfp .agfp-flip .agfp-media { order: 2; }
    .agfp .agfp-faq-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .agfp {
        --agfp-f1: 34px;
        --agfp-f2: 28px;
        --agfp-f3: 20px;
        --agfp-f4: 18px;
        --agfp-f5: 16px;
        --agfp-f6: 14px;
        --agfp-f7: 12px;
        --agfp-sec: 56px;
        --agfp-gutter: 24px;
    }

    .agfp .agfp-h1 { letter-spacing: -.018em; }

    .agfp .agfp-specs .agfp-table,
    .agfp .agfp-specs .agfp-table tbody { display: block; }

    .agfp .agfp-specs .agfp-tr {
        display: block;
        border-top: 1px solid var(--agfp-hair-soft);
    }

    .agfp .agfp-specs .agfp-tr:last-child { border-bottom: 1px solid var(--agfp-hair-soft); }

    .agfp .agfp-specs .agfp-th,
    .agfp .agfp-specs .agfp-tr:last-child .agfp-th {
        display: block;
        width: auto;
        padding: 16px 0 0;
        border: 0;
    }

    .agfp .agfp-specs .agfp-td,
    .agfp .agfp-specs .agfp-tr:last-child .agfp-td {
        display: block;
        padding: 4px 0 16px;
        border: 0;
    }

    .agfp .agfp-mark { width: 216px; }
    .agfp .agfp-specs .agfp-table,
    .agfp .agfp-faq-list { margin-top: 32px; }

    .agfp .agfg-embed .agfg-dev-body { padding: 24px; }
}

@media (max-width: 560px) {
    .agfp .agfp-pair { grid-template-columns: minmax(0, 1fr); }
    .agfp .agfp-facts { gap: 4px 16px; }
    .agfp .agfp-fact::after { display: none; }
    .agfp .agfp-detail { height: 180px; }
}

@media (max-width: 400px) {
    .agfp {
        --agfp-sec: 44px;
        --agfp-gutter: 16px;
    }

    .agfp .agfp-facts { gap: 8px 16px; }
    .agfp .agfp-fact { gap: 16px; }
    .agfp .agfg-embed .agfg-dev-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .agfp,
    .agfp *,
    .agfp *::before,
    .agfp *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ------------------------------------------------------------ top bar: lockup and language
   v10.5.72: the vector lockup from the Forge project, straight on the page background —
   no plate behind it. Mark left, FORGE right, AUDIOGARDEN under FORGE. */

.agfp .agfp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex: 1 1 100%;
    order: -1;          /* the bar is the first thing on the page, notices come under it */
}

.agfp .agfp-bar .agfp-lang { margin-left: 0; }

.agfp .agfp-lockup {
    display: inline-flex;
    line-height: 0;
    color: inherit;
    border: 0 !important;
    text-decoration: none;
}

.agfp .agfp-lockup-svg {
    display: block;
    width: 200px;
    height: auto;
    overflow: visible;
}

.agfp .agfp-lockup-svg text { font-family: Inter, "Helvetica Neue", Arial, sans-serif; }

.agfp .agfp-lockup:focus-visible { outline: 1px solid var(--agfp-ember, #F0752E); outline-offset: 6px; }

@media (max-width: 620px) {
    .agfp .agfp-lockup-svg { width: 150px; }
}


/* ------------------------------------------------------------ modules and lanes, compact
   A two-column grid (one column under 700px): number, name and badge on one line, one sentence,
   and the picture (a wide strip) across the whole cell, pushed to the bottom so the pictures of
   a row line up. Each item opens with a hairline instead of a card. */

.agfp .agfp-modlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
    margin-top: 40px;
}

.agfp .agfp-lanes .agfp-shot-tools { margin: 28px 0 0; }
.agfp .agfp-lanes .agfp-shot-tools:not([hidden]) + .agfp-modlist { margin-top: 12px; }

.agfp .agfp-modrow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-top: 18px;
    border-top: 1px solid var(--agfp-hair-soft);
    scroll-margin-top: 24px;
}

.agfp .agfp-modrow-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.agfp .agfp-modrow-head .agfp-num { color: var(--agfp-label); }
.agfp .agfp-modrow-head .agfp-h3 { font-size: var(--agfp-f4); line-height: 1.3; letter-spacing: -.004em; }
.agfp .agfp-modrow-head .agfp-edition { margin-left: auto; flex: none; }

.agfp .agfp-modrow-text .agfp-body {
    max-width: none;
    margin: 8px 0 0;
    font-size: var(--agfp-f6);
    line-height: 1.55;
    color: var(--agfp-second);
}

.agfp .agfp-modrow-text .agfp-own { margin-top: 6px; }

.agfp .agfp-modrow-shot { margin: auto 0 0; }
.agfp .agfp-modrow-shot img { display: block; width: 100%; height: auto; }
.agfp .agfp-modrow-shot .agfp-plate { box-shadow: 0 0 0 1px var(--agfp-hair); }
.agfp .agfp-modrow-shot .agfp-shot-tools { margin: 0 0 8px; }

/* the line under the catalogue lead, saying what the badges mean */
.agfp .agfp-head .agfp-body--quiet { color: var(--agfp-label, #6A6661); font-size: var(--agfp-f6); }

@media (max-width: 700px) {
    .agfp .agfp-modlist { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
}


/* v10.5.72: features under the intro, edition badges, the editions table */
.agfp .agfp-features-list { list-style: none; margin: 32px 0 0; padding: 0; max-width: 34em; }
.agfp .agfp-features-list li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid rgba(255,255,255,.08); color: var(--agfp-t2, #9C9792); font-size: 16px; line-height: 1.55; }
.agfp .agfp-features-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: #F0752E; }

.agfp .agfp-edition { display: inline-block; margin-left: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 11px; line-height: 1.4; letter-spacing: .10em; text-transform: uppercase; font-weight: 600; color: var(--agfp-t2, #9C9792); vertical-align: middle; }

.agfp .agfp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agfp .agfp-ed-table { min-width: 640px; }
.agfp .agfp-ed-table td, .agfp .agfp-ed-table thead th { width: 26%; }
.agfp .agfp-ed-col { vertical-align: bottom; }
.agfp .agfp-ed-name { display: block; font-size: 18px; font-weight: 600; color: var(--agfp-text, #E9E6E2); letter-spacing: -.005em; text-transform: none; }
.agfp .agfp-ed-price { display: block; margin-top: 4px; font-size: 14px; color: #F0752E; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.agfp .agfp-ed-notes { list-style: none; margin: 24px 0 0; padding: 0; max-width: 40em; }
.agfp .agfp-ed-notes li { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--agfp-label, #6A6661); }


/* v10.5.72: tester area on the Forge page — the apps-account panel in the Forge palette */
.agfp .agfp-tester.agsw {
    --sw-text: #E9E6E2; --sw-muted: #9C9792; --sw-accent: #F0752E; --sw-accent-h: #ff8a45;
    --sw-bg: transparent; --sw-surface: #2B292E; --sw-border: rgba(255,255,255,.12);
    --sw-shadow: none; --sw-radius: 12px; --sw-radius-sm: 10px;
    background: transparent; color: var(--sw-text); grid-column: 1 / -1;
}
.agfp .agfp-tester .agsw-btn--primary { color: #170b03; }
.agfp .agfp-tester-out { margin: 16px 0 0; font-size: 14px; }
.agfp .agfp-tester-out a { color: #9C9792; }
.agfp .agfp-joinwrap { display: grid; gap: 32px; min-width: 0; }
.agfp .agfp-login { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.agfp .agfp-login > p, .agfp .agfp-login .agfg-actions { grid-column: 1 / -1; margin: 0; }

/* v10.5.72: sections kept apart — every section starts one gap below the previous one, with
   a hairline across the whole page in the middle of that gap (Jan 2026-09-27: Lanes and Ten sources were
   glued together). The comparison slider belongs to its section and stays without one. */
.agfp .agfp-sections { margin-top: 0; }
.agfp .agfp-sections > .agfp-section,
.agfp .agfp-sections > .agfp-section:first-child,
.agfp .agfp-sections > .agfp-lanes,
.agfp .agfp-sections > .agfp-catalog,
.agfp .agfp-sections > .agfp-editions,
.agfp .agfp-sections > .agfp-specs,
.agfp .agfp-sections > .agfp-faq {
    position: relative;
    margin-top: 0;
    padding-top: var(--agfp-sec);
}
.agfp .agfp-sections > .agfp-section::before,
.agfp .agfp-sections > .agfp-lanes::before,
.agfp .agfp-sections > .agfp-catalog::before,
.agfp .agfp-sections > .agfp-editions::before,
.agfp .agfp-sections > .agfp-specs::before,
.agfp .agfp-sections > .agfp-faq::before {
    content: "";
    position: absolute;
    top: calc(var(--agfp-sec) / 2);
    left: 50%;
    width: 100vw;
    height: 1px;
    margin-left: -50vw;
    background: rgba(233, 230, 226, .1);
    pointer-events: none;
}

/* ------------------------------------------------------------ plugins (2026-09-29)
   The way round the page in the top bar, the "Plugins of their own" row under the editions,
   the link under a module row and the page of one plugin (/core/<slug>). Same tokens, no new colours.
   Internally these are "singles"; the word never shows on the page. */

/* the bar: lockup left, the links and the language on the right; under 900px the links take
   a row of their own under the lockup and wrap there, so the page never scrolls sideways */
.agfp .agfp-bar { flex-wrap: wrap; gap: 12px 32px; }

.agfp .agfp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 28px;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.4;
}

.agfp .agfp-nav .agfp-nav-link {
    padding: 6px 0;
    color: var(--agfp-second) !important;
    text-decoration: none !important;
    white-space: nowrap;
    border: 0;
    box-shadow: none;
    background: none;
}

.agfp .agfp-nav .agfp-nav-link:hover { color: var(--agfp-text) !important; }

.agfp .agfp-nav .agfp-nav-link:focus-visible,
.agfp .agfp-textlink:focus-visible,
.agfp .agfp-crumbs .agfp-crumb:focus-visible {
    color: var(--agfp-text) !important;
    outline: 2px solid var(--agfp-accent);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .agfp .agfp-nav { order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 0 20px; }
}

/* a quiet text link: under a module row, after the other plugins */
.agfp .agfp-own { margin: 4px 0 0; font-size: var(--agfp-f6); line-height: 1.5; }

.agfp .agfp-textlink {
    color: var(--agfp-second) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    border: 0;
    background: none;
}

.agfp .agfp-textlink:hover { color: var(--agfp-text) !important; }

/* sections of this block keep the hairline between them, as every other section does */
.agfp .agfp-sections > .agfp-plugins,
.agfp .agfp-sections > .agfp-plugin-about,
.agfp .agfp-sections > .agfp-incore { position: relative; margin-top: 0; padding-top: var(--agfp-sec); }

.agfp .agfp-sections > .agfp-plugins::before,
.agfp .agfp-sections > .agfp-plugin-about::before,
.agfp .agfp-sections > .agfp-incore::before {
    content: "";
    position: absolute;
    top: calc(var(--agfp-sec) / 2);
    left: 50%;
    width: 100vw;
    height: 1px;
    margin-left: -50vw;
    background: rgba(233, 230, 226, .1);
    pointer-events: none;
}

/* the row "Plugins of their own" under the editions table: a small heading, then the cards */
.agfp .agfp-ed-plugins { margin-top: 48px; }

.agfp .agfp-plugin-sub {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--agfp-hair-soft);
    font-family: var(--agfp-font);
    font-size: var(--agfp-f7);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-second);
}

/* the small plugin cards: the whole card is one link of equal height (name, one sentence, a row
   with the price and an arrow); as many columns as fit, three in the editions row */
.agfp .agfp-plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 24px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.agfp .agfp-plugins--more .agfp-plugin-grid { margin-top: 48px; }
.agfp .agfp-plugin-grid > .agfp-plugin-item { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
.agfp .agfp-plugin-grid > .agfp-plugin-item::marker { content: none; }

.agfp .agfp-plugin-grid .agfp-plugin-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    color: var(--agfp-text) !important;
    text-decoration: none !important;
    border: 0;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.agfp .agfp-plugin-grid .agfp-plugin-card:hover { background: #312F35; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.agfp .agfp-plugin-grid .agfp-plugin-card:focus-visible { outline: 2px solid var(--agfp-accent); outline-offset: 3px; }

.agfp .agfp-plugin-card .agfp-plugin-name {
    margin: 0;
    font-size: var(--agfp-f4);
    line-height: 1.3;
    letter-spacing: -.004em;
}

.agfp .agfp-plugin-card .agfp-mod-desc { display: block; }

.agfp .agfp-plugin-card .agfp-plugin-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--agfp-hair-soft);
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.4;
    color: var(--agfp-label);
}

.agfp .agfp-plugin-price { color: var(--agfp-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.agfp .agfp-plugin-go { margin-left: auto; color: var(--agfp-quiet); transition: color .15s ease, transform .15s ease; }
.agfp .agfp-plugin-card:hover .agfp-plugin-go,
.agfp .agfp-plugin-card:focus-visible .agfp-plugin-go { color: var(--agfp-text); transform: translateX(2px); }

.agfp .agfp-plugins-all { margin-top: 32px; }

/* the page of one plugin: crumbs, name, claim, the double role, price and the button */
.agfp .agfp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.4;
    color: var(--agfp-label);
}

.agfp .agfp-crumbs .agfp-crumb { color: var(--agfp-second) !important; text-decoration: none !important; border: 0; background: none; }
.agfp .agfp-crumbs .agfp-crumb:hover { color: var(--agfp-text) !important; }
.agfp .agfp-crumb-sep { color: var(--agfp-quiet); }
.agfp .agfp-crumb-on { color: var(--agfp-label); }

.agfp .agfp-plugin-role {
    max-width: 36em;
    margin: 16px 0 0;
    padding: 0;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f5);
    line-height: 1.55;
    color: var(--agfp-label);
}

.agfp .agfp-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    margin-top: 32px;
}

.agfp .agfp-buy-price { display: grid; gap: 2px; min-width: 0; }

.agfp .agfp-buy .agfp-buy-amount {
    margin: 0;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f2);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.010em;
    color: var(--agfp-text);
    font-variant-numeric: tabular-nums;
}

.agfp .agfp-buy .agfp-buy-note {
    max-width: 30em;
    margin: 0;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.5;
    color: var(--agfp-second);
}

.agfp .agfp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--agfp-r);
    background: var(--agfp-accent);
    color: #170B03 !important;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease;
}

.agfp .agfp-btn:hover { background: #FF8A45; }
.agfp .agfp-btn:focus-visible { outline: 2px solid var(--agfp-text); outline-offset: 3px; }

/* what it does: the text, then the features in two columns on a wide screen */
.agfp .agfp-plugin-about .agfp-head { max-width: 34em; }
.agfp .agfp-plugin-about .agfp-intro-text { margin: 0; }

.agfp .agfp-features-list.agfp-features-list--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    max-width: none;
    margin-top: 40px;
}

.agfp .agfp-features-list--two li { margin: 0; }

/* also a module in Audiogarden Core: the words, a short list, the module board */
.agfp .agfp-incore .agfp-head .agfp-body { margin-top: 8px; }

.agfp .agfp-incore-list {
    display: grid;
    gap: 0;
    max-width: 44em;
    margin: 32px 0 0;
    padding: 0;
}

.agfp .agfp-incore-row {
    display: grid;
    grid-template-columns: 11em minmax(0, 1fr);
    gap: 4px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--agfp-hair-soft);
}

.agfp .agfp-incore-row:last-child { border-bottom: 1px solid var(--agfp-hair-soft); }

.agfp .agfp-incore-term {
    margin: 0;
    padding-top: 2px;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f7);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--agfp-label);
}

.agfp .agfp-incore-def {
    margin: 0;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f5);
    line-height: 1.6;
    color: var(--agfp-second);
}

.agfp .agfp-incore-board { margin-top: 48px; }

@media (max-width: 900px) {
    .agfp .agfp-buy { margin-top: 24px; gap: 16px 32px; }
    .agfp .agfp-features-list.agfp-features-list--two { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .agfp .agfp-incore-board { margin-top: 32px; }
}

@media (max-width: 560px) {
    .agfp .agfp-incore-row { grid-template-columns: minmax(0, 1fr); }
    .agfp .agfp-buy .agfp-btn { width: 100%; justify-content: center; }
}


/* ------------------------------------------------------------ picture switches (2026-09-29)
   Clean / Analog over a window shot, Classic / Night / Craft over the board of a module with
   skins. Small and quiet, in the manner of the edition badges; hidden until forge-page.js runs. */

.agfp .agfp-shot-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}

.agfp .agfp-shot-tools[hidden] { display: none !important; }

.agfp .agfp-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: transparent;
}

.agfp .agfp-switch .agfp-switch-btn {
    -webkit-appearance: none;
    appearance: none;
    min-height: 24px;
    margin: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--agfp-label);
    font-family: var(--agfp-font);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.agfp .agfp-switch .agfp-switch-btn:hover { background: transparent; color: var(--agfp-text); }
.agfp .agfp-switch .agfp-switch-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .08); color: var(--agfp-text); }
.agfp .agfp-switch .agfp-switch-btn:focus-visible { outline: 2px solid var(--agfp-accent); outline-offset: 2px; }


/* ------------------------------------------------------------ Paddle checkout (2026-09-30)
   The buy button is the page's primary button (.agfp-btn, ember) on a <button>; the "Your price"
   line shows the price in the visitor's country. Both are printed hidden and shown by forge-page.js
   once Paddle.js is ready, so the page reads the same without script. */

.agfp .agfp-btn[hidden],
.agfp .agfp-yourprice[hidden] { display: none; }

.agfp button.agfp-btn {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

/* with the buy button on show, the way to Versions and prices steps back to an outline */
.agfp .agfp-btn--buy:not([hidden]) ~ a.agfp-btn {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    color: var(--agfp-text) !important;
}

.agfp .agfp-btn--buy:not([hidden]) ~ a.agfp-btn:hover { background: rgba(255, 255, 255, .06); }

.agfp .agfp-yourprice {
    display: block;
    font-family: var(--agfp-font);
    font-size: var(--agfp-f6);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--agfp-second);
}

.agfp .agfp-yourprice .agfp-yourprice-value { color: var(--agfp-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the column of Audiogarden Core Pro in Versions and prices */
.agfp .agfp-ed-col .agfp-yourprice { margin-top: 6px; }
.agfp .agfp-ed-col .agfp-btn--buy { margin-top: 16px; }

/* the checkout page: one line under the heading, nothing else */
.agfp--checkout .agfp-masthead { padding-bottom: 96px; }

/* plugin page: details */
.agfp .agfp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.agfp .agfp-cta-note { margin: 0; max-width: 34em; font-family: var(--agfp-font); font-size: var(--agfp-f6); line-height: 1.5; color: var(--agfp-second); }
.agfp .agfp-btn--off { background: transparent; color: var(--agfp-second) !important; border: 1px solid var(--agfp-label); cursor: default; }
.agfp .agfp-btn--off:hover { background: transparent; }
.agfp .agfp-btn--ghost { background: transparent; color: var(--agfp-text) !important; border: 1px solid var(--agfp-label); }
.agfp .agfp-btn--ghost:hover { background: transparent; border-color: var(--agfp-text); }
.agfp .agfp-sections > .agfp-detail-sec { position: relative; margin-top: 0; padding-top: var(--agfp-sec); }
.agfp .agfp-sections > .agfp-detail-sec::before { content: ""; position: absolute; top: calc(var(--agfp-sec) / 2); left: 50%; width: 100vw; height: 1px; margin-left: -50vw; background: rgba(233, 230, 226, .1); pointer-events: none; }
.agfp .agfp-detail-sec .agfp-head { max-width: 34em; }
.agfp .agfp-detail-fig { margin-top: 40px; }
.agfp .agfp-detail-fig .agfp-plate { display: block; width: 100%; height: auto; max-width: 100%; }
.agfp .agfp-incore-rack { margin-top: 40px; margin-bottom: 0; }
@media (max-width: 900px) { .agfp .agfp-detail-fig { margin-top: 28px; } .agfp .agfp-cta { margin-top: 24px; } }

/* a plugin on a page of its own (/clipper): the Audiogarden flower and name instead of the Core lockup */
.agfp .agfp-lockup.agfp-mark { display: inline-flex; align-items: center; gap: 12px; line-height: 1; width: auto; aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.agfp .agfp-mark-svg { display: block; width: 34px; height: auto; }
.agfp .agfp-mark-name { font-family: var(--agfp-font); font-size: 13px; font-weight: 600; letter-spacing: .24em; color: var(--agfp-text); }
@media (max-width: 620px) { .agfp .agfp-mark-svg { width: 28px; } .agfp .agfp-mark-name { font-size: 12px; } }

/* the window picture of a plugin page (/clipper, /drive, /core/<plugin>) fits whole in the viewport (2026-10-08).
   PHP gives the figure the ratio of the shot (--agfp-ar); the width is the smallest of the column, 1040 px and
   what the viewport height (less the switch and some air) leaves at that ratio. The figure shrinks to the
   picture, so the look switch, which sits at the right of the figure, stays on the picture's right edge.
   The hero of /core (.agfp-hero--fit) follows the same rule, but its title, facts and caption share the first screen with it (430 px). */
.agfp--plugin .agfp-hero .agfp-figure {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
@supports (width: min(1px, 2px)) {
    .agfp--plugin .agfp-hero .agfp-figure {
        width: min(100%, 1040px, max(360px, calc((100vh - 160px) * var(--agfp-ar, 1.6))));
    }
}
@supports (height: 1svh) {
    .agfp--plugin .agfp-hero .agfp-figure {
        width: min(100%, 1040px, max(360px, calc((100svh - 160px) * var(--agfp-ar, 1.6))));
    }
}
.agfp--plugin .agfp-hero .agfp-plate { width: 100%; height: auto; }
.agfp .agfp-hero--fit .agfp-figure { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; }
@supports (width: min(1px, 2px)) {
    .agfp .agfp-hero--fit .agfp-figure { width: min(100%, 1040px, max(360px, calc((100vh - 430px) * var(--agfp-ar, 1.6)))); }
}
@supports (height: 1svh) {
    .agfp .agfp-hero--fit .agfp-figure { width: min(100%, 1040px, max(360px, calc((100svh - 430px) * var(--agfp-ar, 1.6)))); }
}
.agfp .agfp-hero--fit .agfp-plate { width: 100%; height: auto; }

/* the full-width dividers use 100vw, which counts a classic scrollbar: never let them scroll the page sideways */
.agfp.agfp--plugin { overflow-x: clip; }

/* ================================================================== /core overview (2026-10-09)
   The page speaks the plugin's language (Forge DESIGN.md, Colours): the window's near-black, five greys,
   hairlines instead of boxes, depth by text contrast. The ember means one thing — something plays or is
   modulated — so it lights only the finished modules, the modulated slot and its lane. */

.agfp.agx {
    /* a step lighter than the window itself (Jan 2026-10-09: "lighten the whole page a little") */
    --agfp-bg: #1B1A1C;
    --agx-panel: #262527;
    --agx-panel2: #201F21;
    --agx-display: #1E1D1F;
    --agx-line: rgba(255, 255, 255, .08);
    --agx-line2: rgba(255, 255, 255, .14);
    --agx-t1: #F0EDE9;
    --agx-t2: #ADA8A3;
    --agx-t3: #817C77;
    --agx-t4: #5C5955;
    --agx-ember: #F0752E;
    --agx-ease: cubic-bezier(.2, .7, .1, 1);
    --agx-max: 1200px;
    --agx-g: clamp(20px, 4vw, 48px);
    background: var(--agfp-bg);
    color: var(--agx-t1);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.agfp.agx .agfp-top { border-bottom: 1px solid var(--agx-line); }
.agfp.agx .agx-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--agx-max) + var(--agx-g) * 2); margin-left: auto; margin-right: auto; padding-left: var(--agx-g); padding-right: var(--agx-g); }
.agfp.agx p, .agfp.agx h1, .agfp.agx h2, .agfp.agx h3, .agfp.agx ul, .agfp.agx ol, .agfp.agx figure { margin: 0; }
.agfp.agx ul, .agfp.agx ol { padding: 0; list-style: none; }
.agfp.agx a { text-decoration: none; }

/* type: light display, quiet caps like the plugin's cap labels */
.agfp.agx .agx-cap { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--agx-t3); }
.agfp.agx .agx-cap-n { color: var(--agx-t4); font-variant-numeric: tabular-nums; }
.agfp.agx .agx-cap-n::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 0 3px 12px; background: var(--agx-line2); vertical-align: middle; }
.agfp.agx .agx-display { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; font-weight: 300; letter-spacing: -.035em; color: var(--agx-t1); }
.agfp.agx .agx-display--s { font-size: clamp(32px, 3.8vw, 52px); }
.agfp.agx .agx-dim { color: var(--agx-t3); }
.agfp.agx .agx-h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; font-weight: 300; letter-spacing: -.03em; color: var(--agx-t1); }
.agfp.agx .agx-h3 { font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--agx-t1); }
.agfp.agx .agx-h4 { font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; color: var(--agx-t1); }
.agfp.agx .agx-lead { max-width: 520px; font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--agx-t2); }
.agfp.agx .agx-text { font-size: 15px; line-height: 1.65; color: var(--agx-t2); }
.agfp.agx .agx-small { font-size: 13.5px; line-height: 1.6; color: var(--agx-t3); }

/* actions: one light button, everything else a quiet link */
.agfp.agx .agx-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px; background: var(--agx-t1); color: #0F0E10 !important; font-size: 14px; font-weight: 500; letter-spacing: -.005em; transition: background .25s var(--agx-ease), transform .25s var(--agx-ease); }
.agfp.agx .agx-btn:hover { background: #fff; }
.agfp.agx .agx-btn:active { transform: scale(.98); }
.agfp.agx .agx-btn--full { width: 100%; margin-top: auto; }
.agfp.agx .agx-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--agx-t2) !important; transition: color .2s; }
.agfp.agx .agx-link:hover { color: var(--agx-t1) !important; }
.agfp.agx .agx-arrow { display: inline-block; transition: transform .3s var(--agx-ease); }
.agfp.agx a:hover .agx-arrow { transform: translateX(4px); }
.agfp.agx a:focus-visible, .agfp.agx summary:focus-visible { outline: 1px solid var(--agx-t1); outline-offset: 4px; border-radius: 2px; }

/* hero */
.agfp.agx .agx-hero { padding-top: clamp(36px, 6vh, 72px); }
.agfp.agx .agx-hero-text { display: grid; gap: 22px; }
.agfp.agx .agx-hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.agfp.agx .agx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.agfp.agx .agx-hero-shot { margin-top: clamp(32px, 5vh, 56px); }
.agfp.agx .agx-hero-shot .agx-frame { width: min(100%, max(380px, calc((100svh - 500px) * var(--agx-ar))));
    margin: 0 auto; position: relative; }
.agfp.agx .agx-frame::before { content: ""; position: absolute; inset: 8% 6% -6%; z-index: 0; background: radial-gradient(60% 55% at 50% 45%, rgba(233, 230, 226, .07), transparent 70%); filter: blur(30px); pointer-events: none; }
.agfp.agx .agx-frame .agx-img { position: relative; z-index: 1; border-radius: 6px; box-shadow: 0 0 0 1px var(--agx-line2), 0 40px 120px -30px rgba(0, 0, 0, .95), 0 18px 40px -20px rgba(0, 0, 0, .8); }
.agfp.agx .agx-img { display: block; width: 100%; height: auto; }

/* sections */
.agfp.agx .agx-sec { padding-top: clamp(80px, 12vw, 160px); }
.agfp.agx .agx-head { display: grid; grid-template-columns: minmax(160px, 3fr) 9fr; gap: 20px 32px; padding-top: 22px; margin-bottom: clamp(40px, 5vw, 64px); border-top: 1px solid var(--agx-line); }
.agfp.agx .agx-head .agx-lead { margin-top: 18px; max-width: 600px; }

/* 01 steps: three columns split by hairlines, pictures on the window's display */
.agfp.agx .agx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agfp.agx .agx-step { display: flex; flex-direction: column; padding: 0 clamp(16px, 2.2vw, 32px); border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-step:first-child { padding-left: 0; border-left: 0; }
.agfp.agx .agx-step:last-child { padding-right: 0; }
.agfp.agx .agx-display-box { display: grid; gap: 6px; align-content: center; aspect-ratio: 16 / 11; padding: 14px; background: var(--agx-display); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--agx-line); overflow: hidden; }
.agfp.agx .agx-display-box .agx-img { border-radius: 2px; transition: transform .8s var(--agx-ease); }
.agfp.agx .agx-step-n { margin: 28px 0 10px; font-size: 12px; font-weight: 500; color: var(--agx-t4); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.agfp.agx .agx-step .agx-h3 { margin-bottom: 8px; }

/* 02 the rack as a strip: one panel, slots split by hairlines */
.agfp.agx .agx-rack { position: relative; background: var(--agx-panel2); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--agx-line); }
.agfp.agx .agx-rack-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 190px; }
.agfp.agx .agx-io { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 18px; }
.agfp.agx .agx-io--out { border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-out-list { font-size: 12.5px; line-height: 1.55; color: var(--agx-t2); }
.agfp.agx .agx-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-slot { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 128px; padding: 16px 14px; background: var(--agx-panel); border-right: 1px solid var(--agx-line); }
.agfp.agx .agx-slot:last-child { border-right: 0; }
.agfp.agx .agx-slot b { font-size: 13.5px; font-weight: 500; color: var(--agx-t1); }
.agfp.agx .agx-slot.is-empty { background: transparent; }
.agfp.agx .agx-slot.is-empty b { color: var(--agx-t4); font-weight: 400; }
.agfp.agx .agx-slot-n { font-size: 10.5px; letter-spacing: .12em; color: var(--agx-t4); font-variant-numeric: tabular-nums; }
.agfp.agx .agx-knob { position: relative; width: 30px; height: 30px; margin-top: auto; border-radius: 50%; background: #302F31; box-shadow: inset 0 0 0 1px var(--agx-line2); }
.agfp.agx .agx-knob::after { content: ""; position: absolute; left: 50%; top: 4px; width: 1.5px; height: 9px; margin-left: -.75px; background: var(--agx-t2); border-radius: 1px; transform-origin: 50% 11px; transform: rotate(-40deg); }
.agfp.agx .agx-slot.is-mod .agx-knob { box-shadow: inset 0 0 0 1px var(--agx-line2), 0 0 0 3px var(--agx-panel), 0 0 0 4.5px var(--agx-ember); }
.agfp.agx .agx-slot.is-mod .agx-knob::after { background: var(--agx-t1); animation: agx-knob 3.2s var(--agx-ease) infinite alternate; }
/* the cable from the Turing lane up to the modulated knob */
.agfp.agx .agx-slot.is-mod::after { content: ""; position: absolute; left: 28.25px; top: calc(100% - 16px); width: 1.5px; height: 38px; background: linear-gradient(to bottom, var(--agx-ember), rgba(240, 117, 46, .45)); z-index: 2; pointer-events: none; }
@keyframes agx-knob { from { transform: rotate(-120deg); } to { transform: rotate(110deg); } }
.agfp.agx .agx-lanes { display: grid; grid-template-columns: 84px minmax(0, 1fr) 190px; border-top: 1px solid var(--agx-line); }
.agfp.agx .agx-lane-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-lane { position: relative; display: block; padding: 16px 14px 18px; font-size: 13px; color: var(--agx-t3); border-right: 1px solid var(--agx-line); }
.agfp.agx .agx-lane-row .agx-lane:last-child { border-right: 0; }
.agfp.agx .agx-io--out .agx-lane { padding: 0; border: 0; }
.agfp.agx .agx-lane.is-on { padding-left: 42px; color: var(--agx-ember); }
.agfp.agx .agx-lane.is-on::before { content: ""; position: absolute; left: 25.5px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--agx-ember); box-shadow: 0 0 0 3px rgba(240, 117, 46, .16); }

/* 03 versions: three columns, Core Lite lifted onto the panel */
.agfp.agx .agx-editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--agx-line); border-bottom: 1px solid var(--agx-line); }
.agfp.agx .agx-ed { display: flex; flex-direction: column; gap: 14px; padding: 32px clamp(20px, 2.6vw, 36px) 36px; border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-ed:first-child { border-left: 0; }
.agfp.agx .agx-ed.is-first { background: var(--agx-panel); box-shadow: inset 0 1px 0 var(--agx-t1); }
.agfp.agx .agx-ed.is-first .agx-cap { color: var(--agx-t1); }
.agfp.agx .agx-ed-name { margin-top: 18px; font-size: 26px; font-weight: 400; letter-spacing: -.025em; color: var(--agx-t1); }
.agfp.agx .agx-ed:not(.is-first) .agx-ed-name { color: var(--agx-t2); }
.agfp.agx .agx-price { font-size: 15px; font-weight: 500; color: var(--agx-t1); font-variant-numeric: tabular-nums; }
.agfp.agx .agx-price.is-later { font-weight: 400; color: var(--agx-t3); }
.agfp.agx .agx-ed-list { display: grid; gap: 10px; margin: 10px 0 6px; padding-top: 18px; border-top: 1px solid var(--agx-line); font-size: 14.5px; color: var(--agx-t1); }
.agfp.agx .agx-ed-list li { display: flex; align-items: center; gap: 12px; }
.agfp.agx .agx-ed .agx-btn { margin-top: 18px; }

/* status dot: ember = it plays (finished), hollow = still to come */
.agfp.agx .agx-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--agx-t4); }
.agfp.agx .agx-dot.is-on { background: var(--agx-ember); box-shadow: 0 0 0 3px rgba(240, 117, 46, .14); }

/* 04 modules: a spec sheet, hairline grid */
.agfp.agx .agx-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 24px; font-size: 13px; color: var(--agx-t3); }
.agfp.agx .agx-legend li { display: flex; align-items: center; gap: 10px; }
.agfp.agx .agx-tag { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--agx-t3); padding: 3px 7px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--agx-line2); }
.agfp.agx .agx-mods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--agx-line); border: 1px solid var(--agx-line); border-radius: 6px; overflow: hidden; }
.agfp.agx .agx-mod { display: flex; flex-direction: column; gap: 10px; min-height: 150px; padding: 18px 16px; background: var(--agfp-bg); transition: background .3s; }
.agfp.agx .agx-mod:hover { background: var(--agx-panel2); }
.agfp.agx .agx-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agfp.agx .agx-mod:not(.is-ready) .agx-h4 { color: var(--agx-t2); }
.agfp.agx .agx-mod .agx-tag { align-self: flex-start; margin-top: auto; }

/* 05 plugins: the windows large, names quiet under them */
.agfp.agx .agx-plugins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.agfp.agx .agx-plugin { display: flex; flex-direction: column; gap: 18px; color: inherit; }
.agfp.agx .agx-plugin:hover .agx-display-box .agx-img { transform: scale(1.025); }
.agfp.agx .agx-plugin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--agx-line); }
.agfp.agx .agx-plugin-price { font-size: 13.5px; color: var(--agx-t2); }
.agfp.agx .agx-plugin-next { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--agx-line); }
.agfp.agx .agx-next-list { display: grid; gap: 8px; font-size: 15px; color: var(--agx-t2); }
.agfp.agx .agx-plugin-next .agx-small { margin-top: auto; }

/* 06 questions */
.agfp.agx .agx-faq { margin-left: calc((100% - 32px) * 3 / 12 + 32px); border-top: 1px solid var(--agx-line); }
.agfp.agx .agx-q { border-bottom: 1px solid var(--agx-line); }
.agfp.agx .agx-q summary { position: relative; display: block; padding: 24px 48px 24px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 400; letter-spacing: -.01em; color: var(--agx-t1); }
.agfp.agx .agx-q summary::-webkit-details-marker { display: none; }
.agfp.agx .agx-plus { position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; }
.agfp.agx .agx-plus::before, .agfp.agx .agx-plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1px; background: var(--agx-t2); transition: transform .35s var(--agx-ease); }
.agfp.agx .agx-plus::after { transform: rotate(90deg); }
.agfp.agx .agx-q[open] .agx-plus::after { transform: rotate(0); }
.agfp.agx .agx-q p { max-width: 640px; padding: 0 0 26px; font-size: 15.5px; line-height: 1.7; color: var(--agx-t2); }

/* beta */
.agfp.agx .agx-beta { padding-bottom: 40px; }
.agfp.agx .agx-beta-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 32px 48px; padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--agx-line); border-bottom: 1px solid var(--agx-line); }
.agfp.agx .agx-beta-row .agx-lead { margin-bottom: 24px; }
.agfp.agx .agx-specs { margin-top: 28px; }
.agfp.agx .agx-specs > summary { cursor: pointer; font-size: 13px; color: var(--agx-t3); }
.agfp.agx .agfp-join { margin-top: 24px; }

/* entrance: only once the script has said it runs, and never with reduced motion */
.agx-motion .agfp.agx .agx-reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--agx-ease), transform 1s var(--agx-ease); transition-delay: calc(var(--agx-d, 0) * 90ms); }
.agx-motion .agfp.agx .agx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .agx-motion .agfp.agx .agx-reveal { opacity: 1; transform: none; transition: none; }
    .agfp.agx .agx-slot.is-mod .agx-knob::after { animation: none; }
}

@media (max-width: 1000px) {
    .agfp.agx .agx-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agfp.agx .agx-rack-row { grid-template-columns: minmax(0, 1fr); }
    .agfp.agx .agx-io { flex-direction: row; align-items: center; padding: 14px 18px; }
    .agfp.agx .agx-io--out { border-left: 0; border-top: 1px solid var(--agx-line); flex-wrap: wrap; }
    .agfp.agx .agx-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--agx-line); }
    .agfp.agx .agx-slot { border-bottom: 1px solid var(--agx-line); min-height: 104px; }
    .agfp.agx .agx-slot:nth-child(4n) { border-right: 0; }
    .agfp.agx .agx-slot.is-mod::after { display: none; }
    .agfp.agx .agx-lanes { grid-template-columns: minmax(0, 1fr); }
    .agfp.agx .agx-lane-row { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--agx-line); }
    .agfp.agx .agx-lane-row .agx-lane { border-bottom: 1px solid var(--agx-line); }
    .agfp.agx .agx-lane-row .agx-lane:nth-child(4n) { border-right: 0; }
    .agfp.agx .agx-lanes .agx-io--out { gap: 16px; }
}
@media (max-width: 800px) {
    .agfp.agx .agx-head { grid-template-columns: minmax(0, 1fr); }
    .agfp.agx .agx-steps, .agfp.agx .agx-editions, .agfp.agx .agx-plugins, .agfp.agx .agx-beta-row { grid-template-columns: minmax(0, 1fr); }
    .agfp.agx .agx-step { padding: 0 0 40px; border-left: 0; }
    .agfp.agx .agx-ed { border-left: 0; border-top: 1px solid var(--agx-line); }
    .agfp.agx .agx-ed:first-child { border-top: 0; }
    .agfp.agx .agx-faq { margin-left: 0; }
    .agfp.agx .agx-hero-shot .agx-frame { width: 100%; }
}
@media (max-width: 520px) {
    .agfp.agx .agx-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agfp.agx .agx-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agfp.agx .agx-slot:nth-child(2n), .agfp.agx .agx-lane-row .agx-lane:nth-child(2n) { border-right: 0; }
    .agfp.agx .agx-lane-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agfp.agx .agx-actions { width: 100%; }
    .agfp.agx .agx-actions .agx-btn { width: 100%; }
}

/* ---- premium, round two: product on show (story, inspector, module explorer, spec band, grain, light) */

/* a fine grain over the near-black, so large dark areas read as material, not as empty screen */
.agfp.agx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* spec band under the hero */
.agfp.agx .agx-specband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vh, 64px); }
.agfp.agx .agx-specband li { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 22px 24px; border-top: 1px solid var(--agx-line); border-bottom: 1px solid var(--agx-line); border-left: 1px solid var(--agx-line); }
.agfp.agx .agx-specband li:first-child { padding-left: 0; border-left: 0; }
.agfp.agx .agx-specband b { font-size: clamp(20px, 2vw, 26px); font-weight: 300; letter-spacing: -.02em; color: var(--agx-t1); font-variant-numeric: tabular-nums; }
.agfp.agx .agx-specband span { font-size: 12.5px; color: var(--agx-t3); }

/* invisible full-size buttons that make a slot, a lane or a module tile pickable */
.agfp.agx .agx-pick { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 0; }
.agfp.agx .agx-pick:focus-visible { outline: 1px solid var(--agx-t1); outline-offset: -3px; }
.agfp.agx .agx-mod { position: relative; }

/* 01 story: the text scrolls, the picture stays and changes with it */
.agfp.agx .agx-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); }
.agfp.agx .agx-story .agx-step { display: flex; flex-direction: column; justify-content: center; min-height: 64vh; padding: 0; border: 0; }
.agfp.agx .agx-story .agx-step-img { display: none; }
.agfp.agx .agx-story .agx-step-n { margin-top: 0; }
.agfp.agx .agx-story .agx-step-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; letter-spacing: -.025em; margin-bottom: 14px; }
.agfp.agx .agx-story .agx-step .agx-text { max-width: 400px; font-size: 16.5px; }
.agfp.agx .agx-story .agx-step > * { transition: opacity .6s var(--agx-ease), color .6s var(--agx-ease); }
.agfp.agx .agx-story .agx-step:not(.is-on) > * { opacity: .28; }
.agfp.agx .agx-story-stage { position: relative; }
.agfp.agx .agx-stage { position: sticky; top: max(96px, calc(50vh - 240px)); aspect-ratio: 16 / 11; background: var(--agx-display); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--agx-line), 0 40px 100px -40px rgba(0, 0, 0, .9); overflow: hidden; }
.agfp.agx .agx-stage-item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(16px, 2.4vw, 32px); opacity: 0; transform: scale(.985); transition: opacity .7s var(--agx-ease), transform .9s var(--agx-ease); }
.agfp.agx .agx-stage-item.is-on { opacity: 1; transform: none; }
.agfp.agx .agx-stage-item .agx-img { border-radius: 3px; max-height: 100%; object-fit: contain; }

/* 02 inspector under the rack */
.agfp.agx .agx-slot.is-picked { box-shadow: inset 0 -2px 0 var(--agx-ember); }
.agfp.agx .agx-slot:hover b { color: #fff; }
.agfp.agx .agx-lane { transition: color .2s; }
.agfp.agx .agx-lane:hover { color: var(--agx-t1); }
.agfp.agx .agx-lane.is-on { color: var(--agx-t3); }
.agfp.agx .agx-lane.is-picked { color: var(--agx-ember); }
.agfp.agx .agx-lane-pair { display: flex; gap: 18px; }
.agfp.agx .agx-io--out .agx-lane { position: relative; }
.agfp.agx .agx-inspect { padding: 20px; border-top: 1px solid var(--agx-line); }
.agfp.agx .agx-inspect-img { aspect-ratio: 1600 / 355; display: flex; align-items: center; background: var(--agx-display); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--agx-line); overflow: hidden; }
.agfp.agx .agx-inspect-img .agx-img, .agfp.agx .agx-modstage-img .agx-img { max-height: 100%; object-fit: contain; transition: opacity .35s var(--agx-ease); }
.agfp.agx .is-swapping .agx-img { opacity: 0; }
.agfp.agx .agx-inspect-cap { margin-top: 14px; max-width: 760px; font-size: 13.5px; line-height: 1.6; color: var(--agx-t2); }
.agfp.agx .agx-inspect-hint { margin-top: 14px; font-size: 12.5px; color: var(--agx-t4); }

/* 04 module explorer: the board large, the sheet under it picks */
.agfp.agx .agx-modstage { margin-bottom: 20px; }
.agfp.agx .agx-modstage-img { aspect-ratio: 1600 / 355; display: flex; align-items: center; background: var(--agx-display); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--agx-line), 0 30px 80px -40px rgba(0, 0, 0, .9); overflow: hidden; }
.agfp.agx .agx-modstage-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 16px; }
.agfp.agx .agx-modstage-cap b { font-size: 18px; font-weight: 400; letter-spacing: -.015em; color: var(--agx-t1); }
.agfp.agx .agx-modstage-cap span { font-size: 14px; color: var(--agx-t2); }
.agfp.agx .agx-mod.is-picked { background: var(--agx-panel); }
.agfp.agx .agx-mod.is-picked .agx-h4 { color: var(--agx-t1); }
.agfp.agx .agx-mod.is-picked::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--agx-t1); }

/* a soft light that follows the pointer over the tiles */
.agfp.agx [data-agx-spot] > li { position: relative; }
.agfp.agx [data-agx-spot] > li::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 70%); }
.agfp.agx [data-agx-spot] > li:hover::after { opacity: 1; }

@media (max-width: 1000px) {
    .agfp.agx .agx-story { grid-template-columns: minmax(0, 1fr); }
    .agfp.agx .agx-story-stage { display: none; }
    .agfp.agx .agx-story .agx-step { min-height: 0; padding-bottom: 56px; }
    .agfp.agx .agx-story .agx-step-img { display: grid; margin-bottom: 4px; }
    .agfp.agx .agx-story .agx-step:not(.is-on) > * { opacity: 1; }
    .agfp.agx .agx-story .agx-step-n { margin-top: 24px; }
    .agfp.agx .agx-specband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agfp.agx .agx-specband li:nth-child(3) { padding-left: 0; border-left: 0; }
    .agfp.agx .agx-specband li:nth-child(n+3) { border-top: 0; }
}
@media (min-width: 1001px) and (min-height: 760px) {
    .agfp.agx .agx-modstage { position: sticky; top: 0; z-index: 5; margin-bottom: 0; padding: 20px 0 24px; background: var(--agfp-bg); }
}
.agfp.agx figcaption, .agfp.agx figcaption * { font-style: normal; text-align: left; }