/* ============================================================================
   EFA www — home page (design/top.svg, 1440px artboard).

   Every length is in design pixels via --u (see www-base.css). Section
   heights add up to the artboard's section boundaries: hero 152→839.4,
   ticker →898.9, rates →1464.4, steps →2173.05, First Gravure →3153.15,
   referral →3904.7, payout →4465.37, FAQ →5273.4, footer →5725.6.
   ========================================================================== */

/* ── Hero (687.4px; blocks sit at artboard coordinates, except that the hero
   wordmark was dropped on 2026-09-09: title and lead moved up and the three
   points now sit between the lead and the buttons) ─────────────────────── */

.hero {
    position: relative;
    height: calc(687.4 * var(--u));
    overflow: hidden;
    background: var(--white);
}
.hero-bg {
    position: absolute;
    left: calc(545.66 * var(--u));
    top: calc(-223.7 * var(--u));
    width: calc(1429.62 * var(--u));
    height: calc(916.89 * var(--u));
    background: url("/img/svg/art/koukangen-bg.svg") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}
.hero-points {
    position: absolute;
    left: calc(74.8 * var(--u));
    top: calc(268 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(21 * var(--u));
    line-height: calc(33.9 * var(--u));
    color: var(--ink-black);
    white-space: nowrap;
}
.hero-title {
    position: absolute;
    left: calc(74.8 * var(--u));
    top: calc(70 * var(--u));
    margin: 0;
    font-size: calc(48 * var(--u));
    font-weight: 700;
    line-height: calc(48 * var(--u));
    color: var(--ink);
    white-space: nowrap;
}
.hero-lead {
    position: absolute;
    left: calc(72.7 * var(--u));
    top: calc(128.5 * var(--u));
    width: calc(660 * var(--u));
    margin: 0;
    font-size: calc(21 * var(--u));
    line-height: calc(33.9 * var(--u));
    color: var(--ink-black);
}
.hero-actions {
    position: absolute;
    left: calc(74.1 * var(--u));
    top: calc(496.5 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20.8 * var(--u));
    margin: 0;
}
.hero-actions .button { justify-content: space-between; }
.hero-actions .button-cta { min-width: calc(327.1 * var(--u)); }
.hero-actions .button-program { min-width: calc(284 * var(--u)); padding-left: calc(22.2 * var(--u)); }
.hero-rates {
    position: absolute;
    left: calc(796.4 * var(--u));
    top: calc(161.8 * var(--u));
    width: calc(513.7 * var(--u));
    height: calc(201.6 * var(--u));
}
.hero-art {
    position: absolute;
    left: calc(618 * var(--u));
    top: calc(332.2 * var(--u));
    width: calc(747.9 * var(--u));
    height: calc(368.6 * var(--u));
    z-index: 1;
}

/* ── Rates (898.9→1464.4) ────────────────────────────────────────────────── */

.rates { padding: calc(67.9 * var(--u)) 0 calc(94.4 * var(--u)); }
.rates-list {
    position: relative;
    display: grid;
    grid-template-columns: calc(408.5 * var(--u)) calc(408.4 * var(--u)) calc(300 * var(--u));
    margin: calc(41.7 * var(--u)) 0 0 calc(191.9 * var(--u));
    padding: calc(183.9 * var(--u)) 0 0;
    list-style: none;
}
.rates-item { width: calc(300 * var(--u)); }
.rates-item h3 { margin: 0; font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(31 * var(--u)); color: var(--ink-black); }
.rates-item p { margin: calc(0.7 * var(--u)) 0 0; font-size: calc(16 * var(--u)); line-height: calc(29.4 * var(--u)); color: var(--ink-black); }
.rates-medallion, .rates-plus { position: absolute; top: 0; }
.rates-medallion-1 { left: calc(32.9 * var(--u)); width: calc(162.07 * var(--u)); height: calc(162.07 * var(--u)); }
.rates-medallion-2 { left: calc(462.8 * var(--u)); top: calc(3.5 * var(--u)); width: calc(155.11 * var(--u)); height: calc(155.11 * var(--u)); }
.rates-medallion-3 { left: calc(887 * var(--u)); top: calc(3.5 * var(--u)); width: calc(155.11 * var(--u)); height: calc(155.11 * var(--u)); }
.rates-plus { top: calc(45.8 * var(--u)); width: calc(70.48 * var(--u)); height: calc(70.48 * var(--u)); }
.rates-plus-1 { left: calc(286 * var(--u)); }
.rates-plus-2 { left: calc(717.2 * var(--u)); }

/* ── How it works (1464.4→2173.05, tinted band with the dot halftone) ────── */

.steps {
    padding: calc(85 * var(--u)) 0 calc(110.25 * var(--u));
    background: var(--cyan-tint) url("/img/svg/bands/home-steps.svg?v=2") calc(-30 * var(--u)) 0 / calc(1440 * var(--u)) auto no-repeat;
}
.steps-list {
    display: flex;
    gap: calc(58.3 * var(--u));
    margin: calc(87.3 * var(--u)) 0 0 calc(88 * var(--u));
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.step-card {
    position: relative;
    width: calc(270 * var(--u));
    min-height: calc(339 * var(--u));
    padding: calc(45.5 * var(--u)) calc(20 * var(--u)) 0;
    background: var(--white);
    border-radius: calc(28 * var(--u));
    box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-4);
}
.step-card-2 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-3); }
.step-card-3 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-2); }
.step-card-4 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan); }
.step-num {
    position: absolute;
    left: calc(-14.8 * var(--u));
    top: calc(-3 * var(--u));
    width: calc(118.1 * var(--u));
    height: calc(40.1 * var(--u));
    padding-left: calc(34.4 * var(--u));
    background: var(--cyan);
    color: var(--white);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    line-height: calc(44.5 * var(--u));
    letter-spacing: 0;
    clip-path: polygon(calc(40.1 * var(--u)) 0, 100% 0, calc(100% - 40.1 * var(--u)) 100%, 0 100%);
}
.step-icon-box { display: flex; align-items: center; justify-content: center; height: calc(125 * var(--u)); }
.step-icon { display: block; height: auto; }
.step-card-1 .step-icon { width: calc(125.37 * var(--u)); }
.step-card-2 .step-icon { width: calc(114.21 * var(--u)); }
.step-card-3 .step-icon { width: calc(111.22 * var(--u)); }
.step-card-4 .step-icon { width: calc(89.62 * var(--u)); }
.step-card h3 { margin: calc(6.8 * var(--u)) 0 0; font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(27.4 * var(--u)); color: var(--ink); }
.step-card p { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(27.4 * var(--u)); color: var(--ink); }
.step-arrow {
    position: absolute;
    left: calc(267.04 * var(--u));
    top: calc(148.18 * var(--u));
    width: calc(46 * var(--u));
    height: calc(54 * var(--u));
    z-index: 1;
}

/* ── First Gravure teaser (2173.05→3153.15, white, light dots on the right) */

.fg-teaser {
    position: relative;
    padding: calc(70.45 * var(--u)) 0 calc(179.05 * var(--u));
    background: var(--white) url("/img/svg/bands/home-fg-dots.svg?v=2") calc(583.88 * var(--u)) calc(12.44 * var(--u)) / calc(856.12 * var(--u)) auto no-repeat;
    overflow: hidden;
}
.fg-teaser-logo { display: block; width: calc(433.9 * var(--u)); height: calc(99.2 * var(--u)); margin: calc(32.2 * var(--u)) 0 0 calc(494 * var(--u)); }
.fg-teaser-logo img { display: block; width: 100%; height: 100%; }
.fg-teaser-copy { position: relative; z-index: 1; width: calc(545 * var(--u)); margin: calc(91.7 * var(--u)) 0 0 calc(159 * var(--u)); }
.fg-teaser-catch { margin: 0 0 0 calc(1 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(33.9 * var(--u)); color: var(--cyan); }
.fg-teaser-body { margin: calc(56.6 * var(--u)) 0 0; font-size: calc(21 * var(--u)); line-height: calc(33.9 * var(--u)); color: var(--ink-black); }
.fg-teaser-action { margin: calc(95.2 * var(--u)) 0 0 calc(-0.6 * var(--u)); }
.fg-teaser-action .button { min-width: calc(246.7 * var(--u)); padding-left: calc(28.7 * var(--u)); justify-content: space-between; }
.fg-teaser-frame {
    position: absolute;
    left: calc(670.12 * var(--u));
    top: calc(289 * var(--u));
    width: calc(632 * var(--u));
    height: calc(695.4 * var(--u));
    background: var(--white);
    clip-path: polygon(calc(72.81 * var(--u)) 0, calc(631.97 * var(--u)) calc(56.84 * var(--u)), calc(564.61 * var(--u)) calc(695.38 * var(--u)), 0 calc(692.19 * var(--u)));
    overflow: hidden;
}
.fg-teaser-frame img {
    position: absolute;
    left: calc(89.54 * var(--u));
    top: calc(35.87 * var(--u));
    width: calc(540 * var(--u));
    height: auto;
    max-width: none;
    border: 2px solid #000;
    transform-origin: 0 0;
    transform: rotate(5.81deg);
}
.fg-teaser-accent {
    position: absolute;
    left: calc(1278.8 * var(--u));
    top: calc(311.35 * var(--u));
    width: calc(81.55 * var(--u));
    height: calc(81.55 * var(--u));
}

/* ── Referral (3153.15→3904.7, tinted band) ──────────────────────────────── */

.referral {
    padding: calc(69.45 * var(--u)) 0 calc(84 * var(--u));
    background: var(--cyan-tint) url("/img/svg/bands/home-referral.svg?v=2") calc(-20 * var(--u)) calc(-3 * var(--u)) / calc(1440 * var(--u)) auto no-repeat;
}
.referral-diagram {
    width: calc(860 * var(--u));
    height: calc(440 * var(--u));
    margin: calc(50.3 * var(--u)) 0 0 calc(380 * var(--u));
}
.referral-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.referral-svg text { font-family: var(--font); }
.referral-svg-mobile { display: none; }
.referral-note {
    margin: calc(-7.3 * var(--u)) 0 0;
    text-align: center;
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: calc(28 * var(--u));
    color: var(--ink-black);
}

/* ── Payout (3904.7→4465.37, white) ──────────────────────────────────────── */

.payout { padding: calc(85.7 * var(--u)) 0 calc(104.6 * var(--u)); }
.payout-steps {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(67.6 * var(--u));
    width: max-content;
    margin: calc(28.85 * var(--u)) 0 0 calc(325.4 * var(--u));
    padding: 0;
    list-style: none;
}
.payout-steps::before {
    content: "";
    position: absolute;
    left: calc(201.6 * var(--u));
    top: 50%;
    width: calc(430.2 * var(--u));
    height: calc(4 * var(--u));
    margin-top: calc(-2 * var(--u));
    background: var(--cyan);
}
.payout-box {
    position: relative;
    width: calc(220.8 * var(--u));
    padding: 0 calc(12.6 * var(--u)) calc(11.7 * var(--u));
    background: var(--white);
    border: calc(2 * var(--u)) solid transparent;
    border-radius: calc(12 * var(--u));
}
.payout-box .dash-frame rect { rx: calc(12 * var(--u) - 1px); }
.payout-box:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-44.3 * var(--u));
    top: 50%;
    width: calc(21 * var(--u));
    height: calc(21 * var(--u));
    margin-top: calc(-10.5 * var(--u));
    border-radius: 50%;
    background: var(--cyan);
}
.payout-box h3 {
    height: calc(37 * var(--u));
    margin: calc(-2 * var(--u)) calc(-14.6 * var(--u)) 0;
    padding: 0 calc(14.6 * var(--u));
    background: var(--cyan);
    border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
    font-size: calc(21 * var(--u));
    font-weight: 700;
    line-height: calc(39.6 * var(--u));
    color: var(--cyan-tint);
    white-space: nowrap;
    overflow: hidden;
}
.payout-box p { margin: calc(6.4 * var(--u)) 0 0; font-size: calc(16 * var(--u)); font-weight: 400; line-height: calc(28 * var(--u)); color: var(--ink); }
.payout-logos { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); margin-top: calc(7.5 * var(--u)) !important; }
.logo-paypal { display: block; width: calc(100 * var(--u)); height: calc(26.6 * var(--u)); margin-left: calc(0.2 * var(--u)); }
.logo-wise {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(81.8 * var(--u));
    height: calc(31.4 * var(--u));
    margin-left: calc(-1.8 * var(--u));
    border-radius: calc(12 * var(--u));
    background: #9fe870;
}
.logo-wise img { display: block; width: calc(55 * var(--u)); height: auto; }
.payout-note {
    margin: calc(74.85 * var(--u)) 0 0;
    text-align: center;
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: calc(28 * var(--u));
    color: var(--ink-black);
}

/* ── FAQ teaser (4465.37→5273.4, tinted band) ───────────────────────────── */

.faq-teaser {
    padding: calc(84.93 * var(--u)) 0 calc(94.1 * var(--u));
    background: var(--cyan-tint) url("/img/svg/bands/home-faq.svg?v=2") 0 0 / calc(1440 * var(--u)) auto no-repeat;
}
.faq-teaser .section-title { margin-top: calc(7.5 * var(--u)); }
.faq-teaser .faq-list { width: calc(926.2 * var(--u)); margin: calc(64.6 * var(--u)) 0 0 calc(264.3 * var(--u)); }
.faq-teaser .faq-a { width: calc(929.1 * var(--u)); margin-left: calc(-9.5 * var(--u)); padding-left: calc(36.3 * var(--u)); padding-bottom: calc(84.4 * var(--u)); background: var(--cyan-tint); } /* solid plate hides the dots behind the answer */

/* ── Phone (design/mobile/アートボード 3.svg, 716px artboard) ─────────────
   Section boundaries on the artboard: hero 152→1385.2, ticker →1444.7,
   rates →3600, steps →5590.1, First Gravure →7091.1, referral →7958,
   payout →8997, FAQ →9805, footer →10887. */

/* ── English desktop: the longer intro copy makes the section taller than the
   screenshot frame, so the bottom padding shrinks by the same amount ─────── */
@media (width > 900px) {
    html:lang(en) .fg-teaser { padding-bottom: calc(145.15 * var(--u)); }
}

@media (max-width: 900px) {
    .hero { height: calc(1233.2 * var(--u)); }
    .hero-bg {
        left: calc(-52.4 * var(--u));
        top: calc(12.6 * var(--u));
        width: calc(1226.75 * var(--u));
        height: calc(787.23 * var(--u));
        background-image: url("/img/svg/mobile/koukangen-bg.svg");
    }
    .hero-points { left: calc(50.1 * var(--u)); top: calc(829 * var(--u)); font-size: max(14px, calc(36 * var(--u))); line-height: calc(59.9 * var(--u)); }
    html:lang(en) .hero-points { font-size: max(13px, calc(28 * var(--u))); } /* longest bullet ends 2vw clear of the edge */
    html:lang(en) .hero-lead { font-size: max(12px, calc(21 * var(--u))); line-height: calc(31 * var(--u)); }
    .hero-rates { left: calc(161.2 * var(--u)); top: calc(341.8 * var(--u)); width: calc(440.8 * var(--u)); height: calc(173 * var(--u)); }
    .hero-art { left: calc(34.5 * var(--u)); top: calc(488 * var(--u)); width: calc(637.6 * var(--u)); height: calc(314.2 * var(--u)); }
    .hero-title { left: calc(36.1 * var(--u)); top: calc(62.7 * var(--u)); font-size: max(24px, calc(52 * var(--u))); line-height: calc(52 * var(--u)); }
    .hero-lead { left: calc(38.5 * var(--u)); top: calc(126.1 * var(--u)); width: calc(660 * var(--u)); font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    .hero-lead br:not(.br-mobile) { display: none; }
    .hero-actions { left: calc(39.3 * var(--u)); top: calc(1028.7 * var(--u)); gap: calc(28.2 * var(--u)); }

    /* Rates: one column, medallion / title / note, plus signs between */
    .rates { padding: calc(63.3 * var(--u)) 0 calc(165.9 * var(--u)); }
    .rates .section-title { margin-top: calc(26.5 * var(--u)); }
    .rates-list { display: flex; flex-direction: column; align-items: center; margin: calc(83.6 * var(--u)) 0 0; padding: 0; text-align: center; }
    .rates-item { width: auto; }
    .rates-medallion, .rates-plus { position: static; display: block; margin: 0 auto; }
    .rates-medallion-1 { width: calc(324 * var(--u)); height: calc(324 * var(--u)); }
    .rates-medallion-2, .rates-medallion-3 { width: calc(310 * var(--u)); height: calc(310 * var(--u)); }
    .rates-item h3 { margin-top: calc(25.6 * var(--u)); font-size: max(18px, calc(42.19 * var(--u))); line-height: calc(52 * var(--u)); }
    .rates-item p { margin-top: calc(15.3 * var(--u)); padding: 0 calc(40 * var(--u)); font-size: max(13px, calc(32.14 * var(--u))); line-height: calc(42 * var(--u)); }
    .rates-plus { width: calc(68.6 * var(--u)); height: calc(68.6 * var(--u)); }
    .rates-plus img { display: block; width: 100%; height: 100%; }
    .rates-item:nth-child(1) { order: 1; }
    .rates-plus-1 { order: 2; margin-top: calc(35.7 * var(--u)); }
    .rates-item:nth-child(2) { order: 3; margin-top: calc(45.8 * var(--u)); }
    .rates-item:nth-child(2) h3 { margin-top: calc(26.2 * var(--u)); }
    .rates-plus-2 { order: 4; margin-top: calc(57.9 * var(--u)); }
    .rates-item:nth-child(3) { order: 5; margin-top: calc(57.3 * var(--u)); }
    .rates-item:nth-child(3) h3 { margin-top: calc(23.3 * var(--u)); }

    /* How it works: stacked cards with folder tabs and down arrows */
    .steps { padding: calc(50.3 * var(--u)) 0 calc(58.7 * var(--u)); background: var(--cyan-tint) url("/img/svg/bands/m-home-steps.svg?v=2") calc(-20 * var(--u)) calc(-16 * var(--u)) / calc(716 * var(--u)) auto no-repeat; }
    .steps .section-label > span { min-width: calc(285.8 * var(--u)); }
    .steps .section-title { margin-top: calc(14.3 * var(--u)); font-size: max(28px, calc(64 * var(--u))); line-height: calc(81 * var(--u)); }
    .steps-list { flex-direction: column; gap: calc(76 * var(--u)); margin: calc(31.3 * var(--u)) 0 0 calc(65.5 * var(--u)); }
    .step-card {
        width: calc(574.2 * var(--u));
        min-height: calc(351.4 * var(--u));
        padding: calc(31 * var(--u)) calc(34 * var(--u)) calc(26.8 * var(--u));
        border-radius: calc(42.7 * var(--u));
        box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-4);
    }
    .step-card-2 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-3); }
    .step-card-3 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan-2); }
    .step-card-4 { box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--cyan); }
    .step-num {
        left: calc(-16.8 * var(--u));
        top: calc(-3.6 * var(--u));
        width: calc(152.8 * var(--u));
        height: calc(51.9 * var(--u));
        padding-left: calc(44.6 * var(--u));
        font-size: max(20px, calc(46.57 * var(--u)));
        line-height: calc(57.5 * var(--u));
        clip-path: polygon(calc(51.9 * var(--u)) 0, 100% 0, calc(100% - 51.9 * var(--u)) 100%, 0 100%);
    }
    .step-icon-box { height: calc(155 * var(--u)); }
    .step-card-2 .step-icon-box { height: calc(115.6 * var(--u)); }
    .step-card-3 .step-icon-box { height: calc(131.7 * var(--u)); }
    .step-card-4 .step-icon-box { height: calc(103.8 * var(--u)); }
    .step-card-1 .step-icon { width: calc(154 * var(--u)); }
    .step-card-2 .step-icon { width: calc(140.4 * var(--u)); }
    .step-card-3 .step-icon { width: calc(136.7 * var(--u)); }
    .step-card-4 .step-icon { width: calc(110.2 * var(--u)); }
    .step-card h3 { margin-top: calc(24.5 * var(--u)); font-size: max(14px, calc(27.17 * var(--u))); line-height: calc(38.1 * var(--u)); }
    .step-card p { font-size: max(12px, calc(20.7 * var(--u))); line-height: calc(38.1 * var(--u)); }
    .step-arrow { display: none; }
    .step-card:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(272.3 * var(--u));
        bottom: calc(-50.8 * var(--u));
        width: calc(57.8 * var(--u));
        height: calc(50.46 * var(--u));
        background: url("/img/svg/mobile/triangle-dark.svg") center / 100% 100% no-repeat;
    }
    .step-card-2::after { background-image: url("/img/svg/mobile/triangle-med.svg"); }
    .step-card-3::after { background-image: url("/img/svg/mobile/triangle-light.svg"); }

    /* First Gravure teaser: centred copy, rotated screenshot below */
    .fg-teaser { padding: calc(38.1 * var(--u)) 0 calc(767.2 * var(--u)); background: var(--white) url("/img/svg/bands/m-home-fg-dots.svg?v=2") 0 0 / calc(716 * var(--u)) auto no-repeat; }
    .fg-teaser .section-title { margin-top: calc(18.3 * var(--u)); }
    .fg-teaser-logo { width: calc(433.9 * var(--u)); height: calc(99.2 * var(--u)); margin: calc(36.3 * var(--u)) auto 0; }
    .fg-teaser-copy { width: auto; margin: calc(20.4 * var(--u)) 0 0; text-align: center; }
    .fg-teaser-catch { margin: 0; font-size: max(13px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    .fg-teaser-body { margin-top: calc(32.8 * var(--u)); font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    .fg-teaser-action { margin: calc(67.8 * var(--u)) 0 0; }
    .fg-teaser-frame { left: calc(18.95 * var(--u)); top: calc(734.5 * var(--u)); }
    .fg-teaser-accent { left: calc(627.9 * var(--u)); top: calc(756.6 * var(--u)); }

    /* Referral */
    .referral { padding: calc(41.7 * var(--u)) 0 calc(25.7 * var(--u)); background: var(--cyan-tint) url("/img/svg/bands/m-home-referral.svg?v=2") 0 0 / calc(716 * var(--u)) auto no-repeat; }
    .referral .section-title { margin-top: calc(40 * var(--u)); line-height: calc(42 * var(--u)); }
    .referral-diagram { width: calc(716 * var(--u)); height: calc(545 * var(--u)); margin: calc(-7.8 * var(--u)) 0 0; }
    .referral-svg-desktop { display: none; }
    .referral-svg-mobile { display: block; width: 100%; height: 100%; overflow: visible; }
    .referral-note { margin: calc(5.6 * var(--u)) 0 0; font-size: max(12px, calc(24 * var(--u))); font-weight: 400; line-height: calc(33.9 * var(--u)); }

    /* Payout: three stacked boxes on a vertical connector */
    .payout { padding: calc(26.7 * var(--u)) 0 calc(35.7 * var(--u)); }
    .payout .section-title { margin-top: calc(6.4 * var(--u)); }
    .payout-steps { flex-direction: column; align-items: stretch; width: calc(612.8 * var(--u)); gap: 0; margin: calc(36.7 * var(--u)) 0 0 calc(51.8 * var(--u)); }
    .payout-steps::before { left: calc(296.6 * var(--u)); top: calc(35.9 * var(--u)); width: calc(4 * var(--u)); height: calc(459.7 * var(--u)); margin: 0; }
    .payout-box { width: auto; padding: 0 calc(20 * var(--u)) calc(17.4 * var(--u)); border-radius: calc(18 * var(--u)); }
    .payout-box:nth-child(2) { margin-top: calc(96.7 * var(--u)); }
    .payout-box:nth-child(3) { margin-top: calc(100.2 * var(--u)); }
    .payout-box:not(:last-child)::after { left: calc(288.1 * var(--u)); right: auto; top: auto; bottom: calc(-58.85 * var(--u)); margin: 0; }
    .payout-box:nth-child(2)::after { bottom: calc(-60.6 * var(--u)); }
    .payout-box .dash-frame rect { rx: calc(18 * var(--u) - 1px); }
    .payout-box h3 {
        height: calc(55 * var(--u));
        margin: calc(-2 * var(--u)) calc(-22 * var(--u)) 0;
        padding: 0;
        border-radius: calc(18 * var(--u)) calc(18 * var(--u)) 0 0;
        font-size: max(15px, calc(31.5 * var(--u)));
        line-height: calc(59.2 * var(--u));
        text-align: center;
    }
    .payout-box p { margin: calc(10.2 * var(--u)) 0 0; font-size: max(12px, calc(24 * var(--u))); line-height: calc(42 * var(--u)); text-align: center; }
    .payout-logos { align-items: center; gap: calc(4 * var(--u)); margin-top: calc(6 * var(--u)) !important; }
    .logo-paypal { width: calc(150 * var(--u)); height: calc(40 * var(--u)); margin: 0; }
    .logo-wise { width: calc(122.7 * var(--u)); height: calc(47.1 * var(--u)); margin: 0; border-radius: calc(18 * var(--u)); }
    .logo-wise img { width: calc(82 * var(--u)); }
    .payout-note { margin: calc(36.2 * var(--u)) 0 0; font-size: max(12px, calc(24 * var(--u))); font-weight: 400; line-height: calc(33.9 * var(--u)); }

    /* FAQ teaser */
    .faq-teaser { padding: calc(83.6 * var(--u)) 0 calc(107 * var(--u)); background: var(--cyan-tint) url("/img/svg/bands/m-home-faq.svg?v=2") 0 0 / calc(716 * var(--u)) auto no-repeat; }
    .faq-teaser .section-title { margin-top: calc(3.2 * var(--u)); }
    .faq-teaser .faq-list { width: calc(620.4 * var(--u)); margin: calc(53.8 * var(--u)) 0 0 calc(40.3 * var(--u)); }
    .faq-teaser .faq-a { width: auto; margin-left: 0; padding: calc(16 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u)); }
}

/* ── English phone: the two-line English title pushes the copy 51.9px lower, so the
   screenshot frame (and its accent mark) follow; centred copy keeps a 2vw margin ── */
@media (max-width: 900px) {
    html:lang(en) .fg-teaser-frame { top: calc(786.4 * var(--u)); }
    html:lang(en) .fg-teaser-accent { top: calc(808.5 * var(--u)); }
    html:lang(en) .payout-note { padding: 0 2vw; }
    html:lang(en) .faq-teaser .section-title { font-size: max(24px, calc(48 * var(--u))); }
}