/* ==========================================================================
   INSTAR Installations-Assistent – Mobile / Responsive Layer
   --------------------------------------------------------------------------
   Loaded AFTER css/style.css. It only takes effect below 1040px, so the
   desktop layout (a fixed 1000 x 620 px "application window") is untouched.

   Below that width the shell is turned into a normal, fluid document flow:
   header on top, content in the middle, footer at the bottom, and the
   back/next controls become a fixed bottom bar with touch-sized targets.
   ========================================================================== */

/*
 * The language drop-down toggle is built by the page script on every screen,
 * because the script must not care how wide the window is. It only ever shows
 * below 1041px - on the desktop the flags have a whole footer bar to sit in
 * and stay exactly as they were. Declared here rather than inside the media
 * query so that there is no width at which the button is briefly visible.
 */
#langtoggle {
    display: none;
}

/*
 * The readable repeat of a diagram's pinned labels. Built on every screen
 * because the page script must not care how wide the window is; shown only
 * below 1041px, where the labels on the drawing itself are too small to read.
 */
.legend-list {
    display: none;
}

@media (max-width: 1040px) {
    /* ---------- page / document ------------------------------------- */
    html {
        height: auto;
    }

    body {
        min-width: 0 !important;
        height: auto;
        overflow-x: hidden;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(83, 145, 214, 0.25);
    }

    .catalog-product-compare-index > div {
        min-width: 0;
    }

    /* ---------- the "application window" shell ----------------------- */
    .index_body,
    .mainbody {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        /* keep the fixed control bar from covering the end of the page */
        padding-bottom: 78px;
        box-sizing: border-box;
    }

    /* ---------- header ----------------------------------------------- */
    .page-title,
    .category-title {
        order: 1;
        height: auto !important;
        min-height: 46px;
        /* No vertical padding: the logo spans the bar edge to edge, the way
           it does on desktop (51px logo in a 51px bar). No padding on the
           right either - there the logo is absolutely positioned at right:0
           and sits flush against the edge. */
        padding: 0 8px 0 0 !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .page-title h1,
    .page-title h2 {
        order: 2;
        flex: 1 1 auto;
        margin: 0 !important;
        font-size: 13px !important;
        text-align: left !important;
        /*
         * As a flex item the title will not shrink past its min-content width,
         * and `word-break: break-word` does not lower that width - so the long
         * hyphenated title pushed the logo out of the bar. `overflow-wrap:
         * anywhere` does lower it, and min-width:0 lets the item actually
         * shrink (it is a flex container itself, so its children need it too).
         */
        min-width: 0;
        overflow-wrap: anywhere;
        /*
         * Icon and title are two inline spans of different size, so they were
         * aligned on the text baseline and their centres sat ~5px apart.
         * A flex row centres them against each other, and the header's own
         * align-items:center then puts icon, title and logo on one line.
         */
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.2;
    }

    .page-title h1 > span,
    .page-title h2 > span {
        min-width: 0;
    }

    /*
     * Dropped here: the INSTAR logo now sits at the left end of the bar and
     * already says whose assistant this is, so the little app glyph in front
     * of the title was a second mark in the same 46px.
     */
    #applogo {
        display: none !important;
    }

    .instarlogo {
        order: 1;
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        background-size: contain;
    }

    .instarlogo img {
        display: block;
        /*
         * Fills the bar top to bottom like the desktop layout does (there a
         * 51px logo sits in a 51px bar). A percentage height cannot be used:
         * while the bar's height is still being resolved the logo reserves no
         * width, and it gets pushed out of the header - so the bar's minimum
         * height is repeated here as a pixel value.
         *
         * The logo is 3.16:1, so full height means ~145px wide. It now shares
         * the bar with the title AND the language/copy controls, so the cap is
         * tighter than it was when the logo had the right end to itself.
         */
        height: 46px;
        width: auto;
        max-width: 30vw;
    }

    /* ---------- footer ------------------------------------------------ */
    /*
     * Gone below 1041px. It was a full band of screen height carrying two
     * controls: the copyright line and a row of fourteen flags. Both of the
     * things you can actually DO down there move up into the header bar, and
     * the bar itself disappears - which is also one less thing between the
     * content and the bottom edge on a short screen.
     *
     * #lang is MOVED into .page-title by applyChrome() in the page script, not
     * copied, so the click handlers bound to the flags keep working and the
     * document never holds two #lang elements. Above 1040px it is moved back.
     */
    #footer {
        display: none !important;
    }

    /* ---------- language picker + copy link, now in the header -------- */
    #lang {
        order: 3;
        float: none !important;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
        /* containing block for the drop-down */
        position: relative;
    }

    #langtoggle {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 28px;
        margin: 0;
        padding: 0 5px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 3px;
        color: #fff;
        font: inherit;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    #langtoggle:active,
    #lang.open #langtoggle {
        background: rgba(255, 255, 255, 0.28);
        border-color: #fff;
    }

    /*
     * The button wears the flag of the language currently in use, so the
     * control says what it is set to instead of only what it does. Written by
     * markLanguage() on every translate().
     */
    #langtoggle #langflag {
        display: block;
        height: 16px !important;
        width: 24px !important;
        margin: 0 !important;
        object-fit: fill;
        border: 0 !important;
        border-radius: 1px;
        opacity: 1;
    }

    #langtoggle .fa {
        font-size: 11px;
        line-height: 1;
    }

    /*
     * Fourteen flags never fit in a 46px bar, so they hang below it instead.
     * The panel is anchored to #lang inside the sticky header, which is the
     * top layer of the page - so it covers the content while it is open and
     * scrolls with the bar.
     *
     * The PNGs ship in four aspect ratios (2.00 / 1.67 / 1.60 / 1.50), so they
     * are forced into one uniform box; the hairline border is always present
     * rather than appearing on :hover, which used to shift the row by a pixel.
     */
    #langlist {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 40;
        grid-template-columns: repeat(5, auto);
        gap: 7px;
        padding: 9px;
        background: #4d4e52;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    #lang.open #langlist {
        display: grid;
    }

    #langlist img {
        display: block;
        margin: 0 !important;
        height: 20px !important;
        width: 30px !important;
        object-fit: fill;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        opacity: 0.85;
        cursor: pointer;
    }

    #langlist img:hover,
    #langlist img:active {
        opacity: 1;
        border-color: #fff;
    }

    /* the language in use, so the open panel shows where you are */
    #langlist img.active {
        opacity: 1;
        border-color: #5391d6;
        box-shadow: 0 0 0 2px rgba(83, 145, 214, 0.55);
    }

    /* the copy-link button stands next to the toggle, so it shares its size */
    #lang .clipboard {
        height: 26px !important;
        width: 26px !important;
        line-height: 26px !important;
        border-radius: 3px;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #lang .clipboard .fa-inverse {
        font-size: 13px !important;
        line-height: 26px !important;
    }

    /* ---------- loading indicator ------------------------------------- */
    #loading {
        position: fixed !important;
        top: 42% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 56px !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    /* ---------- content area ------------------------------------------ */
    /*
     * #content is a flex item with `flex: 1 1 auto`, so it is at least as tall
     * as the space left between header and footer, and grows past it when the
     * step is longer. Centring its child therefore only ever distributes free
     * space - a tall step still starts at the top and stays fully reachable.
     * `.in { display: block !important }` from style.css has to be beaten on
     * specificity here, hence the #content.in rule.
     */
    #content.in {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }

    #content {
        order: 2;
        flex: 1 1 auto;
        position: static !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        padding: 0 14px 16px;
        box-sizing: border-box;
    }

    /* every wizard step except the loading badge flows normally */
    .animated.flipInY:not(#loading) {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .step_body {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 0 8px;
        box-sizing: border-box;
    }

    /* ---------- back / next controls -> fixed bottom bar --------------- */
    .controls {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100% !important;
        height: auto !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 12px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #e3e3e3;
        z-index: 40;
    }

    .backbutton,
    .nextbutton {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 40px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    /* same as the desktop arrows: grey by default, blue on interaction -
       :active is the touch equivalent of the desktop :hover */
    .backbutton:active,
    .nextbutton:active {
        color: #5391d6;
    }

    /* ---------- language step ------------------------------------------ */
    /*
     * The decorative photo sits in a fixed 1000px div inside #step_lang, and
     * the flip animation leaves a transform on that step, which makes the div
     * a child of the step's own box. The step is only as tall as the flags,
     * so on wide-but-short layouts the photo stopped in the middle of the page
     * with a hard edge. It is dropped here and painted on the page shell
     * instead, which always spans the full viewport - so the photo is
     * complete at every size.
     * The white gradient on top reproduces the original opacity: 0.2.
     */
    #step_lang > div[style] {
        display: none !important;
    }

    .index_body:has(#step_lang.in) {
        background-image: linear-gradient(
                rgba(255, 255, 255, 0.82),
                rgba(255, 255, 255, 0.82)
            ),
            url(../images/bg.jpg);
        background-size: cover, cover;
        background-position: center center, center center;
        background-repeat: no-repeat, no-repeat;
    }

    /*
     * The flags live in two separate flex rows of seven, so each row wrapped
     * on its own and the two blocks ended up offset against each other.
     * display:contents merges them into one grid with consistent columns.
     */
    .choose-os.lang {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, 94px);
        justify-content: center;
        gap: 14px 8px;
        margin-top: 16px !important;
    }

    .choose-os.lang > p {
        grid-column: 1 / -1;
        padding-bottom: 6px !important;
    }

    .language-flexbox {
        display: contents !important;
    }

    .language-flexbox-item {
        width: 94px;
    }

    /* the fragment's own <style> spaces the flags for the desktop row */
    .lang div span {
        margin: 5px !important;
    }

    /* the flag PNGs have different aspect ratios - force one uniform box so
       the rows line up and the captions sit on a common baseline */
    .lang div span img,
    .language-flexbox-item img {
        width: 69px !important;
        height: 46px !important;
        object-fit: fill;
    }

    .language-flexbox-item p {
        margin-top: 0 !important;
        font-size: 13px !important;
        line-height: 1.3;
    }

    /* ---------- generic width resets ------------------------------------ */
    .choose-os,
    .choose-plugin,
    .cam-typ,
    .cam-auswahl,
    .language-layer,
    .language-layer2,
    .step_long,
    .instartool,
    .browser,
    .faq_body,
    .faq_text,
    .wiki_text,
    .download-cam-main,
    .download-cam-grid,
    .main-container,
    .products-grid,
    .os-grid,
    .faq-grid,
    .browser-grid,
    .plugin-grid {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* ---------- typography -----------------------------------------------
     * One scale for every page, in four steps:
     *
     *   heading      20px   step titles, F.A.Q. title
     *   lead         17px   the emphasised intro line of a step
     *   body         15px   normal copy, captions under the choice tiles
     *   annotation   13px   legends, table labels, product names, footer
     *
     * style.css sets `.index_body p { font-size: 105% }`, which at (0,1,1)
     * outranks every single-class rule below, so paragraphs were rendering at
     * 105% of the base instead of their intended size. It is reset to inherit
     * here, and every size below carries !important, so the scale holds no
     * matter which page or step the element sits on.
     * ------------------------------------------------------------------- */
    .index_body p {
        font-size: inherit;
    }

    /* heading */
    .step_os,
    .step_browser,
    .faq_title,
    .kudos {
        font-size: 20px !important;
        margin-top: 16px !important;
        margin-left: 0 !important;
    }

    /* lead */
    .step_long {
        font-size: 17px !important;
        margin-top: 14px !important;
        margin-bottom: 16px !important;
    }

    /* body */
    .cd_steps,
    .cd_steps_bottom,
    .cd_steps_long,
    .cd_steps_detailed,
    .faq_desc,
    .ready,
    .circle_desc,
    .faq_text,
    .wiki_text,
    .webui_text,
    .mount-label,
    .lan-text,
    .lan-text2,
    .lan-text-small,
    .wps-text,
    .wps-text2,
    .wps-text-small,
    .poe-text-small,
    .wap-text2,
    .wap-text-small {
        font-size: 15px !important;
        margin-top: 14px !important;
    }

    /* the camera tool cannot run on a phone or tablet - say so up front */
    .tool_desktop_hint {
        display: block !important;
        max-width: 480px;
        margin: 14px auto 4px !important;
        padding: 12px 14px;
        box-sizing: border-box;
        border: 1px solid #ffae00;
        border-left-width: 4px;
        border-radius: 4px;
        background: #fff8ea;
        font-size: 15px !important;
        line-height: 1.5;
        text-align: left;
    }

    /* annotation */
    .map {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.8;
        text-align: center;
    }

    /*
     * The part lists carry hard <br> tags that were placed to break the line
     * at the right spot on the 700px desktop canvas. On a narrow screen they
     * cut rows short and make the list look like it has fixed columns, so the
     * breaks are dropped and the items simply reflow. Each label is kept in
     * one piece so it is never split mid-word.
     */
    .map br {
        display: none;
    }

    .map span {
        white-space: nowrap;
    }

    /* ---------- "choose one" steps (LAN/WPS/PoE, indoor/outdoor, ...) ---- */
    /*
     * Markup is always: all picture tiles first, then their captions in the
     * same order. nth-of-type re-pairs tile + caption when they stack.
     */
    /*
     * Icon left, caption right - one row per option. Stacking them full width
     * meant blowing the tiles up to 300px: the artwork is only 330x245 (and
     * 200x148 for the "small" variants), so it turned soft, and three options
     * no longer fitted on a screen. A row-wrap container puts each tile next
     * to its own caption; the caption grows to fill the line, which forces the
     * next pair onto a new row.
     */
    .choose-os:not(.lang) {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: center;
        margin-top: 16px !important;
    }

    .choose-os:not(.lang) > div:nth-of-type(1) {
        order: 1;
    }
    .choose-os:not(.lang) > p:nth-of-type(1) {
        order: 2;
    }
    .choose-os:not(.lang) > div:nth-of-type(2) {
        order: 3;
    }
    .choose-os:not(.lang) > p:nth-of-type(2) {
        order: 4;
    }
    .choose-os:not(.lang) > div:nth-of-type(3) {
        order: 5;
    }
    .choose-os:not(.lang) > p:nth-of-type(3) {
        order: 6;
    }

    .choose-os:not(.lang) > div {
        float: none !important;
        flex: 0 0 auto;
        /* never wider than the artwork itself, so nothing is upscaled */
        width: 132px !important;
        max-width: 40%;
        height: auto !important;
        min-height: 98px;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        margin: 0 0 14px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .choose-os:not(.lang) > p {
        float: none !important;
        /*
         * The basis is the rest of the row, not a guess: flexbox decides where
         * to wrap from the basis, before any growing, so "tile + caption" has
         * to add up to the full row or a second tile slips onto the same line.
         */
        flex: 1 1 calc(100% - 132px);
        min-width: 0;
        width: auto !important;
        max-width: none;
        height: auto !important;
        margin: 0 0 14px !important;
        padding: 10px 12px 10px 14px;
        box-sizing: border-box;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.5;
        /* picture and caption are two siblings but one option - the caption
           draws the frame around both and is clickable via index.js */
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        touch-action: manipulation;
    }

    /*
     * The caption above is a flex box so its text sits centred beside the
     * picture - but a flex container turns every ELEMENT child into a flex
     * item, and most of these captions open with a coloured or bold lead-in
     * ("Ersteinrichtung:", "Installation:") wrapped in a span. That span
     * became a column of its own and the sentence wrapped alongside it
     * instead of continuing after it.
     *
     * display:contents drops the span's box without dropping the span: its
     * text rejoins the single anonymous flex item and reads as one paragraph
     * again, while colour, weight and direction still come down the tree by
     * inheritance. All 14 caption texts carry markup, and it is only ever
     * <span> or <strong> - nothing that needs a box of its own.
     */
    .choose-os:not(.lang) > p span,
    .choose-os:not(.lang) > p strong {
        display: contents;
    }

    .choose-os:not(.lang) > p::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -132px;
        right: 0;
        border: 1px solid #ccc;
        border-radius: 6px;
        pointer-events: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /*
     * Hovering either half lights the shared frame, the way the tiles react on
     * the desktop layout - this window size is reachable with a mouse too.
     *
     * The caption is NOT the tile's DOM sibling: the markup lists every tile
     * first and every caption after, so `div:hover + p` would pair the last
     * tile with the first caption. The pairing runs through :has() on the
     * container instead, matching the nth tile to the nth caption.
     */
    .choose-os:not(.lang) > p:hover::before,
    .choose-os:not(.lang) > p:active::before,
    .choose-os:not(.lang):has(> div:nth-of-type(1):is(:hover, :active))
        > p:nth-of-type(1)::before,
    .choose-os:not(.lang):has(> div:nth-of-type(2):is(:hover, :active))
        > p:nth-of-type(2)::before,
    .choose-os:not(.lang):has(> div:nth-of-type(3):is(:hover, :active))
        > p:nth-of-type(3)::before,
    .choose-os:not(.lang):has(> div:nth-of-type(4):is(:hover, :active))
        > p:nth-of-type(4)::before {
        border-color: #5391d6;
        box-shadow: 0 0 0 2px rgba(83, 145, 214, 0.25);
    }

    /* the instruction under the heading, mobile only */
    .choose_hint {
        display: block !important;
        margin-top: 10px !important;
        font-size: 15px !important;
    }

    #buttonFirst span.fa-cogs {
        font-size: 52px !important;
        margin: 0 !important;
    }

    #buttonInstallation span.fa-wrench {
        font-size: 42px !important;
        margin: 0 !important;
    }

    /* ---------- product / tool grids ------------------------------------- */
    ul.products-grid,
    ul.os-grid,
    ul.faq-grid,
    ul.browser-grid,
    ul.plugin-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0 !important;
        margin: 0 auto 14px !important;
    }

    .download_o-cam_li,
    .download_cam_li,
    .toolbox,
    .wiki,
    .faq,
    .forum,
    .win,
    .mac,
    .other,
    .ie {
        float: none !important;
        width: calc(50% - 10px) !important;
        max-width: 190px;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 6px !important;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .download_o-cam_inner,
    .download_cam_inner,
    .toolbox_inner,
    .wiki_inner {
        width: auto !important;
        height: auto !important;
    }

    .download_o-cam_img,
    .download_cam_img,
    .toolbox_img {
        height: auto !important;
        margin: 6px 0 0 !important;
    }

    .download_o-cam_img img,
    .download_cam_img img,
    .toolbox_img img {
        width: 100% !important;
        height: auto !important;
    }

    .products-grid .product-name,
    .products-grid .product-name a {
        font-size: 13px !important;
    }

    /*
     * Camera lists are split into one <ul> per resolution series, so each
     * group wrapped and centred on its own and the rows came out ragged.
     * display:contents lifts the <li>s out of their lists so they all flow
     * through a single grid with aligned columns and equal row heights.
     */
    .cam-auswahl {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        align-items: stretch;
        margin-top: 8px !important;
    }

    .cam-auswahl ul.products-grid {
        display: contents;
    }

    #indoorCams br,
    #outdoorCams br {
        display: none;
    }

    .cam-auswahl .download_o-cam_li,
    .cam-auswahl .download_cam_li {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .cam-auswahl .download_o-cam_inner,
    .cam-auswahl .download_cam_inner {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cam-auswahl .download_o-cam_img,
    .cam-auswahl .download_cam_img {
        display: block;
        width: 100%;
    }

    /* one common aspect ratio so every tile in a row is the same height */
    .cam-auswahl .download_o-cam_img img,
    .cam-auswahl .download_cam_img img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }

    /* the series groups dissolve into the same grid; each series name spans
       a full row above its tiles */
    .cam-auswahl .cam-series {
        display: contents;
    }

    .cam-series-title {
        grid-column: 1 / -1;
        margin: 10px 0 0;
        padding-bottom: 4px;
        border-bottom: 1px solid #ededed;
        font-size: 15px;
        text-align: start;
    }

    .cam-auswahl .cam-series:first-child .cam-series-title {
        margin-top: 0;
    }

    /* ---------- images ---------------------------------------------------- */
    #content img {
        max-width: 100%;
        height: auto;
    }

    .banner-image {
        width: 100% !important;
        max-width: 560px;
        margin: 14px auto !important;
    }

    .img300 {
        width: auto !important;
        height: auto !important;
        margin: 14px 0 !important;
    }

    .img300 img {
        width: 100% !important;
        max-width: 560px;
        height: auto !important;
    }

    img.oRing {
        width: 84px !important;
        height: 84px !important;
        margin-top: 16px !important;
    }

    .tool-interface,
    .step1-image,
    .step2-image,
    .step3-image {
        max-width: 100%;
        height: auto;
        margin-top: 16px !important;
    }

    /* ---------- tables ----------------------------------------------------- */
    table.content,
    table.content.step2 {
        width: 100% !important;
        max-width: 100%;
        margin: 18px 0 !important;
        table-layout: fixed;
    }

    table.content tr td {
        padding: 4px 3px !important;
        font-size: 13px !important;
        word-break: break-word;
    }

    table.content img {
        max-width: 100%;
        height: auto;
    }

    .updateTable tr td {
        padding: 8px 4px !important;
    }

    .data-table th,
    .data-table td,
    .data-tablecustom th.labelc,
    .data-tablecustom td {
        padding: 6px 8px !important;
        white-space: normal !important;
    }

    #fwDownload span {
        display: inline-block;
        padding: 8px 14px;
    }

    /* ---------- F.A.Q. / final step ---------------------------------------- */
    #step_faq > div,
    #step_fin > div,
    .faq_body > div {
        position: static !important;
        left: auto !important;
        width: auto !important;
        margin-left: 0 !important;
    }

    #step_faq > div > div,
    #step_fin > div > div {
        width: auto !important;
        float: none !important;
        margin-top: 10px !important;
    }

    /* breathing room before the footer at the end of the list */
    #step_faq > div,
    #step_fin > div {
        padding-bottom: 18px;
    }

    /*
     * Spacing inside a column comes from <br><br> between the entries, while
     * the gap at the column seam came from a margin - two different sources,
     * so the seam never matched. The breaks are dropped and every entry
     * carries the same bottom margin, which also governs the seam.
     */
    #step_faq > div br,
    #step_fin > div br {
        display: none;
    }

    #step_faq > div > div + div,
    #step_fin > div > div + div {
        margin-top: 0 !important;
    }

    /*
     * a.faq_link is an inline element wrapping a block div, so the column did
     * not account for the last entry's height and it ran under the footer.
     */
    .faq_link {
        display: block;
    }

    /*
     * Circle left, title + subtitle right, the circle centred against the
     * whole text block. The two text parts are separate siblings, so a plain
     * flex row would put them side by side - a two-row grid keeps them stacked
     * and lets the circle span both rows.
     */
    .faq_line,
    .faq_line2 {
        display: grid;
        grid-template-columns: 42px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        align-items: center;
        overflow: visible;
        margin: 0 0 25px !important;
    }

    .faq_line .circleBase.type1 {
        float: none !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .faq_line .circle_desc {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .faq_line .circle_desc_span {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    /* the number was placed with hard-coded margins tuned for the desktop's
       20px digit, which left it off-centre at the mobile size - centred
       properly instead, and the two-digit nudge is switched off */
    .circleBase.type1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .numba,
    .numba.numba-wide {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .circle_desc {
        margin: 0 !important;
    }

    .faq_line2:hover .circle_desc {
        width: auto !important;
    }

    .circle_desc_span {
        display: block;
        margin: 0 !important;
        font-size: 13px !important;
    }

    .numba {
        font-size: 15px !important;
    }

    /* ---------- rate_us promo (fixed pixel canvas -> card) ------------------
     * Every element sits at absolute pixel coordinates on a 1000px canvas.
     * They are put back into normal flow and rebuilt as a card that keeps the
     * desktop structure: a white head (headline, price badge, claim) over a
     * grey body (#E8E8E8, the colour of the desktop band) holding the product
     * shot, the screenshots, the feature list and the buttons.
     *
     * The two tones come from the items themselves - the head items carry the
     * white background and bleed to the card edges - so the split lands in the
     * right place no matter how tall the translated text turns out.
     *
     * Row layout instead of a column: it lets the two screenshots sit side by
     * side while everything else spans the full width.
     * ---------------------------------------------------------------------- */
    #rate_us > div {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        max-width: 440px;
        margin: 10px auto !important;
        padding: 0 0 18px !important;
        /*
         * The desktop version has pale decorative discs behind the promo,
         * reproduced here as radial gradients so no extra elements are needed.
         *
         * They are anchored to the BOTTOM of the card, not to a percentage:
         * the white head is made of three stacked items that each paint their
         * own background, so anything drawn behind it is cut off at an item
         * edge. Measuring from the bottom keeps the discs inside the grey body
         * whatever height the translated headline and claim end up with.
         */
        background-color: #e8e8e8;
        background-image: radial-gradient(
                circle at right 16px bottom 360px,
                rgba(0, 203, 255, 0.15) 0 72px,
                transparent 72px
            ),
            radial-gradient(
                circle at left 4px bottom 120px,
                rgba(255, 174, 0, 0.15) 0 60px,
                transparent 60px
            );
        background-repeat: no-repeat;
        border-radius: 10px;
        overflow: hidden;
    }

    /* out of absolute positioning, including nested children with their own
       inline left/top (the "more info" caption used to sit half off-screen) */
    #rate_us > div > *,
    #rate_us > div > a > * {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        text-align: center !important;
    }

    #rate_us > div > * {
        flex: 0 0 100%;
        max-width: 100%;
        order: 5;
        margin: 0 !important;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* --- white head --- */
    #rate_us #rate_1,
    #rate_us > div > div[title],
    #rate_us #rate_2 {
        background-color: #fff;
        padding-left: 16px;
        padding-right: 16px;
    }


    #rate_us #rate_1 {
        order: 1;
        padding-top: 18px;
        font-size: 20px !important;
        line-height: 1.25;
    }

    #rate_us > div > div[title] {
        order: 2;
    }

    #rate_us #rate_2 {
        order: 3;
        padding-bottom: 18px;
        font-size: 15px !important;
        line-height: 1.5;
    }

    /* the badge is white text that only worked on top of a decorative blob,
       so it gets the blob's colour as its own background */
    #rate_us > div > div[title] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        line-height: 1.25;
        color: #fff;
        padding: 12px 16px;
    }

    #rate_us > div > div[title]::before {
        content: "";
        position: absolute;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: #ffae00;
        z-index: -1;
    }

    #rate_us > div > div[title] {
        position: relative !important;
        min-height: 88px;
        z-index: 0;
    }

    /* --- grey body --- */
    /*
     * The box shot must occupy its whole flex line, otherwise the first
     * screenshot moves up beside it and the pair no longer sits together.
     * A max-width would shrink the flex item itself, so the item stays full
     * width and the artwork is sized by height + object-fit instead.
     */
    /*
     * Product shot on the left with the two screenshots stacked and offset
     * beside it, the way the desktop composition arranges them. Keeping them
     * on one row instead of three saves roughly 300px of scrolling.
     * The widths add up to 94%, so the row never breaks.
     */
    #rate_us .iv2box {
        order: 4;
        flex: 0 0 auto;
        width: 36% !important;
        max-width: 150px !important;
        height: auto !important;
        margin: 18px 0 14px !important;
        display: block;
        align-self: center;
    }

    #rate_us > div > a:has(.screen1) {
        order: 5;
        margin-top: 26px !important;
    }

    #rate_us > div > a:has(.screen2) {
        order: 6;
        /* pulled back over its sibling and dropped a little, so the two read
           as a stack rather than as two separate pictures */
        margin: 52px 0 0 -22% !important;
        position: relative;
        z-index: 1;
    }

    #rate_us > div > a:has(.screen1),
    #rate_us > div > a:has(.screen2) {
        flex: 0 0 auto;
        /* !important: the generic reset above sets width:auto !important */
        width: 40% !important;
        max-width: 40% !important;
        padding: 0;
        align-self: flex-start;
    }

    #rate_us .screen1,
    #rate_us .screen2 {
        max-width: 100% !important;
        display: block;
        margin: 0 !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
    }

    /* feature list on its own panel, bullets like the desktop version */
    #rate_us > div > div:has(ul) {
        order: 7;
        margin: 16px 16px 4px !important;
        padding: 12px 14px !important;
        flex: 0 0 auto;
        width: calc(100% - 32px) !important;
        background: #fff;
        border-radius: 8px;
    }

    #rate_us ul {
        list-style: none !important;
        padding: 0;
        margin: 0;
        font-size: 15px !important;
        text-align: left;
        display: inline-block;
    }

    #rate_us li {
        padding-left: 16px;
        position: relative;
        line-height: 1.6;
    }

    #rate_us li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.62em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #00cbff;
    }

    #rate_us > div > a:has(#rate_9) {
        order: 8;
        margin-bottom: 14px !important;
    }

    #rate_us #rate_9 {
        font-size: 13px !important;
        padding: 0;
    }

    #rate_us > div > a:has(.button100) {
        order: 9;
    }

    #rate_us > div > a:has(.button200) {
        order: 10;
    }

    #rate_us > div > a {
        display: block;
    }

    #rate_us img {
        max-width: 100% !important;
        height: auto !important;
    }

    #rate_us .iv2box,
    #rate_us .screen1,
    #rate_us .screen2,
    #rate_us #rate_9 {
        position: static !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
    }

    /* decorative colour blobs - the badge brings its own now */
    #rate_us > div > div:empty {
        display: none !important;
    }

    #rate_us .button100,
    #rate_us .button200 {
        position: static !important;
        width: 100% !important;
        max-width: none;
        height: auto !important;
        margin: 0 0 8px !important;
        padding: 12px 10px !important;
        box-sizing: border-box;
        border: 1px solid #c9c9c9 !important;
        border-radius: 22px;
        background: #fff;
        box-shadow: none !important;
        font-size: 15px !important;
        touch-action: manipulation;
    }

    #rate_us .button100:active,
    #rate_us .button200:active {
        border-color: #00cbff !important;
        color: #00cbff;
    }

    #rate_us .button100 span,
    #rate_us .button200 span {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
    }

    /* ---------- camera part diagrams with pinned callout labels ------------- */
    /*
     * These few steps are a genuine fixed canvas: the labels are positioned to
     * match pixel coordinates inside a 900px wide drawing. They are scaled down
     * as a whole instead of being reflowed, and stay pannable below that.
     */
    #content > div:has(.legend1, .legend2) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .step_body:has(.legend1, .legend2) {
        /*
         * The callout labels are sized in % of the base font and pinned to
         * pixel coordinates on the drawing. They must keep the proportions
         * they were drawn against, so the canvas restores the desktop base
         * instead of following the mobile scale - the whole box is scaled.
         */
        font-size: 12px;
        position: relative !important;
        /*
         * The drawing is 900px wide but the desktop canvas is 770px, so it
         * overhangs by 65px on each side. The canvas is widened to the
         * drawing's real extent - otherwise the left overhang can never be
         * reached (a scroll container has no negative scroll offset) and the
         * right one only partly.
         */
        width: 900px !important;
        height: 570px !important;
        margin: 0 !important;
        padding: 0 !important;
        /*
         * zoom, not `transform: scale`: a transform does not change layout, so
         * the scroll container kept computing its range from the unscaled box
         * and could not reach the content's edges.
         */
        zoom: var(--legend-scale, 1);
    }

    /* the labels are pinned to the 770px canvas - shifted by half the added
       width so they keep sitting on the right spots of the drawing */
    .step_body:has(.legend1, .legend2) .legend1,
    .step_body:has(.legend1, .legend2) .legend2 {
        transform: translateX(65px);
    }

    .step_body:has(.legend1, .legend2) .banner-image {
        width: 900px !important;
        max-width: none !important;
        margin: 0 0 0 -450px !important;
    }

    /*
     * Built by buildLegendLists() from the pinned labels themselves, so it
     * carries whatever the drawing carries and follows every language switch.
     * The bullet repeats the colour of the callout lines in the artwork, which
     * is what ties the list back to the picture above it.
     */
    .legend-list {
        display: block;
        list-style: none;
        margin: 2px auto 0;
        padding: 0;
        max-width: 420px;
        text-align: left;
        font-size: 14px;
        line-height: 1.45;
    }

    .legend-list li {
        position: relative;
        padding: 3px 0 3px 15px;
    }

    .legend-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.62em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ed1c24;
    }

    /* ---------- touch devices ----------------------------------------------- */
    .index_body p {
        line-height: 1.6;
    }
}

/* ==========================================================================
   Scale ladder for the pinned-label diagrams (see above)

   The ladder used to stop at 0.75, which left a 675px canvas to be dragged
   sideways in a 375px column - and the drag hid half the artwork until you
   found it. Every step is now computed from the NARROWEST width in its band,
   ((width - 28px) / 900), so the canvas always fits and there is nothing to
   drag. fitLegends() in the page script then replaces the band value with the
   exact ratio for the real width; these are the fallback.

   Fitting makes the pinned labels too small to read - that is unavoidable on a
   900px drawing in a phone column - so the same labels are repeated in
   readable type underneath, as .legend-list.
   ========================================================================== */
@media (max-width: 1040px) {
    :root {
        --legend-scale: 0.97;
    }
}
@media (max-width: 900px) {
    :root {
        --legend-scale: 0.85;
    }
}
@media (max-width: 800px) {
    :root {
        --legend-scale: 0.76;
    }
}
@media (max-width: 720px) {
    :root {
        --legend-scale: 0.68;
    }
}
@media (max-width: 640px) {
    :root {
        --legend-scale: 0.59;
    }
}
@media (max-width: 560px) {
    :root {
        --legend-scale: 0.5;
    }
}
@media (max-width: 480px) {
    :root {
        --legend-scale: 0.43;
    }
}
@media (max-width: 420px) {
    :root {
        --legend-scale: 0.37;
    }
}
@media (max-width: 360px) {
    :root {
        --legend-scale: 0.32;
    }
}

/* No hover on touch: the picture tiles must not stay dimmed. */
@media (max-width: 1040px) and (hover: none) {
    .lan,
    .lan2,
    .lansmall,
    .wps,
    .wps2,
    .wpssmall,
    .wap2,
    .wapsmall,
    .poe,
    .poesmall,
    .socket,
    .indoor,
    .outdoor,
    #buttonFirst,
    #buttonInstallation {
        opacity: 1;
    }

    .choose-os:not(.lang) > div:active {
        border-color: #5391d6 !important;
        box-shadow: 0 0 0 2px rgba(83, 145, 214, 0.35);
    }

    .download_o-cam_li:active,
    .download_cam_li:active,
    .toolbox:active {
        border-color: #5391d6 !important;
    }
}

/* Tablets / small laptops: same single-column flow, but wider and roomier.
   The whole scale moves up one step - 24 / 19 / 17 / 14 instead of
   20 / 17 / 15 / 13. The base size is raised on <body> so everything that
   simply inherits follows along; only the explicitly-sized bands below need
   restating. */
@media (min-width: 700px) and (max-width: 1040px) {
    body {
        font-size: 17px;
    }

    /* annotation band */
    .map,
    .language-flexbox-item p,
    .products-grid .product-name,
    .products-grid .product-name a,
    table.content tr td,
    .circle_desc_span,
    #footer,
    #rate_us #rate_9 {
        font-size: 14px !important;
    }

    #content {
        max-width: 720px;
        margin: 0 auto !important;
    }

    .page-title h1,
    .page-title h2 {
        font-size: 15px !important;
    }

    .step_os,
    .step_browser,
    .faq_title,
    .kudos,
    #rate_us #rate_1 {
        font-size: 24px !important;
    }

    .step_long {
        font-size: 19px !important;
    }

    #rate_us #rate_2,
    #rate_us ul,
    #rate_us .button100,
    #rate_us .button200 {
        font-size: 17px !important;
    }

    #rate_us > div {
        max-width: 520px;
    }

    #rate_us .iv2box {
        max-width: 180px !important;
    }

    .cd_steps,
    .cd_steps_bottom,
    .cd_steps_long,
    .cd_steps_detailed,
    .faq_desc,
    .ready,
    .circle_desc,
    .faq_text,
    .wiki_text,
    .webui_text,
    .numba,
    .mount-label,
    .lan-text,
    .lan-text2,
    .lan-text-small,
    .wps-text,
    .wps-text2,
    .wps-text-small,
    .poe-text-small,
    .wap-text2,
    .wap-text-small {
        font-size: 17px !important;
    }

    .map {
        font-size: 14px !important;
    }

    .choose-os:not(.lang) > div {
        width: 170px !important;
        max-width: 40%;
    }

    .choose-os:not(.lang) > p {
        flex-basis: calc(100% - 170px);
        font-size: 17px !important;
    }

    .choose-os:not(.lang) > p::before {
        left: -170px;
    }

    .banner-image,
    .img300 img {
        max-width: 640px;
    }

    .download_o-cam_li,
    .download_cam_li,
    .toolbox,
    .wiki,
    .faq,
    .forum,
    .win,
    .mac,
    .other,
    .ie {
        width: calc(25% - 10px) !important;
        max-width: 200px;
    }
}

/* Phones: a little more breathing room, slightly smaller headings. */
@media (max-width: 480px) {
    #content {
        padding: 0 12px 16px;
    }

    .step_os,
    .step_browser,
    .faq_title,
    .kudos,
    #rate_us #rate_1 {
        font-size: 18px !important;
    }

    .step_long {
        font-size: 16px !important;
    }

    .download_o-cam_li,
    .download_cam_li,
    .toolbox,
    .wiki,
    .faq,
    .forum,
    .win,
    .mac,
    .other,
    .ie {
        width: calc(50% - 8px) !important;
    }
}

/* ==========================================================================
   Phones held in landscape
   --------------------------------------------------------------------------
   A phone turned sideways is ~812 x 375, so it is wide enough to land in the
   tablet band (larger type, roomier spacing) while having barely any vertical
   room - header, control bar and footer alone took 194 of 375px. This block
   pulls the chrome and the type back to the phone scale and caps the step
   imagery, so a step still fits on one screen. Tablets are unaffected: in
   landscape they are ~768px tall and never match.
   ========================================================================== */
@media (max-width: 1040px) and (max-height: 520px) {
    body {
        font-size: 15px;
    }

    /* chrome */
    .page-title,
    .category-title {
        position: static;
        min-height: 34px;
        padding: 0 0 0 10px !important;
    }

    .instarlogo img {
        height: 34px;
    }

    .page-title h1,
    .page-title h2 {
        font-size: 12px !important;
    }

    #applogo {
        font-size: 16px !important;
    }

    .index_body,
    .mainbody {
        min-height: 0;
        padding-bottom: 58px;
    }

    #content {
        padding: 0 14px 8px;
    }

    .controls {
        padding: 2px 10px;
        padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    }

    .backbutton,
    .nextbutton {
        width: 44px !important;
        height: 44px !important;
        font-size: 30px !important;
    }

    #langtoggle {
        height: 24px;
    }

    #langtoggle #langflag {
        height: 14px !important;
        width: 21px !important;
    }

    #langlist img {
        height: 17px !important;
        width: 26px !important;
    }

    #lang .clipboard {
        height: 22px !important;
        width: 22px !important;
        line-height: 22px !important;
    }

    #lang .clipboard .fa-inverse {
        font-size: 11px !important;
        line-height: 22px !important;
    }

    #loading {
        font-size: 40px !important;
        top: 38% !important;
    }

    /* type back to the phone scale, with tighter vertical rhythm */
    .step_os,
    .step_browser,
    .faq_title,
    .kudos,
    #rate_us #rate_1 {
        font-size: 18px !important;
        margin-top: 8px !important;
    }

    .step_long {
        font-size: 16px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .cd_steps,
    .cd_steps_bottom,
    .cd_steps_long,
    .cd_steps_detailed,
    .faq_desc,
    .ready,
    .circle_desc,
    .faq_text,
    .wiki_text,
    .webui_text,
    .numba,
    .mount-label,
    .lan-text,
    .lan-text2,
    .lan-text-small,
    .wps-text,
    .wps-text2,
    .wps-text-small,
    .poe-text-small,
    .wap-text2,
    .wap-text-small {
        font-size: 15px !important;
        margin-top: 8px !important;
    }

    .map,
    .language-flexbox-item p,
    .products-grid .product-name,
    .products-grid .product-name a,
    table.content tr td,
    .circle_desc_span,
    #rate_us #rate_9 {
        font-size: 13px !important;
    }

    /* keep a step's picture inside one screenful */
    .img300 {
        margin: 8px 0 !important;
        text-align: center;
    }

    .img300 img,
    .banner-image {
        max-height: 46vh;
        width: auto !important;
        max-width: 100%;
        margin: 0 auto !important;
    }

    /*
     * ...except on the pinned-label canvas. There the drawing IS the grid the
     * labels were placed against, so capping its height pulled it away from
     * them - and because the SVGs carry a viewBox but no intrinsic size,
     * width:auto collapsed the picture to a distorted band. The canvas is
     * scaled as a whole by --legend-scale instead, which is what keeps it
     * inside the screen here too.
     */
    .step_body:has(.legend1, .legend2) .banner-image {
        width: 900px !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 0 0 -450px !important;
    }

    .choose-os:not(.lang) {
        margin-top: 8px !important;
    }

    .choose-os:not(.lang) > div {
        width: 118px !important;
        max-width: 40%;
        margin-bottom: 10px !important;
    }

    .choose-os:not(.lang) > p {
        flex-basis: calc(100% - 118px);
        margin-bottom: 10px !important;
    }

    .choose-os:not(.lang) > p::before {
        left: -118px;
    }

    .choose_hint {
        margin-top: 6px !important;
    }

    .language-flexbox-item img,
    .lang div span img {
        width: 54px !important;
        height: 36px !important;
    }

    .choose-os.lang {
        grid-template-columns: repeat(auto-fit, 76px);
        gap: 8px 6px;
    }

    .language-flexbox-item {
        width: 76px;
    }

    .lang div span {
        margin: 3px !important;
    }
}

/* ==========================================================================
   Arabic - right to left
   --------------------------------------------------------------------------
   translate() puts dir="rtl" on <html> for Arabic. Flex and grid rows mirror
   themselves from that, so only the pieces pinned to a physical side need
   restating: the frame that reaches back over a choice tile, the text that was
   explicitly left-aligned, and the arrow glyphs (back must point right).

   The desktop layout above 1040px is a fixed pixel canvas and is deliberately
   NOT mirrored - see the note in the handover.
   ========================================================================== */
@media (max-width: 1040px) {
    [dir="rtl"] .choose-os:not(.lang) > p {
        text-align: right !important;
        padding-left: 0;
        padding-right: 14px;
    }

    /* the shared frame reaches back over the tile - on the other side now */
    [dir="rtl"] .choose-os:not(.lang) > p::before {
        left: 0;
        right: -132px;
    }

    [dir="rtl"] .tool_desktop_hint {
        text-align: right;
        border-left-width: 1px;
        border-right-width: 4px;
    }

    /* the panel hangs off the other end of the bar */
    [dir="rtl"] #langlist {
        right: auto;
        left: 0;
    }

    [dir="rtl"] .legend-list {
        text-align: right;
    }

    [dir="rtl"] .legend-list li {
        padding: 3px 15px 3px 0;
    }

    [dir="rtl"] .legend-list li::before {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .page-title h1,
    [dir="rtl"] .page-title h2 {
        text-align: right !important;
    }

    /* back must point right, forward left */
    [dir="rtl"] .backbutton span,
    [dir="rtl"] .nextbutton span {
        transform: scaleX(-1);
    }

    [dir="rtl"] #rate_us ul {
        text-align: right;
    }

    [dir="rtl"] #rate_us li {
        padding-left: 0;
        padding-right: 16px;
    }

    [dir="rtl"] #rate_us li::before {
        left: auto;
        right: 0;
    }

    /* the promo screenshots are pulled over each other from the left */
    [dir="rtl"] #rate_us > div > a:has(.screen2) {
        margin: 52px -22% 0 0 !important;
    }

    /* the pinned-label drawings are a fixed canvas - keep them left to right */
    [dir="rtl"] .step_body:has(.legend1, .legend2) {
        direction: ltr;
    }

    [dir="rtl"] .map {
        direction: rtl;
    }
}

@media (min-width: 700px) and (max-width: 1040px) {
    [dir="rtl"] .choose-os:not(.lang) > p::before {
        left: 0;
        right: -170px;
    }
}

@media (max-width: 1040px) and (max-height: 520px) {
    [dir="rtl"] .choose-os:not(.lang) > p::before {
        left: 0;
        right: -118px;
    }
}

/* --------------------------------------------------------------------------
   Arabic on the desktop layout (above 1040px)
   --------------------------------------------------------------------------
   The desktop shell keeps its pixel geometry because dir is set on <body>, not
   on <html> (see translate() in index.js / instarl.js). Only the pinned-label
   drawings need pinning back: their labels sit at absolute coordinates that
   assume left-to-right.
   -------------------------------------------------------------------------- */
@media (min-width: 1041px) {
    /*
     * Measured: the over-constrained shell is resolved from the direction of
     * its PARENT, not its own - setting direction on .index_body changes
     * nothing, setting it on <body> moves the window back from 278px to 140px.
     * So <body> stays ltr for layout while keeping dir="rtl" for the
     * selectors, and the reading direction is re-applied inside the shell.
     */
    body[dir="rtl"] {
        direction: ltr;
    }

    body[dir="rtl"] .index_body,
    body[dir="rtl"] .mainbody {
        direction: rtl;
    }

    /* the pinned-label drawings sit at absolute coordinates that assume
       left-to-right */
    body[dir="rtl"] .step_body:has(.legend1, .legend2) {
        direction: ltr;
    }
}