/* ============================================================================
   EFA www — program details page (design/プログラムの詳細.svg, 1440px).

   Design pixels via --u (www-base.css). Section boundaries on the artboard:
   page hero 152→608.9, commission →1832.5, tracking →2744.7, portal →3599.4,
   payout →4921.9, referral →5747.6, footer →6199.8. Each section below the
   hero starts with the shadow the section above casts (.shadow-top).
   ========================================================================== */

/* ── Page hero: label, 72px title, two-line lead, five jump chips ─────────── */

.page-hero { padding: calc(79.4 * var(--u)) 0 calc(63 * var(--u)); }
.page-hero .section-title-h1 { margin-top: calc(24.4 * var(--u)); }
.page-hero .section-lead { margin-top: calc(23 * var(--u)); line-height: calc(24 * var(--u)); }
.jump-nav { display: flex; gap: calc(41.4 * var(--u)); margin: calc(73.7 * var(--u)) 0 0 calc(142.5 * var(--u)); }
.jump-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(192.6 * var(--u));
    height: calc(44.2 * var(--u));
    padding: calc(1.5 * var(--u)) calc(24 * var(--u)) 0;
    background: var(--white);
    border: 2px solid var(--cyan);
    border-radius: calc(22.12 * var(--u));
    font-size: calc(21 * var(--u));
    line-height: 1;
    color: var(--ink-black);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease-out;
}
.jump-nav a:hover { background: var(--cyan-tint); }

/* ── Commission: formula figure, three explanations, conversion table ─────── */

.commission { padding: calc(77.8 * var(--u)) 0 calc(102 * var(--u)); }
.formula { position: relative; width: calc(1250 * var(--u)); height: calc(170 * var(--u)); margin: calc(24.8 * var(--u)) 0 0 calc(100 * var(--u)); }
.formula-figure { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.formula-term, .formula-op, .formula-paren {
    position: absolute;
    top: calc(69.8 * var(--u));
    margin: 0;
    font-size: calc(34.9 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.formula-term { color: var(--cyan-tint); }
.formula-term-sale { left: calc(99.6 * var(--u)); }
.formula-term-fee { left: calc(408.2 * var(--u)); }
.formula-term-result { left: calc(963.4 * var(--u)); }
@media (width > 900px) {
    /* English labels fill their plates exactly and centre both ways; "Tax-exclusive
       sales" wraps onto two lines inside the first plate. */
    html:lang(en) .formula-term {
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc(50.22 * var(--u));
        height: calc(70.71 * var(--u));
        font-size: calc(26 * var(--u));
        line-height: calc(28 * var(--u));
        text-align: center;
        white-space: normal;
    }
    html:lang(en) .formula-term-sale { left: calc(79.84 * var(--u)); width: calc(213.6 * var(--u)); }
    html:lang(en) .formula-term-fee { left: calc(388.41 * var(--u)); width: calc(213.6 * var(--u)); }
    html:lang(en) .formula-term-result { left: calc(943.59 * var(--u)); width: calc(254.85 * var(--u)); }
}
.formula-op-minus { left: calc(321.8 * var(--u)); color: var(--cyan); }
.formula-op-times { left: calc(653.1 * var(--u)); color: var(--teal); }
.formula-op-equals { left: calc(885.6 * var(--u)); color: var(--teal); }
.formula-paren { top: calc(61 * var(--u)); font-size: calc(55.36 * var(--u)); color: var(--cyan); }
.formula-paren-open { left: calc(13.9 * var(--u)); }
.formula-paren-close { left: calc(611.6 * var(--u)); }
.formula-down { display: none; }

.explain-trio {
    position: relative;
    display: grid;
    grid-template-columns: calc(418.5 * var(--u)) calc(418.5 * var(--u)) calc(355 * var(--u));
    min-height: calc(235.4 * var(--u));
    margin: calc(70.4 * var(--u)) 0 0 calc(142.2 * var(--u));
}
.explain-card h3 { margin: 0; font-size: calc(24 * var(--u)); font-weight: 700; line-height: calc(36 * var(--u)); color: var(--cyan); white-space: nowrap; }
.explain-card p { width: calc(375 * var(--u)); margin: 0 0 0 calc(1.1 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(33.9 * var(--u)); color: var(--ink-black); }
.trio-rule {
    position: absolute;
    top: calc(3.2 * var(--u));
    width: calc(19.64 * var(--u));
    height: calc(230.21 * var(--u));
}
.trio-rule-1 { left: calc(386.9 * var(--u)); } /* centred in the gap between the columns */
.trio-rule-2 { left: calc(805.5 * var(--u)); }

.types-title { margin: calc(106.8 * var(--u)) 0 0 calc(605.5 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; line-height: calc(36 * var(--u)); color: var(--ink-black); }
.types-table { width: calc(1163.7 * var(--u)); margin: calc(23.4 * var(--u)) 0 0 calc(144.5 * var(--u)); table-layout: fixed; border-collapse: collapse; }
.types-table th, .types-table td {
    height: calc(48.9 * var(--u));
    padding: calc(7.7 * var(--u)) 0 0;
    font-size: calc(21 * var(--u));
    font-weight: 400;
    line-height: calc(41.2 * var(--u));
    color: var(--ink-black);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.types-table .col-type { width: calc(275.2 * var(--u)); }
.types-table .col-desc { width: calc(520 * var(--u)); }
.types-table .types-type { padding-left: calc(15.3 * var(--u)); }
.types-table small { font-size: calc(12 * var(--u)); }
.types-table td.types-note-strong { font-weight: 700; }
.types-desc-mobile { display: none; }

/* ── Tracking: four bordered cards on cyan plates ─────────────────────────── */

.tracking { padding: calc(82.4 * var(--u)) 0 calc(96.6 * var(--u)); }
.tracking .section-lead { margin-top: calc(18 * var(--u)); line-height: calc(24 * var(--u)); }
.track-grid {
    display: grid;
    grid-template-columns: calc(437.1 * var(--u)) calc(437.1 * var(--u));
    column-gap: calc(79 * var(--u));
    row-gap: calc(53.9 * var(--u));
    margin: calc(30.8 * var(--u)) 0 0 calc(213.4 * var(--u));
}
.track-card {
    position: relative;
    z-index: 0;
    min-height: calc(274.5 * var(--u));
    background: var(--white);
    border: calc(3 * var(--u)) solid var(--cyan);
    border-radius: calc(33 * var(--u));
    /* the solid cyan plate behind each card, offset to the lower right */
    box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(5 * var(--u)) var(--cyan);
}
.track-card:nth-child(n+3) { min-height: calc(220.9 * var(--u)); }
.track-icon { position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(100 * var(--u)); height: calc(100 * var(--u)); }
.track-icon-server { left: calc(17.1 * var(--u)); top: calc(26 * var(--u)); width: calc(88.45 * var(--u)); height: calc(81.77 * var(--u)); }
.track-icon-visitor { left: calc(16.3 * var(--u)); top: calc(20.2 * var(--u)); width: calc(82.39 * var(--u)); height: calc(99.23 * var(--u)); }
.track-infinity { position: absolute; left: calc(18.7 * var(--u)); top: calc(25.9 * var(--u)); font-size: calc(78.49 * var(--u)); font-weight: 700; line-height: 1; color: var(--teal); }
.track-card h3 { margin: calc(22.4 * var(--u)) calc(12 * var(--u)) 0 calc(116.7 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(31 * var(--u)); color: var(--ink); }
.track-card p { margin: calc(0.7 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(116.7 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(29.4 * var(--u)); color: var(--ink); }
html:lang(ja) .track-card p { letter-spacing: -0.075em; } /* the artboard sets these paragraphs at about 20 characters per line */

/* ── Portal features: two columns of slanted bullets ─────────────────────── */

.tools { padding: calc(80.5 * var(--u)) 0 calc(75.3 * var(--u)); }
.tools .section-lead { margin-top: calc(17.1 * var(--u)); }
.feature-grid {
    display: grid;
    grid-template-columns: calc(490.7 * var(--u)) calc(420 * var(--u));
    grid-template-rows: calc(183.7 * var(--u)) calc(194.6 * var(--u)) auto;
    margin: calc(98.7 * var(--u)) 0 0 calc(221.4 * var(--u));
}
.feature-grid > li { width: calc(420 * var(--u)); }
.feature-grid > li::before { top: calc(-6.5 * var(--u)); }
.feature-grid p { line-height: calc(29.4 * var(--u)); }

/* ── Payout: flow figure, statement paper with two speech bubbles ─────────── */

.payout { padding: calc(104.7 * var(--u)) 0 calc(109.1 * var(--u)); }
.payout .section-title { margin-top: calc(21.2 * var(--u)); }
.payout .section-lead { margin-top: calc(5.7 * var(--u)); }
.payflow { width: calc(1210 * var(--u)); height: calc(340 * var(--u)); margin: calc(43.8 * var(--u)) 0 0 calc(120 * var(--u)); }
.payflow-svg-desktop { display: block; width: 100%; height: 100%; overflow: visible; }
.payflow-svg text { font-family: var(--font); }
.payflow-svg-mobile { display: none; }

.payout-grid { position: relative; height: calc(526.2 * var(--u)); margin: calc(66.6 * var(--u)) 0 0; }
.statement {
    position: absolute;
    left: calc(170.7 * var(--u));
    top: 0;
    width: calc(603.5 * var(--u));
    height: calc(506 * var(--u));
    padding: 0;
    background: var(--paper);
    border: calc(0.92 * var(--u)) solid var(--ink);
}
.statement .paper-title { position: absolute; left: calc(40.2 * var(--u)); top: calc(28.6 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(31 * var(--u)); }
.statement .paper-caption { position: absolute; left: calc(40.2 * var(--u)); top: calc(63.1 * var(--u)); margin: 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.statement .ledger { position: absolute; left: calc(41.2 * var(--u)); top: 0; width: calc(502.8 * var(--u)); height: 100%; margin: 0; }
.statement .ledger-row { position: absolute; left: 0; width: 100%; padding: 0; border: 0; display: block; }
.statement .ledger-row::before { content: ""; position: absolute; left: 0; width: 100%; height: 0; border-top: 1px solid var(--rule-red); }
.statement .ledger-row dt { position: absolute; left: calc(-1 * var(--u)); top: 0; font-size: calc(21 * var(--u)); line-height: calc(31 * var(--u)); white-space: nowrap; }
.statement .ledger-row dd { position: absolute; right: calc(-22.9 * var(--u)); margin: 0; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: 0.07em; white-space: nowrap; }
.statement .ledger-row-1 { top: calc(121.4 * var(--u)); }
.statement .ledger-row-1::before { top: calc(-23 * var(--u)); }
.statement .ledger-row-1 dd { top: calc(-8 * var(--u)); }
.statement .ledger-row-2 { top: calc(192.4 * var(--u)); }
.statement .ledger-row-2::before { top: calc(-19.8 * var(--u)); border-top-style: dashed; border-top-color: var(--ink); }
.statement .ledger-row-2 dd { top: calc(-7 * var(--u)); }
.statement .ledger-row-3 { top: calc(267.9 * var(--u)); }
.statement .ledger-row-3::before { top: calc(-24.1 * var(--u)); }
.statement .ledger-row-3 dd { top: calc(-4.9 * var(--u)); }
.statement .ledger-row-4 { top: calc(349.4 * var(--u)); }
.statement .ledger-row-4::before { top: calc(-25.4 * var(--u)); border-top-style: dashed; border-top-color: var(--ink); }
.statement .ledger-row-4 dd { top: calc(-6.9 * var(--u)); }
.statement .ledger-row-5 { top: calc(428 * var(--u)); }
.statement .ledger-row-5::before { top: calc(-26.8 * var(--u)); border-top-width: calc(5 * var(--u)); }
.statement .ledger-row-5 dd { top: calc(-7 * var(--u)); }

.payout-bubble { position: absolute; left: calc(810 * var(--u)); width: calc(500 * var(--u)); }
.payout-bubble-1 { left: calc(800 * var(--u)); top: calc(-16.6 * var(--u)); height: calc(270 * var(--u)); }
.payout-bubble-2 { left: calc(800 * var(--u)); top: calc(273.4 * var(--u)); height: calc(250 * var(--u)); }
.payout-bubble-figure { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.payout-bubble-text { position: absolute; left: calc(84.8 * var(--u)); width: calc(385 * var(--u)); }
html:lang(ja) .bubble-text { letter-spacing: -0.04em; }
.payout-bubble-1 .payout-bubble-text { top: calc(43.7 * var(--u)); }
.payout-bubble-2 .payout-bubble-text { top: calc(117.6 * var(--u)); }
.bubble-title { margin: 0; font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(31 * var(--u)); color: var(--ink); }
.bubble-text { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(29.4 * var(--u)); color: var(--ink); }

/* ── Referral program: figure and four bold bullets ──────────────────────── */

.referral { padding: calc(83.2 * var(--u)) 0 calc(83.8 * var(--u)); }
.referral .section-lead { margin-top: calc(17 * var(--u)); }
.referral-figure { display: block; width: calc(1140 * var(--u)); height: calc(220 * var(--u)); margin: calc(12.8 * var(--u)) 0 0 calc(150 * var(--u)); }
.referral-figure-desktop { display: block; width: 100%; height: 100%; }
.referral-figure .referral-figure-mobile { display: none; }
.referral-points { margin: calc(35.4 * var(--u)) 0 0 calc(394.9 * var(--u)); padding: 0; list-style: none; }
.referral-points > li { padding-left: calc(86.3 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(31 * var(--u)); color: var(--ink); }
.referral-points > li + li { margin-top: calc(44.8 * var(--u)); }
.referral-points > li::before { top: calc(-7.8 * var(--u)); }

/* ── Phone (design/mobile/アートボード 4.svg, 716px artboard) ─────────────
   Section boundaries: hero 152→555, commission →2380.2, tracking →3875.2,
   portal →5270.7, payout →7489.2, referral →8425.7, footer →9507.9. */

/* ── English desktop: wrapped table cells, bubble copy centred in its balloon ── */
@media (width > 900px) {
    /* Long English cells wrap; the first baseline stays where the Japanese one is
       (7.7 + 41.2/2 = 14.3 + 28/2) and the small notes drop onto their own line. */
    html:lang(en) .types-table th, html:lang(en) .types-table td { padding-top: calc(14.3 * var(--u)); line-height: calc(28 * var(--u)); white-space: normal; }
    html:lang(en) .types-table small { display: block; line-height: calc(18 * var(--u)); padding-bottom: calc(4 * var(--u)); }
    /* Balloon bodies span y 17.14..188.25 and 95.88..231.12 of their figures; the
       English text blocks are 148.6 and 119.2 tall, so these tops pad them evenly. */
    html:lang(en) .payout-bubble-1 .payout-bubble-text { top: calc(28.4 * var(--u)); }
    html:lang(en) .payout-bubble-2 .payout-bubble-text { top: calc(103.9 * var(--u)); }
}

@media (max-width: 900px) {
    .page-hero { padding: calc(56.3 * var(--u)) 0 calc(44.9 * var(--u)); }
    .page-hero .section-title-h1 { margin-top: calc(16.8 * var(--u)); font-size: max(24px, calc(52 * var(--u))); line-height: calc(52 * var(--u)); }
    .page-hero .section-lead { margin-top: calc(7.3 * var(--u)); line-height: calc(33.9 * var(--u)); }
    .jump-nav { flex-wrap: wrap; justify-content: center; gap: calc(24.6 * var(--u)) calc(36.6 * var(--u)); margin: calc(15.7 * var(--u)) calc(30 * var(--u)) 0; }
    .jump-nav a { padding-top: calc(0.6 * var(--u)); font-size: max(13px, calc(24 * var(--u))); }

    /* Commission */
    .commission { padding: calc(41.3 * var(--u)) 0 calc(66.4 * var(--u)); }
    .commission.shadow-top::before { display: none; }
    .commission .section-title { margin-top: calc(20 * var(--u)); }
    .commission .section-lead { margin-top: calc(9.2 * var(--u)); }
    .formula { width: calc(716 * var(--u)); height: calc(600 * var(--u)); margin: calc(35.6 * var(--u)) 0 0; } /* figure region 810..1410 so the result plate (bottom 1408) is whole */
    .formula-term, .formula-op { top: calc(29 * var(--u)); font-size: max(16px, calc(37.29 * var(--u))); }
    .formula-term-sale { left: calc(100.8 * var(--u)); }
    .formula-op-minus { left: calc(338.2 * var(--u)); }
    .formula-term-fee { left: calc(430.6 * var(--u)); }
    .formula-paren { top: calc(19.5 * var(--u)); font-size: calc(59.16 * var(--u)); }
    .formula-paren-open { left: calc(9.2 * var(--u)); }
    .formula-paren-close { left: calc(648 * var(--u)); }
    .formula-op-times { left: calc(305 * var(--u)); top: calc(97.2 * var(--u)); font-size: calc(106.34 * var(--u)); }
    .formula-op-equals, .formula-down { display: none; }
    .formula-term-result { left: calc(193.2 * var(--u)); top: calc(519.8 * var(--u)); font-size: max(20px, calc(53.47 * var(--u))); }
    /* English labels fill the drawn plates of m-program-formula.svg and centre both ways;
       "Tax-exclusive sales" wraps onto two lines in the first plate. */
    html:lang(en) .formula-term { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: calc(32 * var(--u)); }
    html:lang(en) .formula-term-sale { left: calc(79.7 * var(--u)); top: calc(8 * var(--u)); width: calc(228.2 * var(--u)); height: calc(75.6 * var(--u)); font-size: max(16px, calc(30 * var(--u))); }
    html:lang(en) .formula-term-fee { left: calc(409.4 * var(--u)); top: calc(8 * var(--u)); width: calc(228.2 * var(--u)); height: calc(75.6 * var(--u)); font-size: max(16px, calc(30 * var(--u))); }
    html:lang(en) .formula-term-result { left: calc(162.9 * var(--u)); top: calc(489.7 * var(--u)); width: calc(390.5 * var(--u)); height: calc(108.4 * var(--u)); font-size: max(20px, calc(40 * var(--u))); line-height: calc(44 * var(--u)); }
    .explain-trio { display: block; width: calc(616 * var(--u)); min-height: 0; margin: calc(49.1 * var(--u)) 0 0 calc(49.3 * var(--u)); } /* 59.1 less the 10 the taller formula figure added */
    .explain-card + .explain-card { margin-top: calc(31 * var(--u)); }
    .explain-card h3 { font-size: max(14px, calc(24 * var(--u))); line-height: calc(36 * var(--u)); white-space: normal; }
    .explain-card p { width: auto; font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    html:lang(ja) .explain-card p, html:lang(ja) .feature-grid p { letter-spacing: -0.07em; } /* the phone artboard tracks body copy to about 28 characters per line */
    .trio-rule { display: none; }
    .types-title { margin: calc(72.9 * var(--u)) 0 0; text-align: center; font-size: max(14px, calc(24 * var(--u))); }
    .types-table { width: calc(676.5 * var(--u)); margin: calc(13.2 * var(--u)) 0 0 calc(20.5 * var(--u)); }
    .types-table .col-type, .types-table .types-type { display: none; }
    .types-table .col-desc { width: calc(302.2 * var(--u)); }
    .types-table th, .types-table td { font-size: max(12px, calc(21 * var(--u))); white-space: normal; }
    .types-table .types-desc { padding-left: calc(15.3 * var(--u)); }
    .types-desc-full { display: none; }
    .types-desc-mobile { display: inline; }

    /* Tracking: full-width cards, same icons */
    .tracking { padding: calc(80.3 * var(--u)) 0 calc(82.6 * var(--u)); }
    .tracking .section-title { margin-top: calc(13.9 * var(--u)); }
    .tracking .section-lead { margin-top: calc(19 * var(--u)); line-height: calc(33.9 * var(--u)); }
    .track-grid { display: block; margin: calc(37.9 * var(--u)) 0 0 calc(48.4 * var(--u)); }
    .track-card { width: calc(609.5 * var(--u)); box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(5 * var(--u)) var(--cyan); }
    .track-card:nth-child(1) { min-height: calc(320.8 * var(--u)); }
    .track-card:nth-child(2) { min-height: calc(251.7 * var(--u)); margin-top: calc(38.8 * var(--u)); }
    .track-card:nth-child(3) { min-height: calc(220.9 * var(--u)); margin-top: calc(44.3 * var(--u)); }
    .track-card:nth-child(4) { min-height: calc(186.3 * var(--u)); margin-top: calc(49.5 * var(--u)); }
    .track-card h3 { margin: calc(19.6 * var(--u)) calc(12 * var(--u)) 0 calc(123.6 * var(--u)); font-size: max(14px, calc(24 * var(--u))); line-height: calc(36 * var(--u)); }
    .track-card:nth-child(n+2) h3 { font-size: max(13px, calc(21 * var(--u))); }
    .track-card:nth-child(n+3) h3, .track-card:nth-child(n+3) p { margin-left: calc(117.4 * var(--u)); }
    .track-card p { margin: 0 calc(12 * var(--u)) calc(12 * var(--u)) calc(123.6 * var(--u)); font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    html:lang(ja) .track-card p { letter-spacing: -0.06em; }

    /* Portal: single column of bullets */
    .tools { padding: calc(131.7 * var(--u)) 0 calc(69.7 * var(--u)); }
    .tools .section-title { margin-top: calc(6.7 * var(--u)); }
    .tools .section-lead { margin-top: calc(6.8 * var(--u)); line-height: calc(33.9 * var(--u)); }
    .feature-grid { display: block; margin: calc(35.5 * var(--u)) 0 0 calc(40.9 * var(--u)); }
    .feature-grid > li { width: calc(616 * var(--u)); }
    .feature-grid > li + li { margin-top: calc(40 * var(--u)); }
    .feature-grid > li::before { top: calc(1 * var(--u)); }
    .feature-grid h3 { font-size: max(14px, calc(24 * var(--u))); line-height: calc(36 * var(--u)); }
    .feature-grid p { font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }

    /* Payout: vertical flow, bubbles above and below the statement */
    .payout { padding: calc(67.7 * var(--u)) 0 calc(87.2 * var(--u)); }
    .payout .section-title { margin-top: calc(18 * var(--u)); }
    .payout .section-lead { margin-top: calc(16 * var(--u)); line-height: calc(33.9 * var(--u)); }
    .payflow { width: calc(716 * var(--u)); height: calc(640 * var(--u)); margin: calc(118.6 * var(--u)) 0 0; }
    .payflow-svg-desktop { display: none; }
    .payflow-svg-mobile { display: block; width: 100%; height: 100%; overflow: visible; }
    .payout-grid { height: calc(1018 * var(--u)); margin: calc(104 * var(--u)) 0 0; }
    .payout-bubble-figure-mobile { position: absolute; left: calc(20 * var(--u)); top: calc(-24 * var(--u)); width: calc(680 * var(--u)); height: calc(1140 * var(--u)); }
    .payout-bubble { left: 0; width: calc(716 * var(--u)); }
    .payout-bubble-1 { top: 0; height: calc(168 * var(--u)); }
    .payout-bubble-2 { top: calc(871 * var(--u)); height: calc(147 * var(--u)); }
    .payout-bubble-figure { display: none; }
    .payout-bubble-text { left: calc(74.6 * var(--u)); width: calc(570 * var(--u)); }
    .payout-bubble-1 .payout-bubble-text { top: calc(16.8 * var(--u)); }
    .payout-bubble-2 .payout-bubble-text { left: calc(79.4 * var(--u)); top: calc(24.1 * var(--u)); }
    .bubble-title { font-size: max(14px, calc(24 * var(--u))); line-height: calc(36 * var(--u)); }
    .bubble-text { font-size: max(12px, calc(24 * var(--u))); line-height: calc(33.9 * var(--u)); }
    html:lang(ja) .bubble-text { letter-spacing: -0.06em; }
    .statement { left: calc(56.8 * var(--u)); top: calc(264.4 * var(--u)); }
    .statement .paper-title { font-size: max(14px, calc(24 * var(--u))); }
    .statement .paper-caption { top: calc(61 * var(--u)); }
    .statement .ledger-row dt { font-size: max(13px, calc(24 * var(--u))); }

    /* Referral */
    .referral { padding: calc(59 * var(--u)) 0 calc(111.2 * var(--u)); }
    .referral .section-title { margin-top: calc(15.3 * var(--u)); }
    .referral .section-lead { margin-top: calc(9.9 * var(--u)); line-height: calc(33.9 * var(--u)); }
    .referral-figure { width: calc(716 * var(--u)); height: calc(330 * var(--u)); margin: calc(2.6 * var(--u)) 0 0; }
    .referral-figure-desktop { display: none; }
    .referral-figure .referral-figure-mobile { display: block; width: 100%; height: 100%; }
    .referral-points { margin: 0 0 0 calc(58 * var(--u)); }
    .referral-points > li { font-size: max(13px, calc(24 * var(--u))); line-height: calc(36 * var(--u)); }
    .referral-points > li + li { margin-top: calc(39.8 * var(--u)); }
    .referral-points > li::before { top: calc(-6 * var(--u)); }
}

/* ── English phone: readable table notes on their own line, a gap after the first
   column, smaller balloon copy that stays inside the drawn balloons ─────────── */
@media (max-width: 900px) {
    html:lang(en) .types-table .types-desc { padding-right: calc(24 * var(--u)); }
    html:lang(en) .types-table small { display: block; margin-top: calc(2 * var(--u)); font-size: max(12px, calc(18 * var(--u))); line-height: calc(26 * var(--u)); }
    /* Balloon bodies of m-program-bubbles.svg are 174.2 and 156.5 tall; title 36 + three
       28px lines = 120, so these tops pad the text evenly. */
    html:lang(en) .bubble-text { font-size: max(12px, calc(20 * var(--u))); line-height: calc(28 * var(--u)); }
    html:lang(en) .payout-bubble-1 .payout-bubble-text { top: calc(24.9 * var(--u)); }
    html:lang(en) .payout-bubble-2 .payout-bubble-text { top: calc(14.95 * var(--u)); }
    html:lang(en) .referral-points { margin-right: 2vw; }
}