/* Five fixed positions; RTL/LTR share the same mechanical contour. */
.hp-samples{display:block;padding:40px 40px;margin-block:40px;scroll-margin-top:100px}
.hp-samples-copy{text-align:center;max-inline-size:780px;margin:0 auto 28px}
.hp-samples-copy h2{font-size:clamp(28px,2.7vw,40px);line-height:1.35;margin:0 0 14px;text-wrap:balance}
.hp-samples-copy p{margin:0 auto;font-size:17px;text-wrap:pretty}
.hp-samples-copy p:lang(ar){font-size:22px}
/* Physical desktop order is deliberate, even when the page is RTL. */
.hp-sample-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;direction:ltr;align-items:start}
.hp-sample-series-column{min-inline-size:0;text-align:center}
.mf-site .hp-sample-series-column>h3{font:600 24px/1.4 var(--mf-display);margin:0 0 18px;text-wrap:balance}
.hp-sample-picker{width:100%;max-inline-size:350px;margin-inline:auto;justify-self:center}
.hp-sample-orbit{position:relative;aspect-ratio:1;width:100%;direction:ltr}
.hp-sample-orbit-art{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#0055a4;stroke-width:1;pointer-events:none}
.hp-sample-trigger{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:43%;aspect-ratio:1;border:0;background:transparent;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font:inherit;gap:2px;isolation:isolate}
.hp-sample-trigger-frame{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:currentColor;stroke-width:1.4;z-index:-1;overflow:visible}
.hp-sample-trigger-frame circle+circle{fill:none;stroke-width:.5}
.hp-sample-trigger-frame path{fill:none;stroke-width:1.8}
.hp-sample-trigger span{font:600 19px/1.2 var(--mf-ui);max-width:85%;text-align:center}
.mf-site .hp-sample-level{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;padding:0;min-height:44px;white-space:nowrap;border:1px solid var(--level-color);border-radius:50%;background:#fff;color:var(--wheel-ink);font:600 24px/1.1 Onest,sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy)))}
.hp-sample-picker .mf-level-starter{--wheel-ink:#1b6695}.hp-sample-picker .mf-level-a1{--wheel-ink:#2b6d3b}.hp-sample-picker .mf-level-a2{--wheel-ink:#a34412}.hp-sample-picker .mf-level-b1{--wheel-ink:#116f6e}.hp-sample-picker .mf-level-b2{--wheel-ink:#765191}.hp-sample-picker .mf-level-sarf{--wheel-ink:#3e712f}.hp-sample-picker .mf-level-nahw{--wheel-ink:#8e5426}
.hp-sample-level bdi,.hp-sample-panel bdi{font-family:Onest,sans-serif}
.mf-site .hp-sample-level:first-child:not(:has(.hp-sample-subject)){font-size:16px}
.hp-sample-level:nth-child(1){--sx:0%;--sy:-184.525%}.hp-sample-level:nth-child(2){--sx:175.496%;--sy:-57.023%}.hp-sample-level:nth-child(3){--sx:108.463%;--sy:149.286%}.hp-sample-level:nth-child(4){--sx:-108.463%;--sy:149.286%}.hp-sample-level:nth-child(5){--sx:-175.496%;--sy:-57.023%}
.hp-sample-level[aria-pressed=true]{background:var(--wheel-ink);color:white}
.hp-sample-subject{font:600 14px/1.15 var(--mf-ui)}
.hp-sample-subject:lang(ar){font-size:19px}
.hp-sample-level .hp-sample-number{font-size:18px;line-height:1.1}
.hp-sample-picker :is(button,a):focus-visible{outline:3px solid #0055a4;outline-offset:5px}
.hp-sample-panels{min-height:252px;text-align:center;margin-top:12px}
.mf-site .hp-sample-panel :is(h2,h4){font:600 26px/1.35 var(--mf-ui);color:var(--wheel-ink);margin:0 0 14px}
.hp-sample-links{display:flex;justify-content:center;gap:18px}
.hp-sample-link{flex:1;min-inline-size:0;max-width:170px;display:flex;align-items:center;flex-direction:column;gap:7px;text-align:center;text-decoration:none;border-bottom:0;padding:8px 2px 12px;transition:transform 160ms ease}
.hp-sample-link>img{inline-size:72px;block-size:102px;object-fit:contain}
.hp-sample-link>svg{width:78px;height:36px}
.hp-sample-link>span{font:600 16px/1.45 var(--mf-ui);color:var(--mf-ink);text-wrap:balance}
.hp-samples .hp-sample-link>span{white-space:nowrap}
.hp-sample-link>span:lang(ar){font-size:20px}
.hp-sample-link>.hp-sample-action{font:600 15px/1.5 var(--mf-ui);color:var(--wheel-ink);text-decoration:underline;text-underline-offset:4px}
.hp-sample-link>.hp-sample-action:lang(ar){font-size:19px}
.mf-site .hp-sample-link{color:var(--wheel-ink)}
@media(hover:hover){.hp-sample-level:hover{box-shadow:0 5px 12px #15232a16}.hp-sample-link:hover{transform:translateY(-3px)}}
.hp-sample-picker[data-ready] [hidden]{display:none!important}
.hp-sample-picker:not([data-ready]) .hp-sample-panel{margin-block:24px}
@media(max-width:799px){.hp-samples{padding:36px 16px;margin-block:40px}.hp-sample-series{grid-template-columns:1fr;gap:36px}.hp-samples-copy{margin-block-end:32px}.mf-site .hp-sample-series-column>h3{margin-block-end:14px}.hp-sample-panels{min-height:0;margin-top:10px}}
@media(max-width:380px){.hp-samples{padding-inline:12px}.hp-sample-trigger span{font-size:17px}.hp-sample-links{gap:12px}.hp-sample-subject{font-size:12px}.hp-sample-subject:lang(ar){font-size:17px}.hp-samples .hp-sample-link>span{font-size:14px}.hp-samples .hp-sample-link>span:lang(ar){font-size:18px}}
@media(prefers-reduced-motion:reduce){.hp-sample-picker *{transition:none!important;animation:none!important}.hp-sample-link:hover{transform:none}}

/* Center the complete icon and two-line caption as one balanced group. */
.hp-samples .hp-sample-center-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;inline-size:85%}
.hp-samples .hp-sample-center-content>svg{inline-size:36px;block-size:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.hp-samples .hp-sample-center-content>span{inline-size:100%;max-inline-size:none;font-size:18px;line-height:1.2}
@media(max-width:380px){.hp-samples .hp-sample-center-content>span{font-size:16px}}

/* Optical centering follows the visible lettering, including Arabic numerals. */
.hp-sample-node-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform:translateY(1px)}
.hp-sample-node-content:lang(ar){transform:translateY(2px)}
.hp-sample-node-content:lang(en){transform:none}
.mf-level-sarf .hp-sample-node-content:lang(en){transform:translateY(1px)}
@media(min-width:381px) and (max-width:799px){.mf-level-nahw .hp-sample-node-content:lang(ar){transform:translateY(1px)}}
@media(max-width:380px){.mf-level-nahw .hp-sample-node-content:lang(en){transform:translateY(1px)}}

/* Compact wheels with generous copy spacing; the section may extend past the viewport. */
@media(min-width:800px){
 .mf-homepage #book-samples{padding-block:40px 32px;margin-block:24px;scroll-margin-block-start:120px}
 .hp-samples-copy{max-inline-size:1100px;margin-block-end:32px}
 .mf-site .hp-samples-copy h2{font-size:30px;line-height:1.25;margin-block-end:12px}
 .hp-samples-copy p{font-size:16px;line-height:1.4}
 .hp-samples-copy p:lang(ar){font-size:18px;line-height:1.4}
 .mf-site .hp-sample-series-column>h3{font-size:22px;line-height:1.25;margin-block-end:8px}
 .hp-samples .hp-sample-orbit{max-inline-size:clamp(260px,calc(100svh - 480px),320px);margin-inline:auto}
 .hp-samples .hp-sample-subject:lang(ar){font-size:17px}
 .hp-samples .hp-sample-center-content{gap:4px}
 .hp-samples .hp-sample-center-content>svg{inline-size:30px;block-size:24px}
 .hp-samples .hp-sample-center-content>span{font-size:16px}
 .hp-samples .hp-sample-panels{min-block-size:0;margin-block-start:4px}
 .mf-site .hp-samples .hp-sample-panel h4{line-height:1.2;margin-block-end:6px}
 .hp-samples .hp-sample-link{gap:5px;padding-block:4px}
 .hp-samples .hp-sample-link>img{inline-size:58px;block-size:80px}
}
@media(min-width:800px) and (max-width:1000px){
 .mf-homepage #book-samples{scroll-margin-block-start:200px}
}

/* Homepage node type scales with its own orbit, independently of audio. */
.hp-samples .hp-sample-orbit{container-type:inline-size}
.mf-site .hp-samples .hp-sample-level{font-size:clamp(18px,6.875cqi,22px);line-height:1.1}
.mf-site .hp-samples .hp-sample-level:first-child:not(:has(.hp-sample-subject)){font-size:clamp(12px,4cqi,14px)}
.hp-samples .hp-sample-level>bdi{transform:translateY(1px)}
.hp-samples .hp-sample-node-content{gap:2px}
.hp-samples .hp-sample-subject{font-size:clamp(12px,3.75cqi,13px)}
.hp-samples .hp-sample-subject:lang(ar){font-size:clamp(14px,5cqi,17px)}
.hp-samples .hp-sample-level .hp-sample-number{font-size:clamp(14px,4.5cqi,16px)}
.hp-samples .mf-level-nahw .hp-sample-node-content:lang(en){transform:translateY(1px)}
@media(max-width:380px){.hp-samples .mf-level-nahw .hp-sample-node-content:lang(ar){transform:translateY(1px)}}