/* ==========================================================================
   billware Partnerprogramm

   Built on the same tokens as the billware v2 frontend - same webfont, same
   brand colours, same radius and shadow scale - but it leads with green where
   the product site leads with blue. A partner should recognise billware and
   still know they are somewhere else.
   ========================================================================== */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/resources/webfont/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'),
         url('/resources/webfont/open-sans-v34-latin-ext_latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/resources/webfont/open-sans-v34-latin-ext_latin-600.woff2') format('woff2'),
         url('/resources/webfont/open-sans-v34-latin-ext_latin-600.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/resources/webfont/open-sans-v34-latin-ext_latin-700.woff2') format('woff2'),
         url('/resources/webfont/open-sans-v34-latin-ext_latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/resources/webfont/open-sans-v34-latin-ext_latin-800.woff2') format('woff2'),
         url('/resources/webfont/open-sans-v34-latin-ext_latin-800.woff') format('woff');
}

:root {
    /* Brand green - the lead colour here */
    --aff-green-50: #edf8ec;
    --aff-green-100: #d8f0d7;
    --aff-green-500: #4ab848;
    --aff-green-600: #3aa038;
    --aff-green-700: #2c7d2b;

    /* Brand blue - supporting */
    --aff-blue-50: #eff6fc;
    --aff-blue-500: #468dcb;
    --aff-blue-700: #1f6395;

    --aff-ink-900: #0e2233;
    --aff-ink-700: #2a4459;
    --aff-ink-500: #56707f;
    --aff-ink-400: #7b93a2;

    --aff-surface: #ffffff;
    --aff-surface-2: #f6fafd;
    --aff-surface-3: #eaf2f9;
    --aff-line: #e0eaf2;
    --aff-line-strong: #c9dae7;

    --aff-ok-bg: #edf8ec;
    --aff-ok-fg: #2c7d2b;
    --aff-warn-bg: #fff4e2;
    --aff-warn-fg: #a45b06;
    --aff-error-bg: #ffecec;
    --aff-error-fg: #a92222;

    --aff-r-sm: 8px;
    --aff-r-md: 12px;
    --aff-r-lg: 18px;
    --aff-r-pill: 999px;

    --aff-shadow-sm: 0 2px 8px rgba(14, 34, 51, 0.06);
    --aff-shadow-md: 0 10px 30px rgba(14, 34, 51, 0.08);
    --aff-shadow-lg: 0 24px 60px rgba(14, 34, 51, 0.14);

    /* Wider than the product site's 1180 - the tables here need the room. */
    --aff-container: 1280px;
    --aff-gutter: 24px;
    --aff-nav-h: 74px;

    --aff-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --aff-fs-display: clamp(1.9rem, calc(1.3rem + 2.1vw), 2.7rem);
    --aff-fs-h2: clamp(1.45rem, calc(1.2rem + 1.2vw), 1.95rem);
    --aff-fs-lead: clamp(1.05rem, calc(1rem + 0.3vw), 1.2rem);

    color-scheme: light;
}

@media (max-width: 767px) {
    :root {
        --aff-gutter: 18px;
        --aff-nav-h: 62px;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--aff-surface-2);
    color: var(--aff-ink-900);
    font-family: var(--aff-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--aff-green-700);
}

h1, h2, h3 {
    line-height: 1.22;
    letter-spacing: -0.01em;
}

h1 {
    margin: 0 0 14px;
    font-size: var(--aff-fs-display);
    font-weight: 800;
}

/* Only the hero gets display sizing. Inside a card, a heading that large
   overpowers the handful of fields underneath it. */
.aff-panel h1 {
    font-size: clamp(1.45rem, calc(1.25rem + 0.8vw), 1.8rem);
    margin-bottom: 12px;
}

.aff-error h1 {
    font-size: clamp(1.3rem, calc(1.15rem + 0.6vw), 1.6rem);
}

h2 {
    font-size: var(--aff-fs-h2);
    font-weight: 700;
}

img {
    max-width: 100%;
}

.aff-container {
    width: 100%;
    max-width: var(--aff-container);
    margin: 0 auto;
    padding: 0 var(--aff-gutter);
}

/* --------------------------------------------------------------------------
   Header, with a menu that actually works on a phone
   -------------------------------------------------------------------------- */

.aff-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--aff-line);
}

.aff-header__inner {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    min-height: var(--aff-nav-h);
}

.aff-logo {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--aff-ink-900);
    text-decoration: none;
    white-space: nowrap;
}

.aff-logo img {
    width: 30px;
    height: 30px;
}

.aff-logo__suffix {
    color: var(--aff-green-700);
    font-weight: 600;
}

/* The checkbox drives the mobile menu, so it needs no JavaScript. */
.aff-nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aff-nav-button {
    display: none;
    padding: 9px 11px;
    background: none;
    border: 1px solid var(--aff-line-strong);
    border-radius: var(--aff-r-sm);
    cursor: pointer;
    line-height: 0;
}

.aff-nav-button span,
.aff-nav-button span::before,
.aff-nav-button span::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--aff-ink-700);
    border-radius: 2px;
    content: '';
}

.aff-nav-button span::before {
    transform: translateY(-6px);
}

.aff-nav-button span::after {
    transform: translateY(4px);
}

.aff-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

.aff-nav a {
    padding: 8px 12px;
    border-radius: var(--aff-r-sm);
    color: var(--aff-ink-700);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.aff-nav a:hover {
    background: var(--aff-surface-3);
    color: var(--aff-ink-900);
}

/* .aff-nav a (0,0,1,1) outranks .aff-button (0,0,1,0), so without naming both the
   call to action ends up with navigation-coloured text on a green fill. */
.aff-nav a.aff-button,
.aff-nav a.aff-button:hover {
    color: #fff;
}

.aff-nav a.aff-button:hover {
    background: var(--aff-green-600);
}

@media (max-width: 900px) {
    .aff-nav-button {
        display: block;
    }

    .aff-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--aff-nav-h);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px var(--aff-gutter) 18px;
        background: var(--aff-surface);
        border-bottom: 1px solid var(--aff-line);
        box-shadow: var(--aff-shadow-md);
    }

    .aff-nav-toggle:checked ~ .aff-nav {
        display: flex;
    }

    .aff-nav a,
    .aff-nav .aff-inline-form {
        width: 100%;
    }

    .aff-nav a {
        padding: 12px;
        font-size: 16px;
    }

    .aff-nav .aff-linkbutton {
        width: 100%;
        padding: 12px;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
    }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.aff-main {
    padding: 36px 0 64px;
}

.aff-panel {
    max-width: 560px;
    margin: 0 auto 24px;
    padding: 34px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-sm);
}

.aff-panel--wide {
    max-width: 100%;
}

/* Prose and questions: the box follows the line length rather than the text
   stopping two thirds of the way across a full-width card. */
.aff-panel--text {
    max-width: 880px;
}


.aff-panel--danger {
    border-color: #f0d4d4;
}

.aff-panel h2 {
    margin: 30px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--aff-line);
    font-size: 18px;
}

.aff-panel > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* One level down from the section heads, and without their rule above. */
.aff-panel h3 {
    margin: 26px 0 10px;
    font-size: 15px;
}

.aff-lead {
    margin: 0 0 22px;
    max-width: 46em;
    color: var(--aff-ink-500);
    font-size: var(--aff-fs-lead);
}

.aff-eyebrow {
    margin: 0 0 10px;
    color: var(--aff-green-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.aff-hint {
    margin: 6px 0 0;
    color: var(--aff-ink-400);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Hero and landing sections
   -------------------------------------------------------------------------- */

.aff-hero {
    position: relative;
    margin-bottom: 28px;
    padding: 56px 40px;
    background:
        radial-gradient(1100px 380px at 78% -8%, var(--aff-green-50), transparent 62%),
        radial-gradient(760px 300px at 8% 106%, var(--aff-blue-50), transparent 60%),
        var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-sm);
}

.aff-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}


.aff-hero--cta {
    text-align: center;
}

/* Landing hero: a photo on the right with a floating figure, and the four key
   numbers as a strip underneath instead of a column of tiles. */

.aff-hero--landing .aff-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
}

.aff-hero__actions {
    margin: 0;
}

.aff-hero__visual {
    position: relative;
    margin: 0;
    /* Room for the badge that hangs over the bottom left corner. */
    padding: 0 0 26px 18px;
}

.aff-hero__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-lg);
}

.aff-hero__badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 14px 16px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-green-100);
    border-radius: var(--aff-r-md);
    box-shadow: var(--aff-shadow-md);
}

.aff-hero__badge-value {
    color: var(--aff-green-700);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.aff-hero__badge-text {
    color: var(--aff-ink-500);
    font-size: 13px;
    line-height: 1.35;
}

.aff-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 40px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--aff-line);
}

.aff-figure {
    padding: 0 18px 0 0;
    border-right: 1px solid var(--aff-line);
}

.aff-figure:last-child {
    padding-right: 0;
    border-right: 0;
}

.aff-figure dt {
    margin: 0 0 4px;
    color: var(--aff-ink-500);
    font-size: 13px;
    font-weight: 600;
}

.aff-figure dd {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.aff-figure:first-child dd {
    color: var(--aff-green-700);
}

.aff-figure p {
    margin: 4px 0 0;
    color: var(--aff-ink-400);
    font-size: 12px;
}

.aff-checklist {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.aff-checklist li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 30px;
}

.aff-checklist li::before {
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    /* Drawn, not typed: Open Sans has no U+2713, and a missing glyph turns into
       whatever the fallback font happens to offer. */
    background: var(--aff-green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3' fill='none' stroke='%232c7d2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    border-radius: var(--aff-r-pill);
    content: '';
}

.aff-section-head {
    margin: 44px 0 26px;
    text-align: center;
}

.aff-section-head h2 {
    margin: 0 0 6px;
}

.aff-section-head p {
    margin: 0;
    color: var(--aff-ink-400);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Four steps */

.aff-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aff-step {
    position: relative;
    padding: 30px 22px 26px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-sm);
    text-align: center;
}

.aff-step__num {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--aff-green-500);
    border-radius: var(--aff-r-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.aff-step__icon {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
}

.aff-step h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.aff-step p {
    margin: 0;
    color: var(--aff-ink-500);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Tiles
   -------------------------------------------------------------------------- */

.aff-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.aff-tile {
    padding: 20px;
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-md);
}

.aff-tile--accent {
    background: var(--aff-green-50);
    border-color: var(--aff-green-100);
}

.aff-tile__label {
    margin: 0 0 6px;
    color: var(--aff-ink-500);
    font-size: 13px;
    font-weight: 600;
}

.aff-tile__value {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.aff-tile--accent .aff-tile__value {
    color: var(--aff-green-700);
}

.aff-tile__note {
    margin: 5px 0 0;
    color: var(--aff-ink-400);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.aff-field {
    margin-bottom: 16px;
}

.aff-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.aff-field input,
.aff-field select {
    width: 100%;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--aff-line-strong);
    border-radius: var(--aff-r-sm);
    color: var(--aff-ink-900);
    font-family: inherit;
    font-size: 16px;
}

.aff-field input:focus,
.aff-field select:focus {
    border-color: var(--aff-green-500);
    outline: 3px solid rgba(74, 184, 72, 0.18);
    outline-offset: 0;
}

.aff-field input:disabled {
    background: var(--aff-surface-3);
    color: var(--aff-ink-400);
}

.aff-field--invalid input,
.aff-field--invalid select {
    border-color: var(--aff-error-fg);
}

.aff-error-text {
    margin: 6px 0 0;
    color: var(--aff-error-fg);
    font-size: 13px;
}

.aff-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.aff-row > .aff-field {
    flex: 1 1 210px;
}

.aff-check {
    margin-bottom: 14px;
}

.aff-check label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.5;
}

.aff-check input {
    margin-top: 4px;
    flex: 0 0 auto;
    accent-color: var(--aff-green-500);
}

.aff-captcha {
    margin: 20px 0 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.aff-button {
    display: inline-block;
    padding: 12px 22px;
    background: var(--aff-green-500);
    border: 0;
    border-radius: var(--aff-r-sm);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--aff-shadow-sm);
}

.aff-button:hover {
    background: var(--aff-green-600);
    color: #fff;
}

button.aff-button {
    margin-top: 8px;
}

.aff-button--small {
    padding: 9px 15px;
    font-size: 15px;
}

.aff-button--danger {
    background: var(--aff-error-fg);
}

.aff-button--danger:hover {
    background: #8c1c1c;
}

.aff-textlink {
    display: inline-block;
    margin-left: 16px;
    font-size: 15px;
    font-weight: 600;
}

.aff-linkbutton {
    padding: 8px 12px;
    background: none;
    border: 0;
    border-radius: var(--aff-r-sm);
    color: var(--aff-ink-700);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.aff-linkbutton:hover {
    background: var(--aff-surface-3);
}

.aff-inline-form {
    display: inline;
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.aff-flash {
    margin: 0 auto 20px;
    max-width: 560px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: var(--aff-r-sm);
    font-size: 15px;
}

.aff-panel .aff-flash {
    max-width: 100%;
}

.aff-flash--success {
    background: var(--aff-ok-bg);
    border-color: var(--aff-green-100);
    color: var(--aff-ok-fg);
}

.aff-flash--error {
    background: var(--aff-error-bg);
    border-color: #f3c9c9;
    color: var(--aff-error-fg);
}

.aff-flash--warning {
    background: var(--aff-warn-bg);
    border-color: #f0dcb8;
    color: var(--aff-warn-fg);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.aff-tablewrap {
    overflow-x: auto;
    border-radius: var(--aff-r-md);
}

.aff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.aff-table th,
.aff-table td {
    padding: 12px;
    border-bottom: 1px solid var(--aff-line);
    text-align: left;
    white-space: nowrap;
}

.aff-table th {
    color: var(--aff-ink-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aff-table tbody tr:hover {
    background: var(--aff-surface-2);
}

.aff-num {
    text-align: right !important;
}

/* --------------------------------------------------------------------------
   Data sheet
   -------------------------------------------------------------------------- */

/* A specification list rather than a table: twelve rows of label and sentence
   read better in two aligned columns than in a grid with a header it does not
   need, and the rows still wrap into one column on a phone. */
.aff-spec {
    margin: 0 0 26px;
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-md);
    overflow: hidden;
}

.aff-spec__row {
    display: grid;
    grid-template-columns: 240px 1fr;
    border-top: 1px solid var(--aff-line);
}

.aff-spec__row:first-child {
    border-top: 0;
}

.aff-spec__row:nth-child(odd) {
    background: var(--aff-surface-2);
}

.aff-spec dt {
    padding: 12px 18px;
    color: var(--aff-ink-700);
    font-size: 14px;
    font-weight: 600;
}

.aff-spec dd {
    margin: 0;
    padding: 12px 18px;
    color: var(--aff-ink-500);
    font-size: 15px;
}

@media (max-width: 640px) {
    .aff-spec__row {
        grid-template-columns: 1fr;
    }

    .aff-spec dt {
        padding-bottom: 0;
    }
}

/* Cards, so five groups of unequal length still line up as a block instead of
   trailing off wherever their last item happens to end. */
/* Six groups, so 3 x 2 and 2 x 3 both come out full. auto-fit left the last card
   stranded on a row of its own, which is what made this block look torn. */
.aff-featurecards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 26px;
}

@media (min-width: 640px) {
    .aff-featurecards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .aff-featurecards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.aff-featurecard {
    padding: 18px 20px;
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-md);
}

.aff-featurecard__title {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aff-line);
    color: var(--aff-ink-900);
    font-size: 14px;
    font-weight: 700;
}

.aff-featurecard .aff-checklist {
    margin: 0;
}

.aff-featurecard .aff-checklist li {
    font-size: 14px;
}

.aff-extgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.aff-ext {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-sm);
}

.aff-ext img,
.aff-ext__blank {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
}

.aff-ext__blank {
    background: var(--aff-surface-3);
}

.aff-ext__name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
}

.aff-ext__price {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: var(--aff-green-50);
    border-radius: var(--aff-r-pill);
    color: var(--aff-green-700);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.aff-note {
    margin: 0 0 22px;
    padding: 12px 16px;
    background: var(--aff-blue-50);
    border-radius: var(--aff-r-sm);
    color: var(--aff-ink-700);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Videos
   -------------------------------------------------------------------------- */

.aff-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
    gap: 18px;
    margin: 0;
}

.aff-videocard {
    margin: 0;
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-md);
    overflow: hidden;
}

.aff-videocard video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--aff-ink-900);
    object-fit: cover;
}

.aff-videocard figcaption {
    padding: 14px 16px;
}

.aff-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--aff-r-pill);
    font-size: 12px;
    font-weight: 700;
}

.aff-badge--open     { background: var(--aff-warn-bg); color: var(--aff-warn-fg); }
.aff-badge--earned   { background: var(--aff-ok-bg); color: var(--aff-ok-fg); }
.aff-badge--paid     { background: var(--aff-surface-3); color: var(--aff-ink-500); }
.aff-badge--reversed { background: var(--aff-error-bg); color: var(--aff-error-fg); }

.aff-pager {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 20px;
    color: var(--aff-ink-500);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   FAQ and prose
   -------------------------------------------------------------------------- */

.aff-faq dt {
    margin-top: 20px;
    font-weight: 700;
}

.aff-faq dt:first-child {
    margin-top: 0;
}

.aff-faq dd {
    margin: 6px 0 0;
    max-width: 46em;
    color: var(--aff-ink-500);
}

.aff-panel--text .aff-lead,
.aff-panel--text p,
.aff-panel--text li,
.aff-panel--text dd {
    max-width: none;
}

/* Why it pays: the argument on the left as a card with a photo on top, four
   cards on the right - one wide white box of justified text was a wall. */

.aff-why {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 32px 28px;
    align-items: stretch;
    margin-bottom: 24px;
}

.aff-why__intro {
    overflow: hidden;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-sm);
}

.aff-why__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.aff-why__intro-text {
    padding: 24px 26px 26px;
}

.aff-why__intro-text p {
    margin: 0 0 14px;
    color: var(--aff-ink-500);
    font-size: 15px;
    line-height: 1.6;
}

.aff-why__intro-text p:last-child {
    margin-bottom: 0;
}

.aff-why__intro-text p:first-child {
    color: var(--aff-ink-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.aff-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.aff-why__card {
    padding: 24px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    box-shadow: var(--aff-shadow-sm);
}

.aff-why__card::before {
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--aff-green-500);
    border-radius: var(--aff-r-pill);
    content: '';
}

.aff-why__card h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.aff-why__card p {
    margin: 0;
    color: var(--aff-ink-500);
    font-size: 15px;
}

@media (max-width: 900px) {
    .aff-why {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Who it is for: a photo next to the list. */

.aff-audience {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: center;
}

.aff-audience__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--aff-r-md);
    box-shadow: var(--aff-shadow-md);
}

.aff-audience__text .aff-lead {
    margin-bottom: 16px;
    max-width: none;
    /* The intro keeps a ragged edge; justified, its short lines gap badly. */
    text-align: left;
}

.aff-audience__list {
    margin: 0;
    padding-left: 20px;
}

.aff-audience__list li {
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .aff-audience {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* The text treatment, separate from the two-column grid above: a page can want
   justified German body copy without wanting its headings redistributed. */
.aff-justify p,
.aff-justify li,
.aff-justify dd {
    max-width: none;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* A grid of complete question-and-answer blocks, not CSS columns: columns break
   wherever they run out of room, which is how a question ended up at the foot of
   one column with its answer at the head of the next. A grid item never splits. */
@media (min-width: 900px) {
    .aff-faq--columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 48px;
        align-items: start;
    }
}

.aff-faq__item {
    margin-bottom: 22px;
}

.aff-faq__item dt {
    margin-top: 0;
}

.aff-faq__item dd {
    max-width: none;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.aff-justify ul {
    padding-left: 20px;
}

.aff-justify li {
    margin-bottom: 7px;
}

/* --------------------------------------------------------------------------
   Materials
   -------------------------------------------------------------------------- */

.aff-copyfield {
    width: 100%;
    padding: 12px 14px;
    background: var(--aff-surface-2);
    border: 1px solid var(--aff-line-strong);
    border-radius: var(--aff-r-sm);
    color: var(--aff-ink-900);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

textarea.aff-copyfield {
    resize: vertical;
    line-height: 1.5;
}

.aff-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.aff-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-md);
}

/* One height for every preview, whatever the banner's aspect: three tiles of
   different heights next to each other is what made this row look ragged. */
.aff-card__preview {
    display: grid;
    place-items: center;
    height: 210px;
    padding: 18px;
    background: var(--aff-surface-3);
    overflow: hidden;
}

.aff-card__preview--dark {
    background: var(--aff-ink-900);
}

/* A percentage max-height does not resolve reliably against a grid area, and the
   600px skyscraper then overflowed and was cut off. The tile height less its
   padding, in pixels, does. */
.aff-card__preview img {
    max-width: 100%;
    max-height: 174px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.aff-card__body {
    padding: 16px 18px 18px;
}

.aff-card__title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 10px;
    font-weight: 700;
}

.aff-card__title span {
    color: var(--aff-ink-400);
    font-size: 13px;
    font-weight: 400;
}

.aff-card__body .aff-hint {
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.aff-footer {
    padding: 30px 0 48px;
    border-top: 1px solid var(--aff-line);
    color: var(--aff-ink-400);
    font-size: 14px;
}

.aff-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

.aff-footer__nav a {
    color: var(--aff-ink-500);
    text-decoration: none;
}

.aff-footer__nav a:hover {
    color: var(--aff-green-700);
}

/* The cookie settings entry is a button, because it opens a dialog rather than
   a page - styled to sit in the row like its neighbours. */
.aff-footer__nav button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--aff-ink-500);
    font: inherit;
    cursor: pointer;
}

.aff-footer__nav button:hover {
    color: var(--aff-green-700);
}

.aff-footer__note {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.aff-code {
    padding: 2px 8px;
    background: var(--aff-surface-3);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

.aff-foot-hint {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--aff-line);
    color: var(--aff-ink-500);
    font-size: 14px;
}

.aff-placeholder {
    margin: 0;
    padding: 15px 17px;
    background: var(--aff-surface-2);
    border-left: 3px solid var(--aff-green-500);
    border-radius: 0 var(--aff-r-sm) var(--aff-r-sm) 0;
    color: var(--aff-ink-500);
    font-size: 15px;
}

.aff-error {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 34px;
    background: var(--aff-surface);
    border: 1px solid var(--aff-line);
    border-radius: var(--aff-r-lg);
    text-align: center;
}

.aff-error__status {
    margin: 0;
    color: var(--aff-green-700);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

@media (max-width: 860px) {
    .aff-hero {
        padding: 36px 24px;
    }

    .aff-hero__grid,
    .aff-hero--landing .aff-hero__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .aff-hero__visual {
        padding: 0 0 22px 0;
    }

    .aff-hero__badge {
        left: 14px;
        padding: 10px 14px;
    }

    .aff-hero__badge-value {
        font-size: 24px;
    }

    .aff-figures {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
        margin-top: 28px;
        padding-top: 22px;
    }

    .aff-figure:nth-child(2n) {
        padding-right: 0;
        border-right: 0;
    }

    .aff-panel {
        padding: 24px 20px;
    }
}