/* ==========================================================================
   Shared product-page components.

   verbavista.html currently carries its own inline copies of these as `vv-*`.
   They are functionally identical; that page should be migrated onto this
   stylesheet so there is one definition rather than one per product page.
   Extracting them here first avoids creating a third parallel set.

   Depends on css/nav.css for the surface variables.
   ========================================================================== */

/* ------------------------------------------------------------- layout --- */

.aw-sec {
    position: relative;
    padding-top: clamp(3rem, 8vh, 7rem);
    padding-bottom: clamp(3rem, 8vh, 7rem);
    background: transparent;
}

/*
 * There is deliberately no --lift and no --ruled modifier. Both existed: --lift
 * washed a section with rgba(255,255,255,0.025) and --ruled drew a 1px rule at its
 * top edge. Both are gone, because the background is one continuous
 * document-height gradient and any hard edge across it reads as a seam — which is
 * exactly what it got reported as. A section that needs a beat gets .aw-accent
 * below, which is light rather than a line. Do not reintroduce them.
 */

/*
 * The beat between sections, without a seam: a wide, very low-alpha coral bloom
 * anchored to the top edge, faded out well before it reaches an edge of its own.
 * z-index -1 plus isolation keeps it behind the section's own content while
 * staying above the body gradient it sits on.
 */
.aw-accent {
    position: relative;
    isolation: isolate;
}

.aw-accent::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: min(65%, 24rem);
    background: radial-gradient(75% 100% at 50% 0%, rgba(255, 75, 54, 0.08), transparent 72%);
    pointer-events: none;
    z-index: -1;
}

.aw-wrap {
    max-width: 1500px;
    margin-inline: auto;
    padding-left: clamp(1.5rem, 5vw, 6rem);
    padding-right: clamp(1.5rem, 5vw, 6rem);
}

.aw-wrap--narrow { max-width: 900px; }
.aw-wrap--mid { max-width: 1100px; }

/* ---------------------------------------------------------- typography --- */

.aw-h1 {
    color: #FFFFFF;
    font-weight: 900;
    /* the vh term only binds on short viewports — see the note on hero fit */
    font-size: clamp(2.25rem, min(4.6vw, 7.5vh), 4.25rem);
    letter-spacing: -0.03em;
    line-height: 1.07;
}

.aw-h2 {
    color: #FFFFFF;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
}

.aw-h3 {
    color: #FFFFFF;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    letter-spacing: -0.03em;
}

.aw-h4 {
    color: #FFFFFF;
    font-weight: 700;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    letter-spacing: -0.02em;
}

.aw-lede {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    line-height: 1.6;
}

.aw-body {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.65;
}

.aw-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.aw-eyebrow {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.aw-rule {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FF4B36 0%, #FF6B50 100%);
}

/* -------------------------------------------------------------- cards --- */

.aw-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.aw-card--accent {
    border-color: rgba(255, 107, 80, 0.35);
    background: rgba(255, 75, 54, 0.06);
}

a.aw-card { text-decoration: none; display: block; }
a.aw-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.22); }

.aw-icon {
    color: #FF6B50;
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1;
}

.aw-tick {
    color: #FF4B36;
    font-size: 1.25rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.aw-list { list-style: none; padding: 0; margin: 0; }

/*
 * The colour matters as much as the layout here. A bare <span> inside a list
 * item inherits, and nothing up the tree set a colour, so on fanfuel.html the
 * text after each bold label rendered in the UA default black against a
 * background that measures 22 - invisible. This is the same value .aw-body
 * carries, so bullets with and without that class now read identically, and
 * items that do carry it still win on specificity.
 */
.aw-list > li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255, 255, 255, 0.72); }
.aw-list > li + li { margin-top: 1rem; }

/* ------------------------------------------------------------ buttons --- */

.aw-btn,
.aw-btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(0.75rem, 1.6vh, 1rem) clamp(1.5rem, 2.5vw, 2rem);
    border-radius: 0.75rem;
    font-size: clamp(0.9375rem, 1.1vw, 1rem);
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.aw-btn {
    background: linear-gradient(135deg, #FF4B36 0%, #FF6B50 100%);
    box-shadow: 0 4px 12px rgba(255, 75, 54, 0.3);
}

.aw-btn-2 {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.aw-btn:hover, .aw-btn-2:hover { transform: translateY(-2px); }

.aw-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #FF6B50;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

/* ------------------------------------------------ placeholder markers --- */

.aw-todo {
    border: 2px dashed rgba(255, 75, 54, 0.45);
    background: rgba(255, 75, 54, 0.06);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #FF6B50;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.aw-pending {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px dashed rgba(255, 107, 80, 0.5);
    color: #FF6B50;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.aw-gate {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* -------------------------------------------- generic dashboard frame --- */
/*
 * Drawn in CSS. No approved dashboard screenshots exist, and several decks
 * contain live client data, so nothing is pulled from them.
 */
.aw-frame {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    border-radius: clamp(0.75rem, 1.5vw, 1.125rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.aw-frame__bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
}

.aw-frame__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

/*
 * 22/10, not 16/10. The dashboard screenshots this frame exists to hold measure
 * 1532x696 and similar, which is 2.20:1 — at 16:10 object-fit: cover would have
 * taken about 27% off the width, and on a dashboard that means the sidebar or the
 * right-hand panels. Every one of the six is between 2.18 and 2.22, so 2.2 fits
 * them all to within a percent. Only monitoring.html uses .aw-frame.
 */
.aw-frame__screen {
    aspect-ratio: 22 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 75, 54, 0.14) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 55%),
        #150518;
}

.aw-frame__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.aw-frame__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
    padding: 0 1.5rem;
    line-height: 1.6;
}

.aw-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 86vw);
    height: min(520px, 86vw);
    z-index: -10;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 75, 54, 0.24) 0%, rgba(255, 107, 80, 0.12) 40%, transparent 70%);
    filter: blur(60px);
}

/* ----------------------------------------------------- comparison grid --- */
/*
 * One grid, not three cards. Every row is emitted as label + three cells in
 * source order, so rows align by construction — there is no way for a tier to
 * drift out of alignment, which is the failure mode this section is prone to.
 * Wide content scrolls inside its own container so the page never does.
 */
.aw-plans-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    /*
     * width + contain are both needed. overflow-x: auto alone still let the
     * 720px grid contribute its min-content width upward, and mobile Chrome
     * expanded the layout viewport to 670px on a 390px device — the whole page
     * rendered zoomed out. contain: inline-size stops the content sizing this box.
     */
    width: 100%;
    max-width: 100%;
    contain: inline-size;
}

.aw-plans {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
    min-width: 720px;
    gap: 0;
}

.aw-plans__head,
.aw-plans__cell {
    padding: clamp(0.75rem, 1.4vw, 1.125rem) clamp(0.75rem, 1.2vw, 1rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aw-plans__head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.aw-plans__label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
    font-weight: 600;
}

.aw-plans__cell {
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
}

/* the recommended column reads as one continuous band down the grid */
.aw-plans__cell--mid,
.aw-plans__head--mid {
    background: rgba(255, 75, 54, 0.06);
    border-left: 1px solid rgba(255, 107, 80, 0.28);
    border-right: 1px solid rgba(255, 107, 80, 0.28);
}

.aw-plans__tier {
    color: #FFFFFF;
    font-weight: 900;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    letter-spacing: -0.02em;
}

.aw-plans__price {
    color: #FFFFFF;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.aw-plans__per {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-weight: 600;
}

/*
 * Narrow screens: the grid compresses instead of scrolling. overflow-x: auto on
 * .aw-plans-scroll is not enough on its own — Chrome still counts the scroller's
 * content in documentElement.scrollWidth, and mobile Chrome then expands the
 * layout viewport (measured: 670px on a 390px device), rendering the whole page
 * zoomed out. Compressing keeps it a single grid, so rows stay aligned by
 * construction. This block must stay AFTER the base .aw-plans__* rules above:
 * same specificity, so source order decides, and placed earlier the base
 * clamp() font sizes won and the tier names still broke mid-word.
 */
@media (max-width: 800px) {
    .aw-plans {
        min-width: 0;
        grid-template-columns: minmax(96px, 1.3fr) repeat(3, minmax(56px, 1fr));
    }

    .aw-plans__head,
    .aw-plans__cell {
        padding: 0.625rem 0.3125rem;
    }

    .aw-plans__label { font-size: 0.75rem; }
    .aw-plans__cell { font-size: 0.75rem; }
    .aw-plans__per { font-size: 0.625rem; }

    /* Tier names are the only strings long enough to spill out of a cell and
       collide with the next column, so break-word is scoped to them. Applied
       cell-wide it broke prices mid-number ("€28 / 5"). */
    .aw-plans__tier {
        font-size: 0.75rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        overflow-wrap: break-word;
    }

    .aw-plans__price { font-size: 1.0625rem; white-space: nowrap; }
    .aw-plans__cell .aw-btn,
    .aw-plans__cell .aw-btn-2 { padding: 0.5rem 0.5rem; font-size: 0.6875rem; gap: 0.25rem; }
    .aw-pending, .aw-gate { display: none; }
}

.aw-yes { color: #FF6B50; }
.aw-no { color: rgba(255, 255, 255, 0.28); }

/* ------------------------------------------------------------- steps --- */

.aw-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    counter-reset: aw-step;
}

@media (min-width: 900px) {
    .aw-steps { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Coral numerals, same treatment as the connected-stack chips. A step sequence is
 * the one place on a page where the numbers are the navigation, and in white they
 * sat at the same weight as every other bordered circle on the site.
 */
.aw-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.25rem, 3vw, 2.75rem);
    height: clamp(2.25rem, 3vw, 2.75rem);
    border-radius: 999px;
    background: rgba(255, 75, 54, 0.14);
    border: 1px solid rgba(255, 107, 80, 0.4);
    color: #FF6B50;
    font-weight: 900;
    font-size: clamp(0.875rem, 1.1vw, 1rem);
}

/* ==================================================================
   Partner use cases — "How our partners work"

   One component, two modes. On the homepage it is a slider under each
   flagship platform block; on product pages it is a static grid, because a
   visitor who has already chosen the product is reading for depth and hiding
   examples behind a control works against that.

   Deliberately quieter than the block it sits under: smaller type, no card
   shadow, restrained borders. The platform block stays the hero and this is
   the evidence beneath it.

   Every slide is in the HTML at load. Nothing is injected on advance, so all
   of these stories are indexable rather than just the first.
   ================================================================== */

.aw-uc { margin-top: clamp(1.25rem, 3vh, 2rem); }

.aw-uc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.625rem, 1.5vh, 0.875rem);
}

.aw-uc__label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/*
 * A scroll-snap viewport rather than a transform carousel. Native horizontal
 * scrolling gives touch swipe and trackpad gestures for free, keeps every slide
 * in normal flow, and makes "does everything already fit" a plain measurement of
 * scrollWidth against clientWidth — which is how the controls decide to hide.
 */
.aw-uc__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* width and contain together: without them the track's min-content width
       propagates up and mobile Chrome widens the layout viewport */
    width: 100%;
    max-width: 100%;
    contain: inline-size;
}

.aw-uc__viewport::-webkit-scrollbar { display: none; }

.aw-uc__track {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.125rem);
    padding-bottom: 0.25rem;
}

/*
 * Wider slides on purpose. Three sentences in a 20rem card ran to nine lines,
 * which made the slider 476px tall and the whole Mobile apps block 1152px — so
 * the next block sat entirely off a 680px laptop screen. Wider cards mean fewer
 * lines for the same copy, which is height saved without truncating anything.
 */
.aw-uc__slide {
    flex: 0 0 min(24rem, 84%);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(0.75rem, 1.5vw, 1.125rem);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

/* --- logos ------------------------------------------------------- */

/*
 * nowrap, not wrap: the row is a fixed height, so a wrapped second line spills
 * out of it and over the partner name. The News agencies slide is the case that
 * forced this — five real logos at their 4.5rem cap plus four gaps measure wider
 * than a 24rem slide, and they wrapped the moment the wordmarks became images.
 * Shrinking them instead keeps one row at any slide width.
 */
.aw-uc__logos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.625rem, 1.5vw, 1.125rem);
    /* one row, matched optical height, up to five logos on a grouped slide.
       +10% on the client's request; the max-width below moved with it. */
    height: clamp(1.65rem, 2.64vw, 2.2rem);
}

/*
 * partner-loader.js replaces the contents of each <div data-partner> but leaves
 * the div itself, and that wrapper had no height — so the img's max-height: 100%
 * resolved against an auto-height box, the logos rendered at natural size and
 * overflowed the row into the partner name below. The wrapper has to carry the
 * height for the img to measure against.
 */
.aw-uc__logos > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    max-width: clamp(3.3rem, 6.6vw, 4.95rem);
    /* shrink below the cap rather than wrap out of the row */
    flex-shrink: 1;
    min-width: 0;
}

.aw-uc__logos img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/*
 * The brief asked for monochrome logos "as in the partner grid". The partner grid
 * is NOT monochrome — that treatment was tried and explicitly reversed, with
 * "keep the original colours". So colour is kept here for consistency with what
 * is actually live, and the greyscale option is left ready rather than applied.
 * Add aw-uc--mono to a container to switch it on.
 */
.aw-uc--mono .aw-uc__logos img {
    filter: grayscale(1) brightness(1.35) contrast(0.95);
}

/* Fallback for a partner with no usable logo file: the name renders as a text
   wordmark so the slide is never missing its identifier. Nothing uses it now —
   every slide has a logo — but the next unapproved partner will. */
.aw-uc__wordmark {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* --- text -------------------------------------------------------- */

.aw-uc__name {
    margin: 0;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

/* smaller than the parent block's body copy on purpose */
.aw-uc__copy {
    margin: 0;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
}

.aw-uc__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FF6B50;
    text-decoration: none;
}

.aw-uc__link:hover { text-decoration: underline; }

/* --- controls ---------------------------------------------------- */

.aw-uc__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: clamp(0.5rem, 1.2vh, 0.75rem);
}

/* set by js/use-cases.js when the track already fits, where arrows and dots
   would be noise rather than help */
.aw-uc__controls[hidden] { display: none; }

.aw-uc__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.aw-uc__arrow:hover:not(:disabled) { background: rgba(255, 75, 54, 0.18); border-color: rgba(255, 107, 80, 0.5); }
.aw-uc__arrow:disabled { opacity: 0.3; cursor: default; }
.aw-uc__arrow:focus-visible { outline: 2px solid #FF6B50; outline-offset: 2px; }

.aw-uc__dots {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.25rem;
}

.aw-uc__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.aw-uc__dot[aria-current="true"] { background: #FF6B50; transform: scale(1.25); }
.aw-uc__dot:focus-visible { outline: 2px solid #FF6B50; outline-offset: 2px; }

/* --- static mode, for product pages ------------------------------ */

.aw-uc--static .aw-uc__viewport {
    overflow: visible;
    scroll-snap-type: none;
    contain: none;
}

.aw-uc--static .aw-uc__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.aw-uc--static .aw-uc__slide { flex: initial; }
.aw-uc--static .aw-uc__controls { display: none; }

/* one slide given more space than its neighbours, for a lead story */
.aw-uc__slide--lead {
    background: rgba(255, 75, 54, 0.06);
    border-color: rgba(255, 107, 80, 0.32);
}

@media (min-width: 900px) {
    .aw-uc--static .aw-uc__slide--lead { grid-column: span 2; }
}

/*
 * Three fixed columns, and no span for the lead. auto-fit gives four columns at
 * desktop, and with five slides plus a double-width lead that left the second row
 * half empty and the lead card itself mostly dead space — its four lines of copy
 * were being stretched to the height of a narrow neighbour's ten. Five slides in
 * three columns is 3 + 2, every card in a row the same height, and the lead keeps
 * its coral tint and first position without the width that caused the hole.
 */
@media (min-width: 900px) {
    .aw-uc--static.aw-uc--3col .aw-uc__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aw-uc--static.aw-uc--3col .aw-uc__slide--lead { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .aw-uc__viewport { scroll-behavior: auto; }
    .aw-uc__dot, .aw-uc__arrow { transition: none; }
}

/* ------------------------------------------------ article thumbnails --- */
/*
 * object-fit: contain with a blurred, over-scaled copy of the same image behind
 * it, supplied per element as --aw-thumb-img.
 *
 * The CMS serves a mix of 2:1 landscape photos and 1:1 square infographics. With
 * cover, one of the two is always badly cropped — measured on the homepage, a 2:1
 * image lost 63% of itself. contain shows everything; the blurred backdrop is
 * what keeps the letterbox from reading as dead space.
 *
 * home.html carries an equivalent inline copy as .ins-thumb and should be
 * migrated onto this one.
 */
.aw-thumb {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: #1A0820;
}

.aw-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--aw-thumb-img);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.3) brightness(0.55);
    transform: scale(1.25);
}

.aw-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.aw-thumb--wide { aspect-ratio: 16 / 9; width: 100%; }

/* ------------------------------------------------- article card grid --- */

.aw-artgrid {
    display: grid;
    /* auto-fit rather than a fixed count: five cards do not divide evenly, so
       they reflow to 5 / 3 / 2 / 1 across without special cases per breakpoint */
    /* 15rem -> 18.75rem: cards 25% bigger on the client's request. auto-fit
       spends that on fewer, wider columns, so five cards become four across and
       one below rather than five squeezed ones. */
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.875rem);
}

.aw-artcard {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.aw-artcard:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.22); }
.aw-artcard:hover .aw-thumb img { transform: scale(1.04); }

/* --- partner marquee ------------------------------------------- */

/*
 * The auto-scrolling logo band. media.html and sport.html each carry their own
 * inline copy of this, with hard-coded pixel sizes and, on sport, hard-coded image
 * URLs that bypass partner-logos.js entirely — which is why a logo removed from
 * that file can still appear there. This is the shared version; those two should
 * migrate onto it rather than a third copy being written.
 *
 * The loop works by duplicating the logo list and translating the track by exactly
 * -50%, so the second half arrives where the first began. js/partner-marquee.js
 * builds both halves and marks the copy aria-hidden.
 */
.aw-marquee {
    position: relative;
    overflow: hidden;
    padding: clamp(0.75rem, 2vh, 1.25rem) 0;
}

.aw-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.75rem);
    width: max-content;
    /* duration is set per instance from the logo count, so more logos scroll for
       longer rather than faster */
    animation: aw-marquee-scroll var(--aw-marquee-duration, 40s) linear infinite;
}

/* hovering anywhere over the band stops it, so a logo can actually be looked at */
.aw-marquee:hover .aw-marquee__track { animation-play-state: paused; }

/* the duplicated half is a wrapper so it can be hidden in one move, but it must not
   introduce a box of its own into the flex row */
.aw-marquee__dupe { display: contents; }

.aw-marquee__track img {
    height: clamp(2.25rem, 4vw, 3.5rem);
    width: auto;
    max-width: clamp(6rem, 12vw, 12.5rem);
    object-fit: contain;
    transition: transform 0.3s ease;
}

.aw-marquee__track img:hover { transform: scale(1.1); }

@keyframes aw-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*
 * Reduced motion gets a static wrapped band instead of a stopped scroller — a
 * halted marquee would cut off every logo past the first screenful. The duplicate
 * half has to go with it, or every logo appears twice.
 */
@media (prefers-reduced-motion: reduce) {
    .aw-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    .aw-marquee__dupe { display: none; }
}

/* --- category tabs over a grid --------------------------------- */

.aw-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aw-tab {
    padding: 0.5rem 1.125rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.aw-tab:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.24); }
.aw-tab:focus-visible { outline: 2px solid #FF6B50; outline-offset: 2px; }

.aw-tab.is-active {
    background: rgba(255, 75, 54, 0.15);
    border-color: rgba(255, 75, 54, 0.35);
    color: #FF6B50;
}

/* a tabbed grid says so instead of disappearing — see reportEmpty() */
.aw-insights__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: clamp(1.5rem, 4vh, 2.5rem) 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.aw-artcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    padding: clamp(1.0625rem, 2vw, 1.375rem);
}

.aw-artcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* a date must not break across lines inside its own span; when the row does
       have to wrap it wraps between badge and date, not mid-date */
    white-space: nowrap;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.aw-artcard__cat {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aw-artcard__title {
    margin: 0;
    color: #FFFFFF;
    /* scaled with the card: the same size in a 25% wider card reads as a stretched
       card rather than a bigger one */
    font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    /* two lines, so a long headline cannot make one card taller than the rest */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aw-artcard__more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: #FF6B50;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ----------------------------------------------------------- callout --- */
/*
 * An accented aside for the one line in a section that reframes the argument.
 * Was inline in fanfuel.html as .ff-callout; both hubs use it too, so it lives
 * here rather than being copied per page.
 */
.aw-callout {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.125rem, 2.4vw, 1.75rem);
    border-radius: 1rem;
    background: rgba(255, 75, 54, 0.07);
    border: 1px solid rgba(255, 107, 80, 0.35);
}

.aw-callout i {
    color: #FF6B50;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    line-height: 1.3;
    flex-shrink: 0;
}

/* -------------------------------------------------- hub components --- */
/*
 * Shared by the Media and Sport hubs, which are deliberately siblings: same
 * section order, same components, only the content differs.
 */

/* the product name under a problem-led card, so the card leads with the
   problem and names the product second */
.hub-product {
    display: inline-block;
    align-self: flex-start;
    margin-top: clamp(0.75rem, 2vh, 1rem);
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(255, 75, 54, 0.14);
    border: 1px solid rgba(255, 107, 80, 0.35);
    color: #FF6B50;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/*
 * The connected-stack diagram. Flat rows rather than a node graph: a six-node
 * graph is unreadable on a phone, whereas rows reflow. Each row reads
 * source -> destination -> what you actually get.
 */
.hub-flow {
    display: grid;
    gap: clamp(0.625rem, 1.5vw, 0.875rem);
}

.hub-flow__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1rem, 2.2vw, 1.375rem);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 860px) {
    /* source, arrow, destination, outcome — the outcome takes the slack */
    .hub-flow__row { grid-template-columns: auto auto auto 1fr; }
}

/*
 * Coral chips, not white ones. Ten identical translucent-white pills over a
 * translucent-white row read as one flat block of the same colour — the whole
 * diagram lost its shape. Tinting the nodes separates them from both the row they
 * sit on and the outcome text beside them, and it is the same coral as the arrow
 * that already joins them.
 */
.hub-node {
    justify-self: start;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background: rgba(255, 75, 54, 0.13);
    border: 1px solid rgba(255, 107, 80, 0.38);
    color: #FFFFFF;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    font-weight: 700;
    white-space: nowrap;
}

.hub-flow__arrow {
    color: #FF6B50;
    font-size: 0.9375rem;
    line-height: 1;
    /* on narrow screens the row stacks, so point down instead of right */
    transform: rotate(90deg);
    justify-self: start;
}

@media (min-width: 860px) {
    .hub-flow__arrow { transform: none; }
}

.hub-flow__out {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    line-height: 1.5;
}

/* ------------------------------------------------------ device frame --- */
/*
 * Phone frame drawn in CSS. Same reason as .aw-frame above: every device-mockup
 * asset on the site contains a real client app, and publishing those is a
 * separate permission question from showing them in a pitch. These frames carry
 * no client content, so there is nothing to retract.
 *
 * verbavista.html has an identical inline copy as .vv-device and should be
 * migrated onto this one.
 */
.aw-device {
    position: relative;
    width: min(300px, 74vw);
    /* the ratio lives on __screen, not here: see the note there */
    margin-inline: auto;
    border-radius: clamp(1.75rem, 4vw, 2.5rem);
    padding: 0.5rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

/*
 * An uncapped frame is ~650px tall and gets clipped at a 680px viewport. Capping
 * the HEIGHT was the first attempt and it was wrong: the width stayed at 300px,
 * so the box squashed and object-fit: cover took the difference off the bottom of
 * the screenshot. Capping the width keeps the ratio at every viewport height.
 * The 1rem is the frame's own padding, top plus bottom.
 */
.aw-device--hero { width: min(300px, 74vw, calc((72svh - 1rem) * 9 / 19.5 + 1rem)); }

/*
 * The ratio belongs here rather than on the frame. The screenshots are 640x1387,
 * exactly 9:19.5; with the ratio on the frame its 0.5rem of padding came off the
 * screen and cover shaved about 3% off the bottom.
 */
.aw-device__screen {
    width: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: clamp(1.375rem, 3.2vw, 2rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 15%, rgba(255, 75, 54, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 75% 85%, rgba(139, 92, 246, 0.14) 0%, transparent 55%),
        #150518;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aw-device__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* kept for frames that hold no screenshot yet */
.aw-device__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
    padding: 0 1.5rem;
    line-height: 1.5;
}

/*
 * .aw-device__notch was here. Removed with the same reasoning as
 * .vv-device__notch: it was drawn for empty frames, and every frame now holds a
 * screenshot carrying its own iOS status bar, so the pill sat on live content.
 */