/* ===========================================================================
   BadgeBox landing — the «agenti» page, the deep dive on the thing that
   works while nobody is looking.

   It loads ONLY on that page: lp_render() looks for css/page-<slug>.css and
   adds it when it exists. Whoever reads the home does not pay for a sheet
   they never use.

   The values come from tokens.css, like the rest of the landing. No colour
   is born here, and there is no second accent: blue and nothing else.

   ── THE SCENES ───────────────────────────────────────────────────────────
   Drawn in HTML and CSS, not photographed. There is no honest screenshot of
   an agent to take — the chain and a conversation are full of real people's
   names — and a drawing translates, reads on a phone, weighs nothing and
   does not age with the next retouch of the interface.

   EVERY SCENE RESTS IN ITS FINAL STATE: the run is finished, the
   conversation has happened, the counters are at their total. It is
   `js/page-agenti.js` that rewinds them and plays them, by adding
   `.is-play`; without javascript, or with «reduce motion», the page is
   whole and still and tells the same story. The rule is the same as the
   seven acts of the AI section — you lose the motion, never the content.

   WHY THE MOTION LIVES UNDER `.is-play` AND NOT `.is-on`: two scenes here
   can be REPLAYED, and a class that can be removed and put back is a class
   that restarts an animation. `js/scene.js` deliberately switches a scene
   on once and stops watching, which is right for a scene you watch and
   wrong for one you ask to see again.

   ── THE GRID ─────────────────────────────────────────────────────────────
   4px, everywhere, and two adjacent things share a base. The hierarchy is
   made with type and space: there is no border here that a line of type
   could have done.
   =========================================================================== */


/* The landing's reset (landing.css) zeroes h1…figure and stops there: a
   `dd` carries 40px of browser indent and a `blockquote` carries 40 on each
   side. This page is the first to use either, so it clears them — here and
   not there, because a page must not change what the others get. */
.agr__counts, .agr__counts dd,
.ags__facts, .ags__facts dd,
.agb__t blockquote, .agb__t figcaption { margin: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   1 · THE OPENING — the night, and a console
   ═══════════════════════════════════════════════════════════════════════════ */

.agh {
    position: relative;
    overflow: hidden;
    padding-block: clamp(52px, 6.5vw, 96px);
}

/* The night behind it: two soft lights, no image. `pointer-events: none`
   because it covers the whole section and the buttons are under it. */
.agh__sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* The two lights DRIFT APART as the opening leaves, and the night thins
   out with them: the headline says «stanotte» and «stamattina», and the
   background does what the words do. `--agh-dawn` goes 0 → 1 with the
   scroll and the script writes nothing else — two transforms and an
   opacity, so there is nothing to repaint. */
.agh__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}

.agh__glow--a {
    width: 52%; aspect-ratio: 1;
    top: -22%; right: -12%;
    background: radial-gradient(circle, var(--bbx-blue-500) 0%, transparent 68%);
    transform: translate3d(calc(var(--agh-dawn, 0) * 9%), calc(var(--agh-dawn, 0) * -22%), 0)
               scale(calc(1 + var(--agh-dawn, 0) * .35));
    opacity: calc(.5 + var(--agh-dawn, 0) * .34);
}

.agh__glow--b {
    width: 44%; aspect-ratio: 1;
    bottom: -28%; left: -14%;
    background: radial-gradient(circle, var(--bbx-blue-400) 0%, transparent 70%);
    opacity: calc(.32 + var(--agh-dawn, 0) * .26);
    transform: translate3d(calc(var(--agh-dawn, 0) * -7%), calc(var(--agh-dawn, 0) * 16%), 0);
}

.agh__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
}

.agh__h1 {
    font-size: clamp(33px, 4.6vw, 58px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 14px 0 16px;
}

.agh__lede {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.58;
    color: rgba(255, 255, 255, .78);
    max-width: 34em;
}

.agh__cta { display: flex; flex-wrap: wrap; gap: var(--lp-3); margin-top: clamp(22px, 3vw, 32px); }
.agh__below { margin-top: var(--lp-3); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .58); max-width: 32em; }


/* ── the console ──────────────────────────────────────────────────────────
   A card of glass on the night. The border carries it, not the shadow. */

.agr {
    position: relative;
    /* The lean towards the pointer. A degree and a half: enough to be
       alive, not enough to be noticed — a card that tilts like a toy is a
       card nobody believes is a product. On a touch screen the script never
       writes the two values and the fallbacks hold it flat. */
    transform: perspective(1200px)
               rotateX(var(--agr-tilt-x, 0deg))
               rotateY(var(--agr-tilt-y, 0deg));
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--lp-radius-card);
    padding: clamp(14px, 1.8vw, 20px);
    box-shadow: 0 24px 60px rgba(0, 15, 31, .38);
    backdrop-filter: blur(6px);
}

.agr__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.agr__face {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(0, 128, 246, .22);
    border: 1px solid rgba(92, 179, 255, .4);
    color: var(--bbx-blue-200);
}

.agr__who { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.agr__who b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.agr__who i { font-size: 12px; font-style: normal; color: rgba(255, 255, 255, .55); }

/* The state. It says «closed» in the markup, which is what a reader without
   the script must see; the script puts «in corso» in while it plays. */
.agr__state {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: lowercase;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--lp-radius-pill);
    padding: 4px 10px;
}

.agr__state::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lp-ok-ink);
    box-shadow: 0 0 0 3px rgba(10, 110, 82, .22);
}

/* While it plays the dot is the accent and it breathes: it is the only thing
   on this card that says «now», and it stops as soon as the run closes. */
.agr.is-play .agr__state { color: #fff; }
.agr.is-play .agr__state::before { background: var(--bbx-blue-300); box-shadow: 0 0 0 3px rgba(92, 179, 255, .24); }


/* ── the steps ─────────────────────────────────────────────────────────── */

/* The clip: a window on the list, and it does not move. Measured on the
   nine real steps, this is the height of five of them — the rest arrive by
   sliding, and the counters stay where they are. */
.agr__clip {
    overflow: hidden;
    max-height: 250px;
    padding: 10px 0 12px;

    /* The row going out of the top dissolves instead of being cut: a step
       sliced across the middle of its own line reads as a card that broke.
       The black inside the gradient is not a colour — in a mask it is the
       alpha channel — so there is no token for it to consume. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
}

.agr__steps {
    list-style: none;
    display: grid;
    gap: 2px;
}

.agr__step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 7px 8px;
    border-radius: 9px;
}

.agr__time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bbx-blue-300);
    letter-spacing: .01em;
}

.agr__what { font-size: 13.5px; line-height: 1.42; color: rgba(255, 255, 255, .8); }

/* The one that waits for a person: it is the only step with a ground of its
   own, because it is the only one that is not finished. */
.agr__step--wait { background: rgba(0, 128, 246, .13); }
.agr__step--wait .agr__what { color: #fff; }


/* ── the three numbers ─────────────────────────────────────────────────── */

.agr__counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-2);
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.agr__counts > div { min-width: 0; }

.agr__counts dt {
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .52);
}

.agr__counts dd {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    margin-top: 2px;
}


/* ── what is left to a person ──────────────────────────────────────────── */

.agr__wait { padding-top: 12px; }

.agr__waitlab {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
    color: var(--bbx-blue-200);
    margin-bottom: 10px;
}

.agr__pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bbx-blue-300);
    flex: none;
}

.agr__btns { display: flex; gap: var(--lp-2); }

/* They are spans, not buttons: a control you can tab to that answers
   nothing is worse than a picture of one. */
.agr__btn {
    font-size: 13px; font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--lp-radius-control);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78);
}

.agr__btn--yes {
    background: var(--lp-accent);
    border-color: transparent;
    color: #fff;
}

/* The replay. The script writes it — without javascript there is nothing to
   replay — so there is no empty slot waiting for it in the markup. */
.agr__replay {
    position: absolute;
    right: clamp(14px, 1.8vw, 20px);
    bottom: calc(100% + 10px);
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: rgba(255, 255, 255, .64);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--lp-radius-pill);
    padding: 5px 12px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.agr__replay:hover { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .11); }
.agr__replay svg { flex: none; }


/* ── the motion of the console ─────────────────────────────────────────── *
   The resting state is the end of the run. `.is-play` rewinds it: the steps
   go back to nothing and arrive one at a time, the list scrolls itself, the
   waiting card comes last. The script keeps the turns — the choreography is
   all here. */

.js .agr.is-play .agr__step {
    opacity: 0;
    transform: translateY(5px);
}

.js .agr.is-play .agr__step.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 320ms cubic-bezier(.22, .61, .36, 1), transform 320ms cubic-bezier(.22, .61, .36, 1);
}

/* The list follows the step that has just arrived: with nine steps and room
   for five, the last four would be written off the card. The script writes
   `--agr-scroll`, and it is the LIST that moves inside the clip. */
.js .agr .agr__steps {
    transform: translateY(calc(var(--agr-scroll, 0) * -1px));
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}

.js .agr.is-play .agr__wait { opacity: 0; transform: translateY(6px); }

.js .agr.is-play.is-done .agr__wait {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease 120ms, transform 420ms cubic-bezier(.22, .61, .36, 1) 120ms;
}

/* The dot of the thing that is waiting: it keeps breathing, because it is
   still waiting. It is the only loop on the page, and it is three pixels
   wide. */
@media (prefers-reduced-motion: no-preference) {
    .agr__pulse { animation: agr-pulse 2.4s var(--bbx-ai-ease) infinite; }
}

@keyframes agr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(92, 179, 255, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(92, 179, 255, 0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1b · THE BAR — the day goes on while you read

   The thing that follows you. From the moment the opening leaves to the
   moment the closing arrives it sits at the bottom of the screen and walks
   the SAME day the console just showed: the hour advances, the line
   changes, the three numbers climb, and at the end it is twenty to six and
   one thing is waiting for a person.

   IT IS SLIM ON PURPOSE. A panel in the corner would be a second page
   competing with the one being read; this is one line, the height of a
   button, and it says the one thing that cannot be said on a still page —
   that the work carries on while nobody is watching.

   It is built by the script and it is `aria-hidden`: every word in it is
   already in the console above, and a screen reader would read the day
   twice.
   ═══════════════════════════════════════════════════════════════════════════ */

.agday {
    position: fixed;
    z-index: 40;              /* over the page, under the header and the popups */
    left: 50%;
    bottom: calc(18px + var(--agday-lift, 0px));
    width: min(calc(100vw - 32px), var(--lp-shell));

    /* It is not there until the opening has gone: the script says when, and
       until then it must not take a click from anything underneath. */
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 18px, 0);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, .61, .36, 1),
                bottom 260ms ease;
}

.agday.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

.agday__in {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lp-4);
    padding: 10px 18px;
    border-radius: var(--lp-radius-pill);

    /* The night, carried down the page: this bar is the console's, and on a
       white section it has to go on reading as a piece of the same thing. */
    background: rgba(0, 41, 82, .94);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 48px rgba(0, 15, 31, .3);
    backdrop-filter: blur(10px);
    color: #fff;
}

.agday__who {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
}

.agday__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bbx-blue-300);
    flex: none;
}

@media (prefers-reduced-motion: no-preference) {
    .agday__dot { animation: agr-pulse 2.4s var(--bbx-ai-ease) infinite; }
}

.agday__time {
    font-size: 15px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--bbx-blue-200);
    padding-left: var(--lp-4);
    border-left: 1px solid rgba(255, 255, 255, .16);
    white-space: nowrap;
}

/* The line that changes. ONE line, clipped: a bar that grows a second line
   when the sentence is longer moves the page under it every few seconds. */
.agday__what {
    font-size: 13.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .82);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* It arrives from under: the class comes off and back on, so a line that
   replaces another is seen to replace it. */
.agday__what.is-new { animation: agday-say 420ms cubic-bezier(.22, .61, .36, 1); }

@keyframes agday-say { from { opacity: 0; transform: translateY(5px); } }

.agday__n { display: flex; gap: var(--lp-4); margin: 0; }

.agday__n > div {
    display: flex; align-items: baseline; gap: 5px;
    white-space: nowrap;
}

.agday__n dt { font-size: 11px; color: rgba(255, 255, 255, .5); margin: 0; order: 2; }

.agday__n dd {
    font-size: 15px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin: 0;
    order: 1;
}

/* And at the end of the day the bar says the one thing that is left. */
.agday.is-wait .agday__in { border-color: rgba(92, 179, 255, .5); }
.agday.is-wait .agday__time { color: #fff; }

@media (max-width: 860px) {

    .agday__in { grid-template-columns: auto minmax(0, 1fr); gap: var(--lp-3); padding: 9px 14px; }

    /* On a phone the name and the three numbers go: what is worth a strip
       of a small screen is the hour and what is being done at it. */
    .agday__who, .agday__n { display: none; }

    .agday__time { padding-left: 0; border-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2 · THE CONVERSATION — the block the page rests on
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE SECTION IS MADE TALL AND THE INSIDE IS STUCK TO THE SCREEN: the
   exchange writes itself as you go past it, a turn at a time, and scrolling
   back up unwrites it. `.is-told` is put on by the script — without it the
   section is its own height and the exchange is simply all there, which is
   the resting state and what a reader without javascript gets.

   ONLY ON A SCREEN THAT HOLDS BOTH COLUMNS. Stacked, the card is below the
   text, and pinning would hold the text on the screen while the
   conversation wrote itself out of sight — the reader would scroll through
   the whole thing and never see it happen. There the section keeps its own
   height, the card comes up the screen like anything else, and the turns
   arrive as it does: the script asks this sheet which of the two shapes it
   is in, by measuring, so there is no breakpoint written twice.

   `min-height` and not `height`: in a language that writes longer the three
   points on the left grow, and a fixed height would cut them. */
@media (min-width: 901px) {

    .agt.is-told { min-height: 300vh; }

    /* Stuck, it FILLS the screen and centres what is on it: with only its
       own height it left a band of nothing under it for the whole travel,
       which reads as a page that broke rather than as room to breathe.

       62px is the header, which is sticky too; the 92 at the bottom is the
       bar, which a stuck block would otherwise park its last line under. */
    .agt.is-told .agt__inner {
        position: sticky;
        top: 62px;
        min-height: calc(100vh - 62px);
        align-content: center;
        padding-bottom: 92px;
    }
}

.agt__inner {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.agt__text .sec__lede { margin-bottom: clamp(24px, 3vw, 34px); }

.agt__points { list-style: none; display: grid; gap: var(--lp-5); }

.agt__point { padding-left: 18px; border-left: 2px solid var(--lp-border); }
.agt__point h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.agt__point p { font-size: 15px; line-height: 1.55; color: var(--lp-ink-soft); }

/* The point whose turn is on screen is the one the line marks. The script
   moves `.is-here` as the conversation goes: the left column stops being a
   caption and becomes the legend of what is happening on the right. */
.agt__point.is-here { border-left-color: var(--lp-accent); }
.agt__point { transition: border-color 260ms ease; }


/* ── the window ───────────────────────────────────────────────────────── */

.agc {
    position: relative;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    box-shadow: var(--bbx-shadow-lg);
    overflow: hidden;
}

.agc__top {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-border);
    background: var(--bbx-gray-25);
}

.agc__face {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-deep);
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
}

.agc__who { display: grid; gap: 1px; min-width: 0; }
.agc__who b { font-size: 14px; font-weight: 700; }
.agc__who i { font-size: 12px; font-style: normal; color: var(--lp-ink-soft); }

.agc__thread {
    display: grid;
    gap: var(--lp-3);
    padding: clamp(16px, 2vw, 22px);
}

.agc__turn { display: grid; gap: 4px; max-width: 86%; }
.agc__turn--agent { justify-self: start; }
.agc__turn--person { justify-self: end; justify-items: end; }

.agc__sign {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .02em;
    color: var(--lp-accent-press);
}

.agc__sign::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--lp-accent);
}

.agc__bubble {
    font-size: 14.5px;
    line-height: 1.5;
    padding: 11px 14px;
    border-radius: 14px;
}

.agc__turn--agent .agc__bubble {
    background: var(--lp-accent-tint);
    color: var(--bbx-gray-800);
    border-bottom-left-radius: 5px;
}

.agc__turn--person .agc__bubble {
    background: var(--bbx-gray-100);
    color: var(--bbx-gray-800);
    border-bottom-right-radius: 5px;
    text-align: left;
}

/* «sta scrivendo»: the script puts it in and takes it out. Three dots, and
   they are the only thing on this card that loops. */
.agc__typing {
    display: inline-flex; align-items: center; gap: 7px;
    justify-self: start;
    font-size: 12px;
    color: var(--lp-ink-soft);
    padding: 9px 13px;
    background: var(--bbx-gray-50);
    border-radius: 14px;
    border-bottom-left-radius: 5px;
}

.agc__dots { display: inline-flex; gap: 3px; }
.agc__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--bbx-gray-400); display: block; }

@media (prefers-reduced-motion: no-preference) {
    .agc__dots i { animation: agc-dot 1.1s var(--bbx-ai-ease) infinite; }
    .agc__dots i:nth-child(2) { animation-delay: .14s; }
    .agc__dots i:nth-child(3) { animation-delay: .28s; }
}

@keyframes agc-dot {
    0%, 60%, 100% { opacity: .3; transform: none; }
    30%           { opacity: 1;  transform: translateY(-2px); }
}


/* ── what it wrote in the product ──────────────────────────────────────── */

.agc__done {
    justify-self: stretch;
    background: var(--lp-ok-soft);
    border: 1px solid rgba(10, 110, 82, .2);
    border-radius: 14px;
    padding: 14px 16px;
}

.agc__donetop {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800;
    letter-spacing: -.005em;
    color: var(--lp-ok-ink);
}

.agc__tick {
    flex: none;
    width: 19px; height: 19px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-ok-ink);
    color: #fff;
}

.agc__doneday { font-size: 12px; color: var(--lp-ink-soft); margin-top: 8px; }

.agc__donehours { margin-top: 2px; font-size: 15px; color: var(--bbx-gray-800); }
.agc__donehours b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.agc__donehours span { font-size: 13px; color: var(--lp-ink-soft); }

.agc__donewho { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--lp-ok-ink); }

.agc__donelog {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(10, 110, 82, .16);
    font-size: 12px;
    color: var(--lp-ink-soft);
}

.agc__replay {
    position: absolute;
    right: 14px; top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--lp-ink-soft);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    padding: 5px 11px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.agc__replay:hover { color: var(--lp-accent-press); border-color: var(--lp-accent); }


/* ── the motion of the conversation ────────────────────────────────────── *
   Resting: the whole exchange, in order, card in place. `.is-play` empties
   it and writes it back one turn at a time. */

.js .agc.is-play .agc__turn,
.js .agc.is-play .agc__done {
    opacity: 0;
    /* It arrives from the side it belongs to: the agent's from the left, the
       person's from the right. Six pixels — a bubble that flies in from the
       edge is a chat application, not a conversation. */
    transform: translate3d(-6px, 7px, 0);
    transition: opacity 300ms ease, transform 340ms cubic-bezier(.22, .61, .36, 1);
}

.js .agc.is-play .agc__turn--person { transform: translate3d(6px, 7px, 0); }
.js .agc.is-play .agc__done { transform: translate3d(0, 10px, 0) scale(.985); }

.js .agc.is-play .agc__turn.is-in,
.js .agc.is-play .agc__done.is-in {
    opacity: 1;
    transform: none;
}

/* The thread keeps its height while it fills, or the section below would
   climb up the page turn after turn. The script measures the finished
   exchange once and writes it here. */
.js .agc.is-play .agc__thread { min-height: var(--agc-h, auto); align-content: start; }


/* ═══════════════════════════════════════════════════════════════════════════
   3 · THE ROSTER — eight real agents, and you pick one
   ═══════════════════════════════════════════════════════════════════════════ */

.ags__box {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
}

/* ── the rail ─────────────────────────────────────────────────────────── */

.ags__rail { display: grid; gap: 4px; }

/* The rail stays while the card is read. A card with four steps and three
   «never» is twice the height of the list beside it: unstuck, the thing you
   choose with scrolls away while you are reading what you chose, and going
   back to the next agent means scrolling up. */
@media (min-width: 1061px) {
    .ags__rail { position: sticky; top: 86px; }
}

.ags__pick {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: var(--lp-radius-control);
    background: transparent;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ags__pick:hover { background: var(--lp-surface); border-color: var(--lp-border); }

.ags__pick.is-on {
    background: var(--lp-surface);
    border-color: var(--lp-border);
    box-shadow: var(--bbx-shadow-sm);
}

.ags__sign {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--bbx-gray-100);
    color: var(--lp-ink-soft);
    transition: background 160ms ease, color 160ms ease;
}

.ags__pick.is-on .ags__sign { background: var(--lp-accent-tint); color: var(--lp-accent-press); }

.ags__pickt { display: grid; gap: 1px; min-width: 0; }
.ags__pickt b { font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--lp-ink); }
.ags__pickt i { font-size: 12px; font-style: normal; color: var(--lp-ink-soft); }

.ags__pick.is-on .ags__pickt b { color: var(--lp-accent-press); }


/* ── the card ─────────────────────────────────────────────────────────── */

.ags__cards { position: relative; }

.ags__card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    box-shadow: var(--bbx-shadow-md);
    padding: clamp(20px, 2.4vw, 30px);
}

/* Without javascript all eight are here, one under the other: the page gets
   longer and says exactly the same things. */
.ags__card + .ags__card { margin-top: var(--lp-4); }

.ags__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }

.ags__sign--big {
    grid-row: span 2;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-press);
}

.ags__name { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ags__claim { font-size: 15px; line-height: 1.45; color: var(--lp-ink-soft); }

.ags__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--lp-2) var(--lp-5);
    margin: var(--lp-5) 0;
    padding: var(--lp-4) 0;
    border-top: 1px solid var(--lp-border);
    border-bottom: 1px solid var(--lp-border);
}

.ags__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-ink-soft); }
.ags__facts dd { font-size: 14.5px; line-height: 1.4; margin-top: 3px; color: var(--lp-ink); }

.ags__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); }

.ags__ct {
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-ink-soft);
    margin-bottom: var(--lp-3);
}

.ags__col--no .ags__ct { color: var(--bbx-gray-400); }

.ags__how { list-style: none; counter-reset: ag; display: grid; gap: var(--lp-3); }

.ags__how li {
    counter-increment: ag;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-ink);
}

.ags__how li::before {
    content: counter(ag);
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-press);
    font-size: 11px; font-weight: 800;
    margin-top: 1px;
}

.ags__never { list-style: none; display: grid; gap: var(--lp-3); }

.ags__never li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-ink-soft);
}

/* The dash is drawn INSIDE the circle, with a gradient: a second absolute
   element would need a positioned ancestor, and an `li` of a list is not
   one — the dash ended up wherever the page happened to be. */
.ags__never li::before {
    content: "";
    width: 20px; height: 20px;
    border-radius: 50%;
    margin-top: 1px;
    background:
        linear-gradient(var(--bbx-gray-400), var(--bbx-gray-400)) center / 8px 1.5px no-repeat,
        var(--bbx-gray-100);
}

.ags__key {
    margin-top: clamp(20px, 2.4vw, 30px);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lp-ink-soft);
    max-width: 52em;
}

.ags__key strong { color: var(--lp-ink); font-weight: 700; }


/* ── the motion of the roster ─────────────────────────────────────────── *
   The script turns eight stacked sections into one picker: it hides the
   seven that are not chosen, and the chosen one fades in. Before the script
   arrives nothing is hidden. */

.js .ags__box.is-live .ags__card { display: none; }
.js .ags__box.is-live .ags__card.is-on { display: block; }
.js .ags__box.is-live .ags__card + .ags__card { margin-top: 0; }

.js .ags__box.is-live .ags__card.is-on {
    animation: ags-in 320ms cubic-bezier(.22, .61, .36, 1);
}

@keyframes ags-in { from { opacity: 0; transform: translateY(6px); } }

/* The rail arrives in sequence, once, when the section comes on screen. */
.js .ags__rail .ags__pick { opacity: 0; transform: translateX(-6px); }

.js .ags__rail.is-on .ags__pick {
    animation: ags-pick 380ms cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i) * 55ms);
}

@keyframes ags-pick { to { opacity: 1; transform: none; } }

/* Inside the card the steps come in too: it is the same card with a
   different content, and a content that appears all at once reads as a
   flash. */
.js .ags__box.is-live .ags__card.is-on .ags__how li,
.js .ags__box.is-live .ags__card.is-on .ags__never li {
    animation: ags-row 340ms cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: calc(140ms + var(--i) * 60ms);
}

@keyframes ags-row { from { opacity: 0; transform: translateY(5px); } }


/* ═══════════════════════════════════════════════════════════════════════════
   4 · INSIDE ONE RUN — five stations, and a line that fills
   ═══════════════════════════════════════════════════════════════════════════ */

.agn__line {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--lp-5);
}

/* ── THE JOURNEY, on a screen wide enough to travel on ───────────────────
   Armed, `.agn__road` is the LENGTH of the journey and `.agn__stage` is what
   stays on the screen while it goes past: the heading holds still and the
   five stations travel sideways. `--agn-at` (0 → 1) and `--agn-span` (how
   much there is to travel, in pixels) are the two numbers the script
   writes; everything else is this sheet.

   The three wake-ups and the line about cost are OUTSIDE the road, so they
   arrive once the journey is over — inside the stage they made the stuck
   block taller than the screen, and its last line unreadable.

   Unarmed — no javascript, «reduce motion» — the road is nothing and the
   five stations are five columns, all lit. And under 900 the same progress
   lights them down a vertical line instead of moving them: a row of five on
   a phone is five columns of two words. One number, two drawings. */
@media (min-width: 901px) {

    .agn.is-armed .agn__road { min-height: 220vh; }

    /* THE STAGE FILLS THE SCREEN AND CENTRES WHAT IS ON IT. Stuck at the
       top with only its own height it left two thirds of the window empty
       for the whole journey, which reads as a page that broke rather than
       as room to breathe. Filling the screen and centring, the same air is
       above and below the rail and it reads as a stage.

       62px is the header, which is sticky too; the 92 at the bottom is the
       bar, which a stuck block would otherwise park its last line under. */
    .agn.is-armed .agn__stage {
        position: sticky;
        top: 62px;
        min-height: calc(100vh - 62px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 92px;
    }

    .agn.is-armed .agn__stage > .lp-shell { width: 100%; }

    /* The window. It bleeds to the right edge of the screen on purpose: a
       strip that stops at the shell's margin looks like a row that happens
       to be cut, and one that runs off the side says there is more coming. */
    .agn.is-armed .agn__track {
        overflow: hidden;
        margin-right: calc((100vw - min(100vw, var(--lp-shell))) / -2 - 20px);
        padding: 4px 40px 4px 0;

        /* The card going out dissolves instead of being cut: clipped square
           at the margin it reads as text that broke, faded it reads as a
           card that has gone past. The black inside the gradient is not a
           colour — in a mask it is the alpha channel — so there is no token
           for it to consume. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 96px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 96px), transparent 100%);
    }

    /* The rail. Three and a bit on screen at a time: four is a row of
       columns of two words, two is a slideshow — and a sequence has to be
       SEEN as one, with what comes next already in the corner of the eye. */
    .agn.is-armed .agn__line {
        display: flex;
        gap: clamp(20px, 2.4vw, 36px);
        transform: translate3d(calc(var(--agn-at, 0) * var(--agn-span, 0px) * -1), 0, 0);
        will-change: transform;
    }

    .agn.is-armed .agn__stat { flex: 0 0 clamp(250px, 27vw, 340px); }

    /* Travelling, the segment between two stations is the gap between two
       cards and not a line across a column. */
    .agn.is-armed .agn__stat::before,
    .agn.is-armed .agn__stat::after { right: calc(clamp(20px, 2.4vw, 36px) * -1); }

    .agn.is-armed .agn__stat.is-on::after { width: calc(100% - 30px + clamp(20px, 2.4vw, 36px)); }
}

.agn__stat { position: relative; padding-top: 42px; display: flex; flex-direction: column; }

/* The line is made of SEGMENTS, one per station: from this number to the
   next. A single line laid over the container would have to be measured
   against the centre of each column — and the number is not at the centre of
   its column, it is at its left edge. */
.agn__stat::before {
    content: "";
    position: absolute;
    top: 14px; left: 30px; right: calc(var(--lp-5) * -1);
    height: 2px;
    background: var(--lp-border);
}

.agn__stat:last-child::before { display: none; }

.agn__stat::after {
    content: "";
    position: absolute;
    top: 14px; left: 30px;
    width: 0;
    height: 2px;
    background: var(--lp-accent);
    transition: width 520ms cubic-bezier(.33, 1, .68, 1);
}

.agn__stat.is-on::after { width: calc(100% - 30px + var(--lp-5)); }
.agn__stat:last-child::after { display: none; }

.agn__num {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-surface);
    border: 2px solid var(--lp-border);
    color: var(--lp-ink-soft);
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background 260ms ease, border-color 260ms ease, color 260ms ease;
}

.agn__stat.is-on .agn__num {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.agn__name { font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 6px; }
.agn__p { font-size: 14.5px; line-height: 1.5; color: var(--lp-ink-soft); }

.agn__note {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--lp-border);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bbx-gray-400);
}


/* ── the three wake-ups ───────────────────────────────────────────────── */

.agn__wakes {
    margin-top: clamp(40px, 5vw, 68px);
    padding: clamp(22px, 2.8vw, 34px);
    background: var(--lp-page);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
}

.agn__wt { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--lp-5); }

.agn__wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--lp-5); }

.agn__wake { padding-left: 18px; border-left: 2px solid var(--bbx-gray-200); }
.agn__wake h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.agn__wake p { font-size: 14px; line-height: 1.5; color: var(--lp-ink-soft); }

.agn__wdot { display: none; }

.agn__wk {
    margin-top: var(--lp-5);
    padding-top: var(--lp-4);
    border-top: 1px solid var(--lp-border);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lp-ink-soft);
}

.agn__wk strong, .agn__key strong { color: var(--lp-ink); font-weight: 700; }

.agn__key {
    margin-top: clamp(22px, 2.6vw, 32px);
    font-size: 15px;
    line-height: 1.55;
    color: var(--lp-ink-soft);
    max-width: 48em;
}

/* The line fills as you scroll: the script moves `.is-on` down the
   stations. Resting — no javascript, or reduce motion — they are all on,
   which is a full line and five lit numbers. */
.js .agn__line.is-armed .agn__stat:not(.is-on) .agn__num { background: var(--lp-surface); border-color: var(--lp-border); color: var(--lp-ink-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   5 · THE DIAL — two positions, and one row that does not move
   ═══════════════════════════════════════════════════════════════════════════ */

.agd__box {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

.agd__dial { border: 0; padding: 0; margin: 0; min-width: 0; }

.agd__legend {
    padding: 0;
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-ink-soft);
    margin-bottom: var(--lp-3);
}

/* The radios are the state of the dial. They are not display:none — a
   hidden input cannot take the focus, and then the arrow keys do not move
   the group and the dial is unreachable from a keyboard. They are the size
   of nothing, over the label they belong to. */
.agd__radio {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.agd__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--bbx-gray-100);
    border-radius: 14px;
}

.agd__opt {
    position: relative;
    z-index: 1;
    display: grid; gap: 2px;
    padding: 13px 16px;
    border-radius: 11px;
    cursor: pointer;
    transition: color 200ms ease;
}

.agd__opt b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--lp-ink-soft); transition: color 200ms ease; }
.agd__opt i { font-size: 13px; font-style: normal; line-height: 1.45; color: var(--bbx-gray-400); transition: color 200ms ease; }

/* The knob: one element that slides, so the movement is a movement and not
   two backgrounds swapping. */
.agd__knob {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 6px);
    background: var(--lp-surface);
    border-radius: 11px;
    box-shadow: var(--bbx-shadow-md);
    transition: transform 320ms cubic-bezier(.33, 1, .68, 1);
}

#ag-dial-high:checked ~ .agd__track .agd__knob { transform: translateX(calc(100% + 4px)); }

#ag-dial-low:checked  ~ .agd__track .agd__opt:nth-of-type(1) b,
#ag-dial-high:checked ~ .agd__track .agd__opt:nth-of-type(2) b { color: var(--lp-accent-press); }

#ag-dial-low:checked  ~ .agd__track .agd__opt:nth-of-type(1) i,
#ag-dial-high:checked ~ .agd__track .agd__opt:nth-of-type(2) i { color: var(--lp-ink-soft); }

/* The focus ring goes on the label, because the input is the size of
   nothing: without this the dial can be reached with the tab key and there
   is no way to see that it has been. */
.agd__radio:focus-visible ~ .agd__track .agd__opt { outline: 0; }
#ag-dial-low:focus-visible  ~ .agd__track .agd__opt:nth-of-type(1),
#ag-dial-high:focus-visible ~ .agd__track .agd__opt:nth-of-type(2) {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
}


/* ── the rows that change ─────────────────────────────────────────────── */

.agd__rows { list-style: none; display: grid; margin-top: var(--lp-5); }

.agd__row {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: var(--lp-2) var(--lp-5);
    align-items: start;
    padding: var(--lp-4) 0;
    border-bottom: 1px solid var(--lp-border);
}

.agd__row:first-child { border-top: 1px solid var(--lp-border); }

.agd__what { font-size: 15px; font-weight: 700; line-height: 1.4; }

/* Both sentences are in the markup: that is what makes the swap a cross-fade
   instead of a rewrite, and what keeps the row readable with the stylesheet
   half applied. They are STACKED, so the row does not change height when the
   two sentences have different lengths — which they always do. */
.agd__says { position: relative; display: grid; }

.agd__low, .agd__high {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--lp-ink-soft);
    grid-area: 1 / 1;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.22, .61, .36, 1);
}

#ag-dial-low:checked  ~ .agd__rows .agd__high,
#ag-dial-high:checked ~ .agd__rows .agd__low { opacity: 0; transform: translateY(-4px); pointer-events: none; }

#ag-dial-low:checked  ~ .agd__rows .agd__low,
#ag-dial-high:checked ~ .agd__rows .agd__high { opacity: 1; transform: none; }


/* ── and this one does not move ───────────────────────────────────────── */

.agd__lock {
    position: relative;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--lp-dark);
    color: var(--lp-ink-invert);
    border-radius: var(--lp-radius-card);
    overflow: hidden;
}

.agd__lockbadge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .04em;
    color: var(--bbx-blue-200);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--lp-radius-pill);
    padding: 5px 11px;
    margin-bottom: var(--lp-4);
}

.agd__lockic { display: grid; place-items: center; }

.agd__lockt { font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: var(--lp-3); color: #fff; }
.agd__lockp { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .76); }
.agd__lockp strong { color: #fff; font-weight: 700; }

/* A shimmer across the badge when the dial moves: the one place where the
   page says «and look, this did not change». The script adds `.is-hit` for
   a moment. */
.agd__lock.is-hit .agd__lockbadge { animation: agd-hit 900ms var(--bbx-ai-ease); }

@keyframes agd-hit {
    0%   { box-shadow: 0 0 0 0 rgba(92, 179, 255, .5); }
    100% { box-shadow: 0 0 0 10px rgba(92, 179, 255, 0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · THE LIMITS — the half that decides whether to trust it
   ═══════════════════════════════════════════════════════════════════════════ */

.agl__head { max-width: 46em; margin-bottom: clamp(28px, 3.5vw, 44px); }
.agl__lede { font-size: 17px; line-height: 1.6; color: var(--bbx-blue-100); max-width: 40em; }

.agl__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }

.agl__col { padding-top: var(--lp-4); border-top: 2px solid rgba(255, 255, 255, .2); }
.agl__col--yes { border-top-color: rgba(92, 179, 255, .55); }

.agl__ct {
    font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    margin-bottom: var(--lp-4);
}

.agl__col--yes .agl__ct { color: var(--bbx-blue-200); }

.agl__list { list-style: none; display: grid; gap: var(--lp-4); }

.agl__list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
}

.agl__ic {
    flex: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid; place-items: center;
    margin-top: 2px;
}

.agl__ic--yes { background: rgba(92, 179, 255, .22); color: var(--bbx-blue-200); }
.agl__ic--no  { background: rgba(255, 255, 255, .1);  color: rgba(255, 255, 255, .6); }

.agl__key {
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: var(--lp-5);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
    max-width: 52em;
}

.agl__key strong { color: #fff; font-weight: 700; }

/* The rows arrive, once, and then this block stands still: here you read. */
.js .agl__col .agl__list li { opacity: 0; transform: translateY(6px); }

.js .agl__col.is-on .agl__list li {
    animation: agl-in 400ms cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i) * 70ms);
}

@keyframes agl-in { to { opacity: 1; transform: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   7 · THE ONE YOU DICTATE
   ═══════════════════════════════════════════════════════════════════════════ */

.agb__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
}

.agb__ask, .agb__got {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: clamp(18px, 2.2vw, 26px);
    box-shadow: var(--bbx-shadow-sm);
}

.agb__label {
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-ink-soft);
    margin-bottom: var(--lp-3);
}

.agb__said {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.5;
    color: var(--lp-ink);
}

/* The sentence is a sentence in the source; the script splits it into words
   so it can type itself. A word is a span with its own `--i`. */
.js .agb__box.is-play .agb__said span { opacity: 0; }

.js .agb__box.is-play .agb__said span.is-in {
    opacity: 1;
    transition: opacity 180ms ease;
}

/* The arrow is drawn pointing DOWN, which is where it points once the two
   cards stack. Side by side it is turned: an arrow that says «down» between
   two things that sit left and right points at nothing. */
.agb__arrow {
    display: grid;
    place-items: center;
    gap: var(--lp-2);
    color: var(--bbx-gray-300);
}

.agb__arrow svg { transform: rotate(-90deg); }

.agb__think {
    font-size: 12px;
    color: var(--lp-accent-press);
    text-align: center;
    min-height: 1.2em;
    white-space: nowrap;
}

.agb__gott {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800;
    letter-spacing: -.005em;
    color: var(--lp-accent-press);
    margin-bottom: var(--lp-4);
}

.agb__spark { display: grid; place-items: center; }

.agb__pills { display: grid; gap: var(--lp-2); }

.agb__pill {
    font-size: 14px;
    line-height: 1.4;
    padding: 9px 13px;
    background: var(--lp-accent-tint);
    color: var(--bbx-blue-800);
    border-radius: var(--lp-radius-control);
    font-weight: 600;
}

.agb__try { margin-top: var(--lp-4); }

.agb__trybtn {
    display: inline-block;
    font-size: 14px; font-weight: 700;
    padding: 10px 18px;
    border-radius: var(--lp-radius-control);
    background: var(--lp-accent);
    color: #fff;
}

.agb__trynote { margin-top: var(--lp-3); font-size: 12.5px; line-height: 1.5; color: var(--lp-ink-soft); }

.js .agb__box.is-play .agb__got { opacity: 0; transform: translateY(8px); }

.js .agb__box.is-play.is-got .agb__got {
    opacity: 1;
    transform: none;
    transition: opacity 400ms ease, transform 440ms cubic-bezier(.22, .61, .36, 1);
}

.js .agb__box.is-play .agb__pill { opacity: 0; transform: translateX(-6px); }

.js .agb__box.is-play.is-got .agb__pill {
    animation: agb-pill 380ms cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(240ms + var(--i) * 140ms);
}

@keyframes agb-pill { to { opacity: 1; transform: none; } }

/* It hangs on the half that is always on screen: appended inside «what it
   understood», it would have faded out with it on every rewind. */
.agb__ask { position: relative; }

.agb__replay {
    position: absolute;
    right: 14px; top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--lp-ink-soft);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    padding: 5px 11px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.agb__replay:hover { color: var(--lp-accent-press); border-color: var(--lp-accent); }


/* ── and it talks the way you want ────────────────────────────────────── */

.agb__tone { margin-top: clamp(40px, 5vw, 68px); }

.agb__toneh { max-width: 42em; margin-bottom: var(--lp-5); }
.agb__tonet { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.agb__tonel { font-size: 15px; line-height: 1.55; color: var(--lp-ink-soft); }

.agb__same {
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-ink-soft);
    margin-bottom: var(--lp-3);
}

.agb__tones { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--lp-4); }

.agb__t {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: var(--lp-4) var(--lp-5) var(--lp-5);
}

.agb__t figcaption {
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-accent-press);
    margin-bottom: var(--lp-3);
}

.agb__t blockquote { font-size: 14.5px; line-height: 1.55; color: var(--lp-ink); }

.js .agb__tones .agb__t { opacity: 0; transform: translateY(8px); }

.js .agb__tones.is-on .agb__t {
    animation: agb-t 420ms cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i) * 110ms);
}

@keyframes agb-t { to { opacity: 1; transform: none; } }


/* ── the four steps ──────────────────────────────────────────────────── */

.agb__steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--lp-5);
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 1px solid var(--lp-border);
}

.agb__steps li { display: grid; gap: 6px; }

.agb__sn {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-press);
    font-size: 12px; font-weight: 800;
    margin-bottom: 2px;
}

.agb__steps h4 { font-size: 15.5px; font-weight: 700; }
.agb__steps p { font-size: 14px; line-height: 1.5; color: var(--lp-ink-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   NARROW SCREENS

   Everything stacks, and two things change shape instead of shrinking: the
   roster's rail becomes a strip you swipe, and the five stations become a
   vertical line. A five-column grid at 380px is five columns of two words.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1060px) {

    .agd__box { grid-template-columns: minmax(0, 1fr); }
    .ags__box { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
    .ags__cols { grid-template-columns: minmax(0, 1fr); gap: var(--lp-5); }
}

@media (max-width: 900px) {

    .agh__inner,
    .agt__inner { grid-template-columns: minmax(0, 1fr); }

    .agh__text { max-width: 36em; }

    /* Room for the «rivedi» button, which hangs above the card: stacked, the
       line it would otherwise sit on belongs to the text block. */
    .agh__stage { padding-top: 38px; }

    /* The console no longer clips its list: on a phone the page scrolls, and
       a window that slides inside it is one movement too many on a screen
       that is already moving under a thumb. */
    .agr__clip {
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .js .agr .agr__steps { transform: none; }

    .agc__turn { max-width: 92%; }

    /* The rail above the card, as a strip. The cards keep their place. */
    .ags__box { grid-template-columns: minmax(0, 1fr); }

    .ags__rail {
        grid-auto-flow: column;
        grid-auto-columns: minmax(208px, auto);
        gap: var(--lp-2);
        overflow-x: auto;
        /* It is a strip that is swiped: the edge must say there is more. */
        padding: 2px 2px 10px;
        margin: 0 calc(var(--lp-gutter) * -1);
        padding-inline: var(--lp-gutter);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ags__rail::-webkit-scrollbar { display: none; }
    .ags__pick { scroll-snap-align: start; }

    .agn__line { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .agn__stat { padding: 0 0 var(--lp-5) 44px; }

    /* Vertical now: the segment goes down the left side, from this number to
       the next, and the fill grows downwards. */
    .agn__stat::before {
        top: 30px; bottom: 0; left: 14px; right: auto;
        width: 2px; height: auto;
    }

    .agn__stat::after {
        top: 30px; left: 14px;
        width: 2px; height: 0;
        transition: height 520ms cubic-bezier(.33, 1, .68, 1);
    }

    .agn__stat.is-on::after { width: 2px; height: calc(100% - 30px); }

    .agb__box { grid-template-columns: minmax(0, 1fr); }
    .agb__arrow { justify-self: start; grid-auto-flow: column; }
    .agb__arrow svg { transform: none; }
}

@media (max-width: 720px) {

    .agl__cols { grid-template-columns: minmax(0, 1fr); gap: var(--lp-6); }

    .agd__track { grid-template-columns: minmax(0, 1fr); }
    .agd__knob { width: calc(100% - 8px); height: calc(50% - 6px); bottom: auto; }
    #ag-dial-high:checked ~ .agd__track .agd__knob { transform: translateY(calc(100% + 4px)); }

    .agd__row { grid-template-columns: minmax(0, 1fr); }

    .agr__step { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
    .agr__counts dd { font-size: 24px; }
}

@media (max-width: 480px) {

    .agr__btns { flex-wrap: wrap; }
    .agr__btn { flex: 1 1 auto; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LESS MOTION

   Not «switch off by showing less»: the FINAL state, which is what the page
   rests in anyway. The scenes are already there, the line is full, the
   numbers are at their total — the only thing that goes is the arriving.
   The replay buttons go too: there is nothing to replay.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    /* Nothing is written here to undo the rules above, and that is the
       point: with «reduce» the script never arms a rewind (`.is-play` is
       never added) and switches every scene on at once, so not one of those
       selectors matches. An `!important` here would have been the sign that
       the javascript and the sheet disagree about who decides.

       What is left is the two things the script cannot do. */

    /* The line is full: its fill is a transition, and a transition with
       nothing to animate still animates when the class arrives. */
    .agn__stat::after { transition: none; }

    /* And there is nothing to replay: the scenes never played. */
    .agr__replay, .agc__replay, .agb__replay { display: none; }
}