/* ============================================================
   FOR BRANDS
   Shared by /for-brands/ and /it/for-brands/ — in its own file for
   the same reason as about.css: two language variants, and inline
   would mean editing everything twice until the two drift apart.

   Scope is deliberately narrow. The page stays "a form with
   context", not a landing page with the form buried at the bottom,
   so this only styles the short value block above the form.
   Colour tokens come from v2.css :root.
   ============================================================ */

.fb {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) 0 0;
    /* The page container is text-center; body copy reads better left
       aligned, so labels are re-centred individually below. */
    text-align: left;
}

.fb-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--r3-gray-text);
    text-align: center;
    margin: 0 0 20px;
}

/* ── What a brand gets ──────────────────────────────────────
   2x2 rather than 4 across: four columns would leave each one too
   narrow for a readable measure. */
.fb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--r3-gray-100);
    border: 1px solid var(--r3-gray-100);
}
@media (min-width: 760px) {
    .fb-grid { grid-template-columns: repeat(2, 1fr); }
}
.fb-item {
    background: var(--r3-white);
    padding: 24px 26px 26px;
    border-top: 3px solid var(--r3-orange);
}
.fb-item__t {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--r3-black);
    margin: 0 0 8px;
}
.fb-item__b {
    font-size: 0.93rem;
    line-height: 1.6;
    color: #505050;
    margin: 0;
}

/* ── How it works ───────────────────────────────────────────
   Three steps, tinted so they read as process rather than as three
   more benefits. Step 3 is the one that matters: it answers the
   unspoken "do I lose control of my own products?". */
.fb-how { margin-top: clamp(36px, 5vw, 56px); }
.fb-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--r3-gray-100);
    border: 1px solid var(--r3-gray-100);
}
@media (min-width: 760px) {
    .fb-steps { grid-template-columns: repeat(3, 1fr); }
}
.fb-steps li {
    background: #f7f7f7;
    padding: 20px 24px 22px;
    font-size: 0.93rem;
    line-height: 1.55;
    color: #505050;
}
.fb-steps b {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--r3-orange);
    margin-bottom: 8px;
}

.fb-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--r3-gray-text);
    margin: 22px 0 0;
}