/*
Theme Name: Lecheng
Description: Custom theme for the Treated in China site — carries the settled teal design verbatim from the static build.
Version: 1.0
*/

      :root {
        color-scheme: light;
        --bg: #e9f3ef;
        --bg-soft: #f3f9f6;
        --surface: #ffffff;
        --surface-2: #e6f1ec;
        --surface-3: #dcebe4;
        --ink: #132420;
        --ink-2: #435f57;
        --ink-3: #7d968d;
        --line: #d5e6de;
        --teal: #3e7c74;
        --teal-bright: #5fa8a0;
        --teal-deep: #2b5a52;
        --teal-ink: #ffffff;
        --grad-teal: linear-gradient(135deg, #7fb8ac 0%, #4d938a 55%, #3e7c74 100%);
        --grad-panel: linear-gradient(160deg, #eef7f3 0%, #ddefe6 100%);
        --danger: #b3402e;
        --warn-bg: #fdf3e3;
        --warn-line: #ecd9ae;
        --warn-ink: #6d5518;
        --shadow: 0 20px 45px rgba(43, 90, 82, .10);
        --shadow-sm: 0 8px 22px rgba(43, 90, 82, .08);
        --radius: 28px;
        --radius-lg: 36px;
        --font-disp: "Poppins", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
        --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
      }
      /* ===== Dark theme (same teal family, deepened) =====
         Driven by the data-theme attribute on <html>: set from the saved
         manual choice, or from the OS setting when there is none. Images
         are never filtered or darkened. */
      :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #0c1a16;
        --bg-soft: #10231d;
        --surface: #152a23;
        --surface-2: #1a332a;
        --surface-3: #214034;
        --ink: #eaf5f1;
        --ink-2: #b7cec5;
        --ink-3: #83a296;
        --line: #27473c;
        --teal: #63b3a6;
        --teal-bright: #7fc4b8;
        --teal-deep: #9fd4c8;
        --grad-teal: linear-gradient(135deg, #3d7a6e 0%, #2f6a5f 55%, #26584f 100%);
        --grad-panel: linear-gradient(160deg, #173028 0%, #122720 100%);
        --warn-bg: #33290f;
        --warn-line: #5c4c1e;
        --warn-ink: #ecd9a0;
        --shadow: 0 20px 45px rgba(0, 0, 0, .35);
        --shadow-sm: 0 8px 22px rgba(0, 0, 0, .3);
      }
      :root[data-theme="dark"] .ribbon { background: #0a1512; color: #a9c8bd; }
      :root[data-theme="dark"] .footer-in { background: #0a1512; }
      :root[data-theme="dark"] .badge,
      :root[data-theme="dark"] .boundary.on-light .badge { background: #4a3d12; color: #ecd9a0; }
      :root[data-theme="dark"] .chip,
      :root[data-theme="dark"] .flow .node,
      :root[data-theme="dark"] .visa-table th,
      :root[data-theme="dark"] .status-badge { color: var(--teal-bright); }
      :root[data-theme="dark"] .card.intent .n { color: #2a4a40; }
      /* Filled teal elements get a deeper fill in dark mode so white text
         keeps enough contrast. */
      :root[data-theme="dark"] .btn-primary,
      :root[data-theme="dark"] .btn-wa { background: #2e7d6a; }
      :root[data-theme="dark"] .btn-primary:hover,
      :root[data-theme="dark"] .btn-wa:hover { background: #35917e; }
      :root[data-theme="dark"] nav.main button[aria-current="page"],
      :root[data-theme="dark"] .lang-toggle button[aria-pressed="true"],
      :root[data-theme="dark"] .opt[aria-pressed="true"],
      :root[data-theme="dark"] .step .num,
      :root[data-theme="dark"] .status-badge.st-new { background: #2f6a5f; color: #fff; }

      /* ===== Theme toggle button (inside the language group) ===== */
      .theme-btn { display: inline-flex; align-items: center; margin-left: 6px; }
      .theme-btn .to-dark, .theme-btn .to-light { display: inline-flex; align-items: center; gap: 6px; }
      .theme-btn svg { flex: none; }
      :root[data-theme="dark"] .theme-btn .to-dark { display: none; }
      :root:not([data-theme="dark"]) .theme-btn .to-light { display: none; }

      * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
      html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
      body {
        margin: 0;
        font-family: var(--font-body);
        background: var(--bg);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
      h1, h2, h3, .serif { font-family: var(--font-disp); letter-spacing: -.01em; }
      button { font-family: inherit; }
      img { max-width: 100%; display: block; }

      /* ===== Ribbon ===== */
      .ribbon {
        background: var(--teal-deep);
        color: #eaf7f2;
        font-size: 12.5px;
        text-align: center;
        padding: 8px 16px;
        line-height: 1.5;
      }

      /* ===== Header: floating pill bar ===== */
      header.site {
        position: sticky; top: 12px; z-index: 50;
        margin: 14px auto 0; max-width: 1280px; padding: 0 22px;
      }
      .header-in {
        display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
        background: var(--surface);
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
        padding: 10px 14px 10px 18px;
      }
      .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; flex: none; }
      .brand .mark {
        width: 42px; height: 42px; flex: none;
        border-radius: 14px;
        background: var(--grad-teal);
        color: #fff; font-family: var(--font-disp); font-weight: 700; font-size: 20px;
        display: flex; align-items: center; justify-content: center;
      }
      .brand .name { display: block; font-family: var(--font-disp); font-weight: 700; font-size: 16.5px; line-height: 1.25; white-space: nowrap; }
      .brand .tag { display: block; font-size: 11.5px; color: var(--teal); font-weight: 600; white-space: nowrap; }
      nav.main { display: flex; gap: 2px; flex-wrap: nowrap; min-width: 0; }
      nav.main button {
        appearance: none; border: 0; background: transparent; cursor: pointer;
        font-size: 14px; font-weight: 600; color: var(--ink-2);
        padding: 9px 11px; border-radius: 999px; white-space: nowrap;
      }
      nav.main button:hover { background: var(--surface-2); color: var(--ink); }
      nav.main button[aria-current="page"] { background: var(--teal); color: #fff; }
      .lang-toggle { display: flex; gap: 4px; align-items: center; flex: none; flex-wrap: nowrap; }
      .lang-toggle button {
        appearance: none; border: 0; background: var(--surface-2);
        font-size: 13px; font-weight: 700; color: var(--ink-2);
        padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
      }
      .lang-toggle button[aria-pressed="true"] { background: var(--teal-deep); color: #fff; }
      .lang-toggle .ru-note { font-size: 12px; color: var(--ink-3); margin-left: 4px; white-space: nowrap; }

      /* ===== Mobile menu scaffolding (invisible on desktop) =====
         The nav and the language/theme group live inside .mobile-menu.
         On desktop it is display:contents, so its children lay out in the
         header row exactly as before (explicit orders preserve the
         brand → nav → language sequence). The consult shortcut and the
         hamburger button exist in the markup but stay hidden until a
         phone layout (media query / .force-mobile) reveals them. */
      .mobile-menu { display: contents; }
      .brand { order: 1; }
      nav.main { order: 2; }
      .lang-toggle { order: 3; }
      .hdr-cta, .hdr-burger { display: none; }
      .hdr-burger .ic-close { display: none; }
      .hdr-burger[aria-expanded="true"] .ic-close { display: block; }
      .hdr-burger[aria-expanded="true"] .ic-open { display: none; }

      /* ===== Header: same layout in both languages =====
         English labels are longer, so in English mode only the header chrome
         is tightened slightly. Positions stay identical to Chinese: brand on
         the left, nav next to it, language buttons at the right end of the
         same single row — they must never wrap onto a second row at the left. */
      body.lang-en .brand .name, body.lang-ru .brand .name, body.lang-es .brand .name, body.lang-ar .brand .name { font-size: 15.5px; }
      body.lang-en .brand .tag, body.lang-ru .brand .tag, body.lang-es .brand .tag, body.lang-ar .brand .tag { font-size: 11px; }
      body.lang-en nav.main button, body.lang-ru nav.main button, body.lang-es nav.main button, body.lang-ar nav.main button { font-size: 13.5px; padding-left: 9px; padding-right: 9px; }
      body.lang-en .lang-toggle .ru-note { font-size: 11.5px; margin-left: 2px; }
      /* Mid widths: BOTH languages switch to the same two-row bar at the same
         breakpoint — brand + language buttons (kept at the right) on row one,
         nav on row two — so switching language never changes the layout. */
      @media (min-width: 961px) and (max-width: 1260px) {
        .header-in { flex-wrap: wrap; border-radius: 30px; row-gap: 8px; }
        .brand { order: 1; }
        .lang-toggle { order: 2; margin-left: auto; }
        nav.main { order: 3; width: 100%; flex-wrap: wrap; }
      }

      /* Russian / Spanish nav labels are too wide for the single-row
         desktop header at the 1280px bar width (labels overflow and
         slide under the language selector). The header stays on ONE
         row (settled design): tighten gaps, paddings and sizes for
         those two languages until the row fits. */
      @media (min-width: 1261px) {
        body.lang-ru .header-in, body.lang-es .header-in { gap: 8px; padding-left: 14px; padding-right: 10px; }
        body.lang-ru .brand, body.lang-es .brand { gap: 8px; }
        body.lang-ru .brand .mark, body.lang-es .brand .mark { width: 36px; height: 36px; border-radius: 12px; }
        body.lang-ru .brand .tag, body.lang-es .brand .tag { font-size: 10px; }
        body.lang-ru nav.main button, body.lang-es nav.main button { font-size: 12px; padding-left: 7px; padding-right: 7px; }
        body.lang-ru .brand .name, body.lang-es .brand .name { font-size: 15px; }
        body.lang-ru .lang-toggle .lang-trigger, body.lang-es .lang-toggle .lang-trigger { padding: 8px 10px; font-size: 12.5px; }
        body.lang-ru .theme-btn, body.lang-es .theme-btn { margin-left: 2px; }
      }

      /* ===== Views ===== */
      .view { display: none; }
      .view.active { display: block; }

      /* ===== Hero ===== */
      .hero { position: relative; overflow: hidden; padding: 58px 0 30px; }
      .hero .waves { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
      .hero-in { position: relative; text-align: center; max-width: 880px; margin: 0 auto; }
      .eyebrow {
        display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
        color: var(--teal); background: var(--surface);
        padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow-sm);
      }
      .hero h1 {
        font-size: clamp(34px, 5.6vw, 58px); line-height: 1.22; font-weight: 800;
        margin: 26px 0 18px;
      }
      .hero h1 .hl, h2 .hl { color: var(--teal-bright); }
      .hero .lede { font-size: 17px; color: var(--ink-2); max-width: 700px; margin: 0 auto; }
      .hero .lede strong { color: var(--ink); }
      .hero .sub { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
      .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

      /* ===== Buttons ===== */
      .btn {
        appearance: none; cursor: pointer; border: 0; text-decoration: none;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-size: 15px; font-weight: 700; line-height: 1.3;
        padding: 14px 28px; border-radius: 999px;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      }
      .btn:active { transform: scale(.98); }
      .btn-primary, .btn-wa { background: var(--teal); color: #fff; box-shadow: 0 12px 26px rgba(62, 124, 116, .3); }
      .btn-primary:hover, .btn-wa:hover { background: var(--teal-deep); }
      .btn-wa:disabled { background: var(--surface-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
      .btn-ghost { background: var(--surface); color: var(--teal-deep); box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-sm); }
      .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--teal-bright), var(--shadow-sm); }
      .btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px currentColor; }
      .btn-danger.armed { background: var(--danger); color: #fff; }
      .btn-sm { padding: 8px 18px; font-size: 13.5px; }

      /* ===== Hero bento mosaic ===== */
      .bento {
        position: relative;
        display: grid; grid-template-columns: 1.9fr 1fr; gap: 18px;
        align-items: stretch;
        margin-top: 44px; text-align: left;
      }
      .bento .photo-card {
        border-radius: var(--radius-lg); overflow: hidden; position: relative;
        box-shadow: var(--shadow); min-height: 340px;
      }
      .bento .photo-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
      .bento .photo-card figcaption {
        position: absolute; left: 16px; bottom: 16px; right: 16px;
        background: rgba(16, 36, 31, .72); color: #eaf7f2;
        font-size: 12.5px; padding: 10px 16px; border-radius: 16px;
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      }
      /* Right column: two equal rows (1fr / 1fr), so the seam between the two
         cards always sits at the photo's mid-height and the top and bottom
         edges line up with the photo in both languages, at any text length. */
      .bento .side { display: grid; gap: 18px; grid-template-rows: 1fr 1fr; height: 100%; }
      /* Desktop: lock the photo to the same 5:3 proportion in every language.
         Long EN/RU/ES side text used to stretch the whole mosaic taller
         (photo included). The photo now sizes from its own width via
         aspect-ratio + align-self:start, so it can neither stretch taller
         nor spill sideways over the side column; the side column stretches
         to the row height as before. */
      /* Long translations: slightly tighter feature text so the side column
         fits the photo's frame in EN/RU/ES/AR too. */
      body.lang-en .feature-card p, body.lang-ar .feature-card p {
        font-size: 14px; line-height: 1.55;
      }
      body.lang-ru .feature-card p, body.lang-es .feature-card p {
        font-size: 13.5px; line-height: 1.5;
      }
      body.lang-ru .feature-card h3, body.lang-es .feature-card h3 {
        font-size: 19px;
      }
      body.lang-en .feature-card, body.lang-ru .feature-card,
      body.lang-es .feature-card, body.lang-ar .feature-card {
        padding: 22px 26px;
      }
      body.lang-en .mini-card, body.lang-ru .mini-card,
      body.lang-es .mini-card, body.lang-ar .mini-card {
        padding: 18px 24px;
      }
      .feature-card {
        border-radius: var(--radius-lg); padding: 26px 28px; color: #fff;
        background: var(--grad-teal); box-shadow: var(--shadow);
        position: relative; overflow: hidden;
      }
      .feature-card h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
      .feature-card p { margin: 0; font-size: 14.5px; opacity: .92; }
      .feature-card .deco { position: absolute; right: -30px; bottom: -40px; opacity: .28; }
      .mini-card {
        background: var(--surface); border-radius: var(--radius);
        box-shadow: var(--shadow-sm); padding: 20px 24px;
        display: flex; flex-direction: column; justify-content: center;
      }
      .mini-card b { font-family: var(--font-disp); font-size: 19px; display: block; margin-bottom: 2px; }
      .mini-card span { font-size: 13.5px; color: var(--ink-2); }

      .trust-points {
        list-style: none; margin: 18px 0 0; padding: 0;
        /* Column widths are tuned to the .bento grid above (1.9fr / 1fr, gap 18px):
           cards 1+2 together span exactly the photo's width and card 3 matches the
           side column, so the vertical seams line up between the two rows. */
        display: grid; grid-template-columns: calc(32.7586% - 14.9px) calc(32.7586% - 14.9px) calc(34.4828% - 6.21px); gap: 18px; text-align: left;
        align-items: stretch;
      }
      .trust-points li {
        background: var(--surface); border-radius: var(--radius);
        box-shadow: var(--shadow-sm); padding: 20px 22px; height: 100%;
        font-size: 14px; color: var(--ink-2); display: flex; gap: 12px;
      }
      .trust-points strong { color: var(--ink); }
      .trust-points .tick {
        flex: none; width: 26px; height: 26px; border-radius: 50%;
        background: var(--surface-2); color: var(--teal);
        display: flex; align-items: center; justify-content: center; margin-top: 1px;
      }
      .trust-points .tick svg { width: 13px; height: 13px; }

      /* ===== Sections ===== */
      .block { padding: 52px 0 8px; }
      .band { margin-top: 52px; padding: 8px 0 60px; }
      .band-panel {
        background: var(--surface); border-radius: var(--radius-lg);
        box-shadow: var(--shadow); padding: 46px 44px 40px; margin-top: 52px;
        position: relative; overflow: hidden;
      }
      .band-mint { background: var(--grad-panel); }
      .sec-head { max-width: 720px; margin-bottom: 30px; }
      .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
      .sec-head h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; line-height: 1.3; margin: 0 0 12px; }
      .sec-head p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
      .note { font-size: 13.5px; color: var(--ink-3); }

      /* ===== Cards & grids ===== */
      .card {
        background: var(--surface); border-radius: var(--radius);
        box-shadow: var(--shadow-sm); padding: 28px;
      }
      .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .card.intent {
        text-align: left; cursor: pointer; border: 0; font: inherit; color: inherit;
        padding: 30px 28px; position: relative; overflow: hidden;
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .card.intent:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
      .card.intent .n {
        font-family: var(--font-disp); font-weight: 800; font-size: 44px;
        color: var(--surface-3); line-height: 1; display: block; margin-bottom: 14px;
      }
      .card.intent h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
      .card.intent p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); }
      .card.intent .go {
        display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--teal);
        background: var(--surface-2); padding: 8px 16px; border-radius: 999px;
      }
      .line-card h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; }
      .line-card p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; }
      .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
      .chip {
        font-size: 13px; font-weight: 600; color: var(--teal-deep);
        background: var(--surface-2); border-radius: 999px; padding: 6px 14px;
      }

      /* ===== Numbered value cards 01–04 ===== */
      .values { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .value-card {
        background: var(--surface); border-radius: var(--radius);
        box-shadow: var(--shadow-sm); padding: 28px 30px;
        display: flex; gap: 20px; align-items: flex-start;
      }
      .value-card .vnum {
        font-family: var(--font-disp); font-weight: 800; font-size: 30px; line-height: 1;
        color: var(--teal-bright); flex: none;
        background: var(--surface-2); border-radius: 18px; padding: 12px 14px;
      }
      .value-card b { display: block; font-size: 17px; margin-bottom: 4px; font-family: var(--font-disp); }
      .value-card span { font-size: 14.5px; color: var(--ink-2); }

      /* ===== Boundary (deep teal wide card) ===== */
      .boundary {
        background: var(--grad-teal); color: #f2faf7;
        border-radius: var(--radius-lg); padding: 38px 42px; box-shadow: var(--shadow);
      }
      .boundary h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; color: #fff; }
      .boundary ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
      .boundary .badge { background: rgba(255,255,255,.18); color: #fff; }
      .boundary.on-light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
      .boundary.on-light h3 { color: var(--ink); }
      .boundary.on-light ul { color: var(--ink-2); }
      .boundary.on-light .badge { background: #fdf0d3; color: #8a6410; }

      .badge {
        display: inline-block; font-size: 12px; font-weight: 700; white-space: nowrap;
        background: #fdf0d3; color: #8a6410; border-radius: 999px; padding: 2.5px 11px;
        vertical-align: 1px; margin-left: 4px;
      }

      /* ===== Steps ===== */
      .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
      .step { padding: 26px 24px; }
      .step .num {
        font-family: var(--font-disp); font-weight: 800; font-size: 15px;
        width: 38px; height: 38px; border-radius: 50%;
        background: var(--teal); color: #fff;
        display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
      }
      .step h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; }
      .step p { margin: 0; font-size: 14px; color: var(--ink-2); }

      /* ===== Directory lists ===== */
      .dir-group { margin-bottom: 34px; }
      .dir-group > h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
      .dir-list { display: grid; gap: 12px; }
      .dir-item {
        background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-sm);
        padding: 18px 24px; display: grid; grid-template-columns: 250px 1fr; gap: 6px 22px;
      }
      .dir-item b { font-size: 15.5px; }
      .dir-item span { font-size: 14.5px; color: var(--ink-2); }
      .alert-box {
        background: var(--warn-bg); border: 1.5px solid var(--warn-line); color: var(--warn-ink);
        border-radius: var(--radius); padding: 28px 30px;
      }
      .alert-box h3 { margin: 0 0 10px; font-size: 19px; color: inherit; }
      .alert-box p { margin: 0 0 10px; font-size: 15px; }
      .alert-box p:last-child { margin-bottom: 0; }
      .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
      .flow .node {
        background: var(--surface-2); color: var(--teal-deep); font-weight: 700; font-size: 14px;
        border-radius: 999px; padding: 9px 18px;
      }
      .flow .arr { color: var(--teal-bright); font-weight: 800; }

      /* ===== Visa table ===== */
      .visa-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
      .visa-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 15px; }
      .visa-table th, .visa-table td { padding: 18px 24px; text-align: left; vertical-align: top; }
      .visa-table th { width: 210px; font-family: var(--font-disp); font-size: 15px; background: var(--surface-2); color: var(--teal-deep); }
      .visa-table td { color: var(--ink-2); }
      .visa-table td strong { color: var(--ink); }
      .visa-table tr + tr th, .visa-table tr + tr td { border-top: 1px solid var(--line); }

      /* ===== FAQ accordion ===== */
      .faq-item {
        background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-sm);
        margin-bottom: 12px; overflow: hidden;
      }
      .faq-q {
        appearance: none; border: 0; background: transparent; cursor: pointer;
        width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink);
        padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
      }
      .faq-q .chev {
        flex: none; width: 30px; height: 30px; border-radius: 50%;
        background: var(--surface-2); color: var(--teal);
        display: flex; align-items: center; justify-content: center; font-size: 15px;
        transition: transform .2s ease;
      }
      .faq-item.open .faq-q .chev { transform: rotate(180deg); }
      .faq-a { display: none; padding: 0 26px 22px; }
      .faq-item.open .faq-a { display: block; }
      .faq-a p { margin: 0; color: var(--ink-2); font-size: 15px; }

      /* ===== Stories placeholder ===== */
      .stories-empty {
        border: 2px dashed var(--teal-bright); border-radius: var(--radius-lg);
        padding: 42px 36px; text-align: center; background: var(--surface);
      }
      .stories-empty h3 { margin: 0 0 10px; font-size: 20px; }
      .stories-empty p { margin: 0 auto; max-width: 620px; color: var(--ink-2); font-size: 15px; }
      .stories-empty .pill-note {
        display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700;
        color: var(--teal); background: var(--surface-2); border-radius: 999px; padding: 7px 16px;
      }

      /* ===== Consult tool & forms ===== */
      .tool { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
      .field { margin-bottom: 20px; }
      .field:last-child { margin-bottom: 0; }
      .field label, .flabel { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 9px; }
      .opts { display: flex; flex-wrap: wrap; gap: 8px; }
      .opt {
        appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
        background: var(--surface-2); color: var(--ink-2); border: 0;
        border-radius: 999px; padding: 9px 18px;
      }
      .opt[aria-pressed="true"] { background: var(--teal); color: #fff; }
      input[type="text"], select, textarea {
        width: 100%; font: inherit; font-size: 15px; color: var(--ink);
        background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 16px;
        padding: 12px 16px;
      }
      input[type="text"]:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-bright); outline-offset: 1px; border-color: transparent; }
      textarea { min-height: 88px; resize: vertical; }
      .summary-box {
        background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
        padding: 24px 26px; min-height: 180px; white-space: pre-wrap; word-break: break-word;
        font-size: 14.5px; line-height: 1.7;
      }
      .summary-box:empty::before { content: "在左侧回答问题后，这里会生成你的咨询摘要。复制下来，粘贴到 WhatsApp 或邮件里发给我们即可。"; color: var(--ink-3); }
      .summary-box.en:empty::before { content: "Answer the questions on the left, and your consultation summary will appear here. Copy it and paste it into WhatsApp or an email to send it to us."; color: var(--ink-3); }
      .summary-box.ru:empty::before { content: "Ответьте на вопросы слева, и здесь появится сводка вашей консультации. Скопируйте её и вставьте в WhatsApp или письмо, чтобы отправить нам."; color: var(--ink-3); }
      .summary-box.es:empty::before { content: "Responda a las preguntas de la izquierda y aquí aparecerá el resumen de su consulta. Cópielo y péguelo en WhatsApp o en un correo para enviárnoslo."; color: var(--ink-3); }
      .summary-box.ar:empty::before { content: "أجب عن الأسئلة، وسيظهر هنا ملخص استشارتك. انسخه والصقه في واتساب أو بريد إلكتروني لإرساله إلينا."; color: var(--ink-3); }
      .tool-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
      .copied { font-size: 13.5px; color: var(--teal); font-weight: 700; }
      .form-err { font-size: 14px; color: var(--danger); font-weight: 700; }
      .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
      .form-grid .full { grid-column: 1 / -1; }
      .submit-card { margin-top: 22px; }
      .submit-card > h3 { margin: 0 0 6px; font-size: 20px; }
      .submit-done {
        margin-top: 20px; background: var(--surface-2); border-radius: 20px; padding: 20px 24px; font-size: 15px;
      }
      .wa-card { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; }

      /* ===== Admin ===== */
      .admin-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
      .admin-stat {
        background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-sm);
        padding: 9px 18px; font-size: 13.5px; color: var(--ink-2);
      }
      .admin-stat b { font-family: var(--font-disp); font-size: 16px; color: var(--teal); margin-right: 6px; }
      .admin-filters { display: grid; grid-template-columns: 200px 240px 1fr; gap: 12px; margin-bottom: 20px; }
      .rec {
        background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-sm);
        padding: 18px 24px; margin-bottom: 12px;
        display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
      }
      .rec-main b { font-size: 16px; }
      .status-badge {
        font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 12px;
        background: var(--surface-2); color: var(--teal-deep); margin-left: 8px; vertical-align: 2px;
      }
      .status-badge.st-new { background: var(--teal); color: #fff; }
      .rec-meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
      .rec-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
      .rec-tag { font-size: 12.5px; font-weight: 600; background: var(--surface-2); border-radius: 999px; padding: 3px 12px; color: var(--ink-2); }
      .rec-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
      .rec-actions select { width: auto; padding: 8px 12px; font-size: 13.5px; border-radius: 999px; }
      .detail-card { margin-top: 18px; }
      .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: 14.5px; margin-bottom: 14px; }
      .detail-grid dt { color: var(--ink-3); font-size: 13px; }
      .detail-grid dd { margin: 0 0 8px; color: var(--ink); }
      .detail-text {
        background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 16px;
        padding: 14px 16px; font-size: 14px; white-space: pre-wrap; word-break: break-word; margin-bottom: 12px;
      }
      .empty-box {
        border: 2px dashed var(--line); border-radius: var(--radius); padding: 38px 22px;
        text-align: center; color: var(--ink-3); font-size: 14.5px; background: var(--surface);
      }

      /* ===== Footer ===== */
      footer.site { margin-top: 70px; padding: 0 22px 26px; }
      .footer-in {
        background: var(--teal-deep); color: #cfe4dc; border-radius: var(--radius-lg);
        padding: 38px 42px 30px; font-size: 13.5px; line-height: 1.7;
      }
      .footer-in p { margin: 0 0 10px; }
      .footer-in .disc { color: #eaf7f2; }
      .footer-admin {
        background: none; border: 0; cursor: pointer; font: inherit; color: #a9d8c9;
        text-decoration: underline; text-underline-offset: 3px; padding: 0;
      }
      .footer-admin:hover { color: #fff; }

      /* ===== Language visibility ===== */
      body.lang-zh .en-only, body.lang-zh .ru-only, body.lang-zh .es-only, body.lang-zh .ar-only { display: none !important; }
      body.lang-en .zh-only, body.lang-en .ru-only, body.lang-en .es-only, body.lang-en .ar-only { display: none !important; }
      body.lang-ru .zh-only, body.lang-ru .en-only, body.lang-ru .es-only, body.lang-ru .ar-only { display: none !important; }
      body.lang-es .zh-only, body.lang-es .en-only, body.lang-es .ru-only, body.lang-es .ar-only { display: none !important; }
      body.lang-ar .zh-only, body.lang-ar .en-only, body.lang-ar .ru-only, body.lang-ar .es-only { display: none !important; }
      /* Arabic (Colby's call, 2026-11-01): layout stays LTR like every other language — no mirroring;
         only Arabic text blocks read RTL and align right. */
      .view[lang="ar"] p, .view[lang="ar"] h1, .view[lang="ar"] h2, .view[lang="ar"] h3, .view[lang="ar"] h4,
      .view[lang="ar"] li, .view[lang="ar"] th, .view[lang="ar"] td,
      .view[lang="ar"] label, .view[lang="ar"] .flabel, .view[lang="ar"] .sec-head,
      .view[lang="ar"] .faq-q, .view[lang="ar"] .note, .view[lang="ar"] .opt,
      .view[lang="ar"] .summary-box, .view[lang="ar"] .dir-item,
      .view[lang="ar"] input, .view[lang="ar"] textarea, .view[lang="ar"] select {
        direction: rtl; text-align: right;
      }
      .view[lang="ar"] .btn { direction: rtl; }
      .view[lang="ar"] .num, .view[lang="ar"] .step .num { direction: ltr; }

      /* ===== Responsive ===== */
      @media (max-width: 960px) {
        .steps { grid-template-columns: 1fr 1fr; }
        .grid3, .trust-points { grid-template-columns: 1fr; }
        .grid2, .values, .tool { grid-template-columns: 1fr; }
        .bento { grid-template-columns: 1fr; }
        .bento .photo-card { min-height: 260px; }
        .dir-item { grid-template-columns: 1fr; }
        .admin-filters { grid-template-columns: 1fr; }
        .band-panel { padding: 32px 24px; }
        .boundary { padding: 30px 26px; }
        .footer-in { padding: 30px 26px; }
        header.site { top: 8px; }
        /* Phone/tablet: the header card becomes a single-column grid, so
           every row is hard-capped at the card's content width. The language
           + theme group sits on its own row (order 2, between brand and nav),
           right-aligned, and can wrap inside the card — the theme button can
           never be pushed past the card's right edge. Desktop is untouched. */
        .header-in {
          display: grid; grid-template-columns: minmax(0, 1fr);
          border-radius: 30px; row-gap: 10px;
        }
        nav.main { order: 3; width: 100%; flex-wrap: wrap; }
        .lang-toggle {
          order: 2; width: 100%; max-width: 100%; min-width: 0;
          flex-wrap: wrap; justify-content: flex-end; row-gap: 6px;
        }
        .lang-toggle .ru-note { flex: 0 1 auto; min-width: 0; white-space: normal; }
      }
      @media (max-width: 560px) {
        .steps, .form-grid, .detail-grid { grid-template-columns: 1fr; }
        .visa-table th, .visa-table td { display: block; width: 100%; }
        .visa-table th { padding-bottom: 4px; }
        .visa-table td { padding-top: 4px; }
        .hero { padding-top: 40px; }
      }

      /* ===== Phone optimisation (iPhone widths, ~390–430px) =====
         Scoped to narrow screens only: desktop layout, palette, copy,
         language and theme logic are untouched. Goals: no sideways
         scroll anywhere, >=44px tap targets, 16px form text (stops iOS
         focus zoom), full-width CTAs, stacked mosaic and admin. */
      html, body { overflow-x: clip; max-width: 100%; }
      img, svg, table, video { max-width: 100%; }
      @media (max-width: 820px) {
        .wrap { padding-left: 16px; padding-right: 16px; }
        .ribbon { font-size: 12px; padding: 8px 14px; }
        /* Header scrolls away instead of eating the viewport, and is a
           simple stacked card: brand, language/theme, then nav grid. */
        header.site { position: relative; top: 0; margin-top: 10px; padding: 0 12px; }
        .header-in {
          display: flex; flex-direction: column; align-items: stretch;
          gap: 10px; padding: 14px; border-radius: 24px;
        }
        .brand { margin-right: 0; gap: 10px; }
        .brand .mark { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
        .brand .name, body.lang-en .brand .name { font-size: 15px; white-space: normal; }
        .brand .tag, body.lang-en .brand .tag { font-size: 11px; white-space: normal; }
        .lang-toggle {
          order: 2; width: 100%; justify-content: flex-start;
          flex-wrap: wrap; gap: 6px;
        }
        .lang-toggle button {
          min-height: 44px; padding: 10px 14px; font-size: 13px;
          display: inline-flex; align-items: center; justify-content: center;
        }
        .theme-btn { margin-left: 0; min-height: 44px; }
        .lang-toggle .ru-note {
          font-size: 11.5px; margin-left: 2px; white-space: normal;
          align-self: center;
        }
        nav.main {
          order: 3; width: 100%;
          display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
        }
        nav.main button, body.lang-en nav.main button {
          min-height: 44px; padding: 9px 4px; font-size: 13px; line-height: 1.3;
          white-space: normal; text-align: center;
          display: flex; align-items: center; justify-content: center;
          background: var(--surface-2);
        }
        nav.main button[aria-current="page"] { background: var(--teal); }
        /* Hero type scale + full-width CTAs */
        .hero { padding: 34px 0 10px; }
        .hero-in { text-align: left; }
        .eyebrow {
          max-width: 100%; white-space: normal; text-align: left;
          font-size: 11.5px; line-height: 1.5; padding: 7px 13px; border-radius: 18px;
        }
        .hero h1 { font-size: 30px; line-height: 1.28; margin: 20px 0 14px; }
        .hero .lede { font-size: 16px; line-height: 1.7; }
        .hero .sub { text-align: center; }
        .cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
        .cta-row .btn { width: 100%; }
        .btn { min-height: 48px; padding: 13px 20px; font-size: 15px; }
        .btn-sm { min-height: 44px; padding: 9px 16px; }
        /* Mosaic: single column, uniform gaps and edges */
        .bento { gap: 14px; margin-top: 30px; }
        .bento .photo-card { min-height: 230px; border-radius: 24px; }
        .bento .photo-card figcaption { left: 10px; right: 10px; bottom: 10px; font-size: 12px; padding: 9px 13px; }
        .bento .side { gap: 14px; grid-template-rows: auto auto; height: auto; }
        .feature-card { border-radius: 24px; padding: 22px 20px; }
        .feature-card h3 { font-size: 19px; }
        .feature-card p { font-size: 14px; }
        .feature-card .deco { display: none; }
        .mini-card { border-radius: 24px; padding: 18px 20px; }
        .trust-points { gap: 12px; margin-top: 14px; }
        .trust-points li { padding: 16px 18px; border-radius: 24px; }
        /* Sections & cards: tighter padding, same rhythm */
        .block { padding: 38px 0 4px; }
        .band { margin-top: 38px; padding-bottom: 44px; }
        .band-panel { padding: 26px 18px 22px; margin-top: 38px; border-radius: 24px; }
        .sec-head { margin-bottom: 22px; }
        .sec-head h2 { font-size: 26px; line-height: 1.35; }
        .sec-head p { font-size: 15px; }
        .card { padding: 20px 18px; border-radius: 24px; }
        .card.intent { padding: 22px 20px; }
        .card.intent .n { font-size: 36px; margin-bottom: 10px; }
        .grid3, .grid2, .values, .tool { gap: 14px; }
        .values { grid-template-columns: 1fr; }
        .value-card { padding: 20px 18px; gap: 14px; border-radius: 24px; }
        .value-card .vnum { font-size: 24px; padding: 10px 12px; border-radius: 14px; }
        .boundary { padding: 24px 20px; border-radius: 24px; }
        .boundary ul { padding-left: 18px; font-size: 14.5px; }
        .badge { white-space: normal; line-height: 1.45; max-width: 100%; }
        .steps { gap: 12px; }
        .step { padding: 20px 18px; }
        .dir-item { padding: 16px 18px; border-radius: 20px; gap: 4px; }
        .dir-group { margin-bottom: 26px; }
        .alert-box { padding: 22px 20px; border-radius: 24px; }
        .alert-box .btn, .line-card .btn, .card .btn-primary, .card .btn-ghost { max-width: 100%; }
        .alert-box .btn { width: 100%; }
        .stories-empty { padding: 28px 20px; border-radius: 24px; }
        .flow { gap: 6px; }
        .flow .node { font-size: 13px; padding: 8px 13px; }
        .visa-table th, .visa-table td { padding: 14px 18px; }
        /* FAQ: bigger tap row */
        .faq-q { min-height: 56px; padding: 16px 18px; font-size: 15.5px; }
        .faq-q .chev { width: 36px; height: 36px; }
        .faq-a { padding: 0 18px 18px; }
        /* Forms: 16px inputs stop iOS auto-zoom; single column; big opts */
        input[type="text"], select, textarea {
          font-size: 16px; min-height: 48px; padding: 12px 14px; border-radius: 14px;
        }
        textarea { min-height: 96px; }
        .field { margin-bottom: 18px; }
        .opts { gap: 8px; }
        .opt {
          min-height: 44px; padding: 11px 16px; font-size: 14.5px;
          display: inline-flex; align-items: center; justify-content: center;
          text-align: center; flex: 1 1 auto;
        }
        .tool-actions { gap: 10px; }
        .tool-actions .btn { flex: 1 1 100%; width: 100%; }
        .tool-actions .btn-sm { flex: 1 1 auto; width: auto; }
        .summary-box { padding: 20px; border-radius: 24px; }
        .wa-card { flex-direction: column; align-items: stretch; gap: 12px; }
        .wa-card .btn { width: 100%; }
        .submit-card { margin-top: 16px; }
        /* Admin demo: stats wrap, filters and records stack, no overflow */
        .admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .admin-stat { text-align: center; padding: 10px 8px; border-radius: 18px; }
        .admin-filters { grid-template-columns: 1fr; gap: 10px; }
        .rec { padding: 16px; flex-direction: column; align-items: stretch; gap: 12px; border-radius: 20px; }
        .rec-actions {
          display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
        }
        .rec-actions select {
          grid-column: 1 / -1; width: 100%; min-height: 44px; font-size: 16px;
        }
        .rec-actions .btn { width: 100%; }
        .rec-tags { gap: 5px; }
        .detail-grid { grid-template-columns: 1fr; }
        /* Footer: single column, tappable admin link */
        footer.site { margin-top: 48px; padding: 0 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
        .footer-in { padding: 26px 20px 22px; border-radius: 24px; font-size: 13px; }
        .footer-admin {
          display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0;
        }
      }
      @media (max-width: 430px) {
        .hero h1 { font-size: 28px; }
        nav.main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        nav.main button { min-height: 46px; }
        .steps { grid-template-columns: 1fr; }
        .bento .photo-card { min-height: 210px; }
        .chips { gap: 6px; }
        .chip { font-size: 12.5px; padding: 6px 12px; }
        .line-card .btn { width: 100%; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        * { transition: none !important; }
      }

      /* ===== FORCED mobile layout (JS-detected phones) =====
         The head script adds .force-mobile to <html> when the device looks
         like a phone. These rules live OUTSIDE any media query and use the
         html.force-mobile prefix, so they outrank the desktop base rules
         (and tie-break the language variants, being last in the sheet) and
         apply even when the browser/webview reports a desktop-width
         viewport — the exact failure media queries alone could not fix.
         They mirror the phone design of the max-width queries above:
         same values, now driven by the class instead of the width.
         The content column is additionally capped at phone measure and
         centred, so a mis-reported wide viewport still reads as a phone
         page rather than a stretched desktop one. */
      html.force-mobile body { overflow-x: clip; }
      html.force-mobile .wrap { max-width: 640px; padding-left: 16px; padding-right: 16px; }
      html.force-mobile header.site { max-width: 664px; }
      html.force-mobile footer.site { max-width: 664px; margin-left: auto; margin-right: auto; }
      html.force-mobile .ribbon { font-size: 12px; padding: 8px 14px; }
      /* Header: stacked card, no sticky, rows hard-capped to the card */
      html.force-mobile header.site { position: relative; top: 0; margin-top: 10px; padding: 0 12px; }
      html.force-mobile .header-in {
        display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
        gap: 10px; padding: 14px; border-radius: 24px;
      }
      html.force-mobile .brand { margin-right: 0; gap: 10px; flex: none; }
      html.force-mobile .brand .mark { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
      html.force-mobile .brand .name, html.force-mobile body.lang-en .brand .name { font-size: 15px; white-space: normal; }
      html.force-mobile .brand .tag, html.force-mobile body.lang-en .brand .tag { font-size: 11px; white-space: normal; }
      html.force-mobile .lang-toggle {
        order: 2; width: 100%; max-width: 100%; min-width: 0;
        justify-content: flex-start; flex-wrap: wrap; gap: 6px;
      }
      html.force-mobile .lang-toggle button {
        min-height: 44px; padding: 10px 14px; font-size: 13px;
        display: inline-flex; align-items: center; justify-content: center;
      }
      html.force-mobile .theme-btn { margin-left: 0; min-height: 44px; }
      html.force-mobile .lang-toggle .ru-note {
        font-size: 11.5px; margin-left: 2px; white-space: normal; align-self: center;
      }
      /* Nav: two-column grid of large buttons */
      html.force-mobile nav.main {
        order: 3; width: 100%; min-width: 0;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex-wrap: nowrap;
      }
      html.force-mobile nav.main button:not([aria-current="page"]), html.force-mobile body.lang-en nav.main button:not([aria-current="page"]) {
        min-height: 46px; padding: 9px 4px; font-size: 13px; line-height: 1.3;
        white-space: normal; text-align: center;
        display: flex; align-items: center; justify-content: center;
        background: var(--surface-2);
      }
      /* Current page: the page marks it with aria-current="page" (set in the
         markup and moved by the view-switch script), the same marker the
         desktop rule uses. The generic rule above must not paint it, and
         this rule repeats the body.lang-en / lang-zh variants so it outranks
         the generic light background in BOTH languages — previously the
         lang-en generic selector won on specificity in the default English
         view, leaving white text on a near-white button. */
      html.force-mobile nav.main button[aria-current="page"],
      html.force-mobile body.lang-en nav.main button[aria-current="page"],
      html.force-mobile body.lang-zh nav.main button[aria-current="page"] { background: var(--teal); color: #fff; }
      /* Dark mode keeps the desktop dark fill for the current page. */
      html.force-mobile[data-theme="dark"] nav.main button[aria-current="page"],
      html.force-mobile[data-theme="dark"] body.lang-en nav.main button[aria-current="page"],
      html.force-mobile[data-theme="dark"] body.lang-zh nav.main button[aria-current="page"] { background: #2f6a5f; color: #fff; }
      /* Hero: phone type scale, left-aligned, full-width CTAs */
      html.force-mobile .hero { padding: 34px 0 10px; }
      html.force-mobile .hero-in { text-align: left; }
      html.force-mobile .eyebrow {
        max-width: 100%; white-space: normal; text-align: left;
        font-size: 11.5px; line-height: 1.5; padding: 7px 13px; border-radius: 18px;
      }
      html.force-mobile .hero h1 { font-size: 29px; line-height: 1.28; margin: 20px 0 14px; }
      html.force-mobile .hero .lede { font-size: 16px; line-height: 1.7; }
      html.force-mobile .hero .sub { text-align: center; }
      html.force-mobile .cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
      html.force-mobile .cta-row .btn { width: 100%; }
      html.force-mobile .btn { min-height: 48px; padding: 13px 20px; font-size: 15px; }
      html.force-mobile .btn-sm { min-height: 44px; padding: 9px 16px; }
      /* Mosaic: single column, uniform gaps and edges */
      html.force-mobile .bento { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
      html.force-mobile .bento .photo-card { min-height: 220px; border-radius: 24px; }
      html.force-mobile .bento .photo-card figcaption { left: 10px; right: 10px; bottom: 10px; font-size: 12px; padding: 9px 13px; }
      html.force-mobile .bento .side { gap: 14px; grid-template-rows: auto auto; height: auto; }
      html.force-mobile .feature-card { border-radius: 24px; padding: 22px 20px; }
      html.force-mobile .feature-card h3 { font-size: 19px; }
      html.force-mobile .feature-card p { font-size: 14px; }
      html.force-mobile .feature-card .deco { display: none; }
      html.force-mobile .mini-card { border-radius: 24px; padding: 18px 20px; }
      html.force-mobile .trust-points { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
      html.force-mobile .trust-points li { padding: 16px 18px; border-radius: 24px; }
      /* Sections & every card grid: single column */
      html.force-mobile .block { padding: 38px 0 4px; }
      html.force-mobile .band { margin-top: 38px; padding-bottom: 44px; }
      html.force-mobile .band-panel { padding: 26px 18px 22px; margin-top: 38px; border-radius: 24px; }
      html.force-mobile .sec-head { margin-bottom: 22px; }
      html.force-mobile .sec-head h2 { font-size: 26px; line-height: 1.35; }
      html.force-mobile .sec-head p { font-size: 15px; }
      html.force-mobile .card { padding: 20px 18px; border-radius: 24px; }
      html.force-mobile .card.intent { padding: 22px 20px; }
      html.force-mobile .card.intent .n { font-size: 36px; margin-bottom: 10px; }
      html.force-mobile .grid3, html.force-mobile .grid2,
      html.force-mobile .values, html.force-mobile .tool { grid-template-columns: 1fr; gap: 14px; }
      html.force-mobile .steps { grid-template-columns: 1fr; gap: 12px; }
      html.force-mobile .step { padding: 20px 18px; }
      html.force-mobile .value-card { padding: 20px 18px; gap: 14px; border-radius: 24px; }
      html.force-mobile .value-card .vnum { font-size: 24px; padding: 10px 12px; border-radius: 14px; }
      html.force-mobile .boundary { padding: 24px 20px; border-radius: 24px; }
      html.force-mobile .boundary ul { padding-left: 18px; font-size: 14.5px; }
      html.force-mobile .badge { white-space: normal; line-height: 1.45; max-width: 100%; }
      html.force-mobile .dir-item { grid-template-columns: 1fr; padding: 16px 18px; border-radius: 20px; gap: 4px; }
      html.force-mobile .dir-group { margin-bottom: 26px; }
      html.force-mobile .alert-box { padding: 22px 20px; border-radius: 24px; }
      html.force-mobile .alert-box .btn { width: 100%; }
      html.force-mobile .line-card .btn { width: 100%; max-width: 100%; }
      html.force-mobile .stories-empty { padding: 28px 20px; border-radius: 24px; }
      html.force-mobile .flow { gap: 6px; }
      html.force-mobile .flow .node { font-size: 13px; padding: 8px 13px; }
      html.force-mobile .chips { gap: 6px; }
      html.force-mobile .chip { font-size: 12.5px; padding: 6px 12px; }
      /* Visa table: stacked label/value rows */
      html.force-mobile .visa-table th, html.force-mobile .visa-table td { display: block; width: 100%; padding: 14px 18px; }
      html.force-mobile .visa-table th { padding-bottom: 4px; }
      html.force-mobile .visa-table td { padding-top: 4px; }
      /* FAQ: bigger tap row */
      html.force-mobile .faq-q { min-height: 56px; padding: 16px 18px; font-size: 15.5px; }
      html.force-mobile .faq-q .chev { width: 36px; height: 36px; }
      html.force-mobile .faq-a { padding: 0 18px 18px; }
      /* Forms: single column, 16px inputs (no iOS focus zoom), big options */
      html.force-mobile .form-grid, html.force-mobile .detail-grid { grid-template-columns: 1fr; }
      html.force-mobile input[type="text"], html.force-mobile select, html.force-mobile textarea {
        font-size: 16px; min-height: 48px; padding: 12px 14px; border-radius: 14px;
      }
      html.force-mobile textarea { min-height: 96px; }
      html.force-mobile .field { margin-bottom: 18px; }
      html.force-mobile .opts { gap: 8px; }
      html.force-mobile .opt {
        min-height: 44px; padding: 11px 16px; font-size: 14.5px;
        display: inline-flex; align-items: center; justify-content: center;
        text-align: center; flex: 1 1 auto;
      }
      html.force-mobile .tool-actions { gap: 10px; }
      html.force-mobile .tool-actions .btn { flex: 1 1 100%; width: 100%; }
      html.force-mobile .tool-actions .btn-sm { flex: 1 1 auto; width: auto; }
      html.force-mobile .summary-box { padding: 20px; border-radius: 24px; }
      html.force-mobile .wa-card { flex-direction: column; align-items: stretch; gap: 12px; }
      html.force-mobile .wa-card .btn { width: 100%; }
      html.force-mobile .submit-card { margin-top: 16px; }
      /* Admin demo: stats wrap, filters and records stack */
      html.force-mobile .admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      html.force-mobile .admin-stat { text-align: center; padding: 10px 8px; border-radius: 18px; }
      html.force-mobile .admin-filters { grid-template-columns: 1fr; gap: 10px; }
      html.force-mobile .rec { padding: 16px; flex-direction: column; align-items: stretch; gap: 12px; border-radius: 20px; }
      html.force-mobile .rec-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
      html.force-mobile .rec-actions select { grid-column: 1 / -1; width: 100%; min-height: 44px; font-size: 16px; }
      html.force-mobile .rec-actions .btn { width: 100%; }
      html.force-mobile .rec-tags { gap: 5px; }
      /* Footer: single column, tappable admin link, safe-area padding */
      html.force-mobile footer.site { margin-top: 48px; padding: 0 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
      html.force-mobile .footer-in { padding: 26px 20px 22px; border-radius: 24px; font-size: 13px; }
      html.force-mobile .footer-admin { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }

      /* ===== Mobile redesign v8 — reference-style phone rhythm =====
         Modelled on the competitor's mobile pages the user approved:
         a one-row header (brand · solid consult button · hamburger, nav
         tucked into the opened panel), 17px / 1.7 body text, large
         left-aligned headings, 23px page margins, generous section
         spacing, quiet bordered cards and full-width solid card buttons.
         These blocks sit AFTER every earlier phone rule, so they win on
         phones; the first block serves the <=820px media query, the
         second mirrors it for the JS .force-mobile class. Desktop rules
         above are untouched, and the teal palette is unchanged. */
      @media (max-width: 820px) {
        body { font-size: 17px; line-height: 1.7; }
        .wrap { padding-left: 23px; padding-right: 23px; }
        .ribbon { font-size: 12.5px; line-height: 1.65; padding: 10px 20px; }
        /* Header: one slim sticky row — brand | consult | burger */
        header.site { position: sticky; top: 0; z-index: 60; margin-top: 0; max-width: 100%; padding: 8px max(10px, env(safe-area-inset-right, 0px)) 4px max(10px, env(safe-area-inset-left, 0px)); }
        .header-in {
          position: relative; max-width: 100%; min-width: 0;
          flex-direction: row; flex-wrap: nowrap; align-items: center;
          gap: 6px; padding: 8px 8px 8px 10px; border-radius: 16px;
          border: 1px solid var(--line); box-shadow: var(--shadow-sm);
        }
        .brand { order: 1; flex: 0 1 auto; min-width: 0; gap: 7px; margin-right: 0; }
        .brand > span { flex: 0 1 auto; min-width: 0; overflow: hidden; }
        .brand .mark { flex: none; width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }
        .brand .name, body.lang-en .brand .name { font-size: 13.5px; line-height: 1.18; white-space: normal; overflow: visible; text-overflow: clip; }
        .brand .tag, body.lang-en .brand .tag { display: none; }
        .hdr-cta {
          order: 2; margin-left: auto;
          display: inline-flex; align-items: center; justify-content: center; flex: none;
          min-height: 44px; padding: 10px 10px; border: 0; border-radius: 12px; cursor: pointer;
          -webkit-appearance: none; appearance: none; touch-action: manipulation;
          background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap;
        }
        :root[data-theme="dark"] .hdr-cta { background: #2e7d6a; }
        .hdr-burger {
          order: 3;
          display: inline-flex; align-items: center; justify-content: center; flex: none;
          width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
          -webkit-appearance: none; appearance: none; touch-action: manipulation;
          background: transparent; color: var(--ink);
        }
        /* Hamburger panel: language/theme row on top, then big nav rows */
        .mobile-menu { order: 4; display: none; }
        .mobile-menu.open {
          display: flex; flex-direction: column; gap: 14px;
          position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
          width: auto; min-width: 0;
          background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
          box-shadow: var(--shadow); padding: 14px 12px 10px; margin-top: 0;
        }
        .mobile-menu .lang-toggle { order: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
        .mobile-menu .lang-toggle button { min-height: 40px; padding: 8px 13px; font-size: 13px; }
        .mobile-menu .theme-btn { min-height: 40px; margin-left: 0; }
        .mobile-menu nav.main { order: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; }
        .mobile-menu nav.main button,
        body.lang-en .mobile-menu nav.main button,
        body.lang-zh .mobile-menu nav.main button {
          min-height: 52px; width: 100%; padding: 12px 16px;
          display: flex; align-items: center; justify-content: flex-start; text-align: left;
          font-size: 16px; font-weight: 600; line-height: 1.35; white-space: normal;
          background: transparent; color: var(--ink); border-radius: 12px;
        }
        .mobile-menu nav.main button[aria-current="page"] { background: var(--teal); color: #fff; }
        :root[data-theme="dark"] .mobile-menu nav.main button[aria-current="page"] { background: #2f6a5f; color: #fff; }
        /* Hero: small-caps eyebrow, big left title, stacked full-width CTAs */
        .hero { padding: 42px 0 6px; }
        .hero .waves { display: none; }
        .eyebrow {
          display: block; background: none; box-shadow: none; border-radius: 0; padding: 0;
          font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
          color: var(--teal); line-height: 1.6; text-align: left;
        }
        .hero h1 { font-size: clamp(34px, 10.2vw, 40px); line-height: 1.24; margin: 16px 0 18px; }
        .hero .lede { font-size: 17px; line-height: 1.75; }
        .hero .sub { text-align: left; font-size: 13.5px; margin-top: 16px; }
        .cta-row { gap: 12px; margin-top: 26px; }
        .btn { min-height: 54px; font-size: 16px; border-radius: 14px; padding: 14px 22px; }
        .btn-sm { min-height: 46px; font-size: 14px; }
        /* Rhythm: wider gaps, quiet bordered cards, moderate radii */
        .block { padding: 54px 0 6px; }
        .band { margin-top: 54px; padding-bottom: 52px; }
        .band-panel { margin-top: 54px; padding: 30px 20px 26px; border-radius: 18px; }
        .sec-head { margin-bottom: 26px; }
        .sec-head.center { text-align: left; margin-left: 0; margin-right: 0; }
        .sec-head h2 { font-size: clamp(26px, 7.6vw, 30px); line-height: 1.35; margin-bottom: 12px; }
        .sec-head p { font-size: 16.5px; line-height: 1.7; }
        .card { border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(43, 90, 82, .05); border-radius: 18px; padding: 26px 22px; }
        .grid3, .grid2, .values, .tool { gap: 16px; }
        .bento { gap: 16px; margin-top: 34px; }
        .bento .photo-card { border-radius: 18px; min-height: 240px; }
        .feature-card { border-radius: 18px; padding: 24px 22px; }
        .feature-card h3 { font-size: 20px; }
        .feature-card p { font-size: 15.5px; line-height: 1.7; }
        .mini-card { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; padding: 20px 22px; }
        .mini-card b { font-size: 18px; }
        .mini-card span { font-size: 15px; line-height: 1.65; }
        .trust-points { gap: 12px; margin-top: 16px; }
        .trust-points li { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; padding: 18px; font-size: 15.5px; line-height: 1.7; }
        /* Intent cards: one full-width solid button per card */
        .card.intent { padding: 26px 22px; }
        .card.intent .n { font-size: 40px; margin-bottom: 12px; }
        .card.intent h3 { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
        .card.intent p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
        .card.intent .go {
          display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center;
          background: var(--teal); color: #fff; font-size: 15.5px; font-weight: 700;
          border-radius: 12px; padding: 12px 16px;
        }
        :root[data-theme="dark"] .card.intent .go { background: #2e7d6a; }
        /* Value cards: number on its own line, then title, then text */
        .value-card { flex-direction: column; gap: 8px; padding: 24px 22px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(43, 90, 82, .05); border-radius: 18px; }
        .value-card .vnum { background: none; padding: 0; font-size: 28px; }
        .value-card b { font-size: 18px; margin-bottom: 6px; }
        .value-card span { font-size: 16px; line-height: 1.7; }
        .step { padding: 24px 22px; }
        .step h3 { font-size: 17.5px; }
        .step p { font-size: 15.5px; line-height: 1.7; }
        .line-card h3 { font-size: 20px; }
        .line-card p { font-size: 16px; line-height: 1.7; }
        .dir-group { margin-bottom: 30px; }
        .dir-group > h3 { font-size: 20px; margin-bottom: 14px; }
        .dir-item { border: 1px solid var(--line); box-shadow: none; border-radius: 16px; padding: 20px; gap: 6px; }
        .dir-item b { font-size: 16.5px; }
        .dir-item span { font-size: 15.5px; line-height: 1.7; }
        .alert-box { border-radius: 18px; padding: 24px 22px; }
        .alert-box h3 { font-size: 19px; }
        .alert-box p { font-size: 16px; line-height: 1.7; }
        .boundary { border-radius: 18px; padding: 28px 22px; }
        .boundary h3 { font-size: 21px; }
        .boundary ul { font-size: 16px; line-height: 1.75; gap: 12px; }
        .stories-empty { border-radius: 18px; padding: 30px 22px; }
        .stories-empty p { font-size: 16px; line-height: 1.7; }
        .faq-item { border: 1px solid var(--line); box-shadow: none; border-radius: 16px; }
        .faq-q { font-size: 16.5px; padding: 18px 20px; min-height: 60px; }
        .faq-a { padding: 0 20px 20px; }
        .faq-a p { font-size: 16px; line-height: 1.7; }
        .visa-table th, .visa-table td { padding: 16px 20px; font-size: 16px; line-height: 1.7; }
        .note { font-size: 14.5px; line-height: 1.7; }
        .field label, .flabel { font-size: 15px; }
        input[type="text"], select, textarea { min-height: 52px; border-radius: 12px; }
        .opt { min-height: 48px; font-size: 15px; }
        .summary-box { border-radius: 18px; padding: 22px; font-size: 15.5px; line-height: 1.7; }
        footer.site { padding: 0 10px calc(18px + env(safe-area-inset-bottom, 0px)); }
        .footer-in { border-radius: 18px; padding: 28px 22px 24px; font-size: 14px; line-height: 1.75; }
      }
      /* ===== Mobile redesign v8 — .force-mobile mirror ===== */
      html.force-mobile body { font-size: 17px; line-height: 1.7; }
      html.force-mobile .wrap { max-width: 640px; padding-left: 23px; padding-right: 23px; }
      html.force-mobile .ribbon { font-size: 12.5px; line-height: 1.65; padding: 10px 20px; }
      html.force-mobile header.site {
        position: sticky; top: 0; z-index: 60; margin-top: 0;
        max-width: 660px; margin-left: auto; margin-right: auto; padding: 8px max(10px, env(safe-area-inset-right, 0px)) 4px max(10px, env(safe-area-inset-left, 0px));
      }
      html.force-mobile .header-in {
        position: relative; max-width: 100%; min-width: 0;
        flex-direction: row; flex-wrap: nowrap; align-items: center;
        gap: 6px; padding: 8px 8px 8px 10px; border-radius: 16px;
        border: 1px solid var(--line); box-shadow: var(--shadow-sm);
      }
      html.force-mobile .brand { order: 1; flex: 0 1 auto; min-width: 0; gap: 7px; margin-right: 0; }
      html.force-mobile .brand > span { flex: 0 1 auto; min-width: 0; overflow: hidden; }
      html.force-mobile .brand .mark { flex: none; width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }
      html.force-mobile .brand .name, html.force-mobile body.lang-en .brand .name { font-size: 13.5px; line-height: 1.18; white-space: normal; overflow: visible; text-overflow: clip; }
      html.force-mobile .brand .tag, html.force-mobile body.lang-en .brand .tag { display: none; }
      html.force-mobile .hdr-cta {
        order: 2; margin-left: auto;
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        min-height: 44px; padding: 10px 10px; border: 0; border-radius: 12px; cursor: pointer;
        -webkit-appearance: none; appearance: none; touch-action: manipulation;
        background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap;
      }
      html.force-mobile[data-theme="dark"] .hdr-cta { background: #2e7d6a; }
      html.force-mobile .hdr-burger {
        order: 3;
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
        -webkit-appearance: none; appearance: none; touch-action: manipulation;
        background: transparent; color: var(--ink);
      }
      html.force-mobile .mobile-menu { order: 4; display: none; }
      html.force-mobile .mobile-menu.open {
        display: flex; flex-direction: column; gap: 14px;
        position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
        width: auto; min-width: 0;
        background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
        box-shadow: var(--shadow); padding: 14px 12px 10px; margin-top: 0;
      }
      html.force-mobile .mobile-menu .lang-toggle { order: 0; width: 100%; max-width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
      html.force-mobile .mobile-menu .lang-toggle button { min-height: 40px; padding: 8px 13px; font-size: 13px; }
      html.force-mobile .mobile-menu .theme-btn { min-height: 40px; margin-left: 0; }
      html.force-mobile .mobile-menu nav.main { order: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
      html.force-mobile .mobile-menu nav.main button,
      html.force-mobile body.lang-en .mobile-menu nav.main button,
      html.force-mobile body.lang-zh .mobile-menu nav.main button {
        min-height: 52px; width: 100%; padding: 12px 16px;
        display: flex; align-items: center; justify-content: flex-start; text-align: left;
        font-size: 16px; font-weight: 600; line-height: 1.35; white-space: normal;
        background: transparent; color: var(--ink); border-radius: 12px;
      }
      html.force-mobile .mobile-menu nav.main button[aria-current="page"],
      html.force-mobile body.lang-en .mobile-menu nav.main button[aria-current="page"],
      html.force-mobile body.lang-zh .mobile-menu nav.main button[aria-current="page"] { background: var(--teal); color: #fff; }
      html.force-mobile[data-theme="dark"] .mobile-menu nav.main button[aria-current="page"],
      html.force-mobile[data-theme="dark"] body.lang-en .mobile-menu nav.main button[aria-current="page"],
      html.force-mobile[data-theme="dark"] body.lang-zh .mobile-menu nav.main button[aria-current="page"] { background: #2f6a5f; color: #fff; }
      html.force-mobile .hero { padding: 42px 0 6px; }
      html.force-mobile .hero .waves { display: none; }
      html.force-mobile .eyebrow {
        display: block; background: none; box-shadow: none; border-radius: 0; padding: 0;
        font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
        color: var(--teal); line-height: 1.6; text-align: left;
      }
      html.force-mobile .hero h1 { font-size: clamp(34px, 10.2vw, 40px); line-height: 1.24; margin: 16px 0 18px; }
      html.force-mobile .hero .lede { font-size: 17px; line-height: 1.75; }
      html.force-mobile .hero .sub { text-align: left; font-size: 13.5px; margin-top: 16px; }
      html.force-mobile .cta-row { gap: 12px; margin-top: 26px; }
      html.force-mobile .btn { min-height: 54px; font-size: 16px; border-radius: 14px; padding: 14px 22px; }
      html.force-mobile .btn-sm { min-height: 46px; font-size: 14px; }
      html.force-mobile .block { padding: 54px 0 6px; }
      html.force-mobile .band { margin-top: 54px; padding-bottom: 52px; }
      html.force-mobile .band-panel { margin-top: 54px; padding: 30px 20px 26px; border-radius: 18px; }
      html.force-mobile .sec-head { margin-bottom: 26px; }
      html.force-mobile .sec-head.center { text-align: left; margin-left: 0; margin-right: 0; }
      html.force-mobile .sec-head h2 { font-size: clamp(26px, 7.6vw, 30px); line-height: 1.35; margin-bottom: 12px; }
      html.force-mobile .sec-head p { font-size: 16.5px; line-height: 1.7; }
      html.force-mobile .card { border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(43, 90, 82, .05); border-radius: 18px; padding: 26px 22px; }
      html.force-mobile .grid3, html.force-mobile .grid2,
      html.force-mobile .values, html.force-mobile .tool { gap: 16px; }
      html.force-mobile .bento { gap: 16px; margin-top: 34px; }
      html.force-mobile .bento .photo-card { border-radius: 18px; min-height: 240px; }
      html.force-mobile .feature-card { border-radius: 18px; padding: 24px 22px; }
      html.force-mobile .feature-card h3 { font-size: 20px; }
      html.force-mobile .feature-card p { font-size: 15.5px; line-height: 1.7; }
      html.force-mobile .mini-card { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; padding: 20px 22px; }
      html.force-mobile .mini-card b { font-size: 18px; }
      html.force-mobile .mini-card span { font-size: 15px; line-height: 1.65; }
      html.force-mobile .trust-points { gap: 12px; margin-top: 16px; }
      html.force-mobile .trust-points li { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; padding: 18px; font-size: 15.5px; line-height: 1.7; }
      html.force-mobile .card.intent { padding: 26px 22px; }
      html.force-mobile .card.intent .n { font-size: 40px; margin-bottom: 12px; }
      html.force-mobile .card.intent h3 { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
      html.force-mobile .card.intent p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
      html.force-mobile .card.intent .go {
        display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center;
        background: var(--teal); color: #fff; font-size: 15.5px; font-weight: 700;
        border-radius: 12px; padding: 12px 16px;
      }
      html.force-mobile[data-theme="dark"] .card.intent .go { background: #2e7d6a; }
      html.force-mobile .value-card { flex-direction: column; gap: 8px; padding: 24px 22px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(43, 90, 82, .05); border-radius: 18px; }
      html.force-mobile .value-card .vnum { background: none; padding: 0; font-size: 28px; }
      html.force-mobile .value-card b { font-size: 18px; margin-bottom: 6px; }
      html.force-mobile .value-card span { font-size: 16px; line-height: 1.7; }
      html.force-mobile .step { padding: 24px 22px; }
      html.force-mobile .step h3 { font-size: 17.5px; }
      html.force-mobile .step p { font-size: 15.5px; line-height: 1.7; }
      html.force-mobile .line-card h3 { font-size: 20px; }
      html.force-mobile .line-card p { font-size: 16px; line-height: 1.7; }
      html.force-mobile .dir-group { margin-bottom: 30px; }
      html.force-mobile .dir-group > h3 { font-size: 20px; margin-bottom: 14px; }
      html.force-mobile .dir-item { border: 1px solid var(--line); box-shadow: none; border-radius: 16px; padding: 20px; gap: 6px; }
      html.force-mobile .dir-item b { font-size: 16.5px; }
      html.force-mobile .dir-item span { font-size: 15.5px; line-height: 1.7; }
      html.force-mobile .alert-box { border-radius: 18px; padding: 24px 22px; }
      html.force-mobile .alert-box h3 { font-size: 19px; }
      html.force-mobile .alert-box p { font-size: 16px; line-height: 1.7; }
      html.force-mobile .boundary { border-radius: 18px; padding: 28px 22px; }
      html.force-mobile .boundary h3 { font-size: 21px; }
      html.force-mobile .boundary ul { font-size: 16px; line-height: 1.75; gap: 12px; }
      html.force-mobile .stories-empty { border-radius: 18px; padding: 30px 22px; }
      html.force-mobile .stories-empty p { font-size: 16px; line-height: 1.7; }
      html.force-mobile .faq-item { border: 1px solid var(--line); box-shadow: none; border-radius: 16px; }
      html.force-mobile .faq-q { font-size: 16.5px; padding: 18px 20px; min-height: 60px; }
      html.force-mobile .faq-a { padding: 0 20px 20px; }
      html.force-mobile .faq-a p { font-size: 16px; line-height: 1.7; }
      html.force-mobile .visa-table th, html.force-mobile .visa-table td { padding: 16px 20px; font-size: 16px; line-height: 1.7; }
      html.force-mobile .note { font-size: 14.5px; line-height: 1.7; }
      html.force-mobile .field label, html.force-mobile .flabel { font-size: 15px; }
      html.force-mobile input[type="text"], html.force-mobile select, html.force-mobile textarea { min-height: 52px; border-radius: 12px; }
      html.force-mobile .opt { min-height: 48px; font-size: 15px; }
      html.force-mobile .summary-box { border-radius: 18px; padding: 22px; font-size: 15.5px; line-height: 1.7; }
      html.force-mobile footer.site { max-width: 660px; padding: 0 10px calc(18px + env(safe-area-inset-bottom, 0px)); }
      html.force-mobile .footer-in { border-radius: 18px; padding: 28px 22px 24px; font-size: 14px; line-height: 1.75; }

      /* ===== Language dropdown (collapsed selector) =====
         The language choices are tucked into one compact button that
         shows only the current language; the options appear in a small
         floating panel on tap/click. Placed last so it wins over the
         generic .lang-toggle button rules in every layout (desktop,
         <=820px media, .force-mobile and the hamburger panel). */
      .lang-select { position: relative; flex: none; }
      .lang-toggle .lang-trigger {
        display: inline-flex; align-items: center; gap: 7px;
        min-height: 38px; padding: 8px 13px; border-radius: 999px;
        background: var(--surface-2); color: var(--ink); cursor: pointer;
        font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
      }
      .lang-trigger svg { flex: none; }
      .lang-trigger .lang-chev { transition: transform .18s ease; }
      .lang-select.open .lang-trigger { background: var(--teal); color: #fff; }
      :root[data-theme="dark"] .lang-select.open .lang-trigger { background: #2e7d6a; color: #fff; }
      .lang-select.open .lang-trigger .lang-chev { transform: rotate(180deg); }
      .lang-menu {
        position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
        min-width: 196px; padding: 6px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
        box-shadow: var(--shadow);
      }
      .lang-menu[hidden] { display: none !important; }
      .lang-toggle .lang-menu .lang-opt {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 11px;
        background: transparent; color: var(--ink); cursor: pointer;
        font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: left; white-space: nowrap;
      }
      .lang-toggle .lang-menu .lang-opt:hover { background: var(--surface-2); }
      .lang-toggle .lang-menu .lang-opt[aria-pressed="true"] { background: var(--teal); color: #fff; }
      :root[data-theme="dark"] .lang-toggle .lang-menu .lang-opt[aria-pressed="true"] { background: #2f6a5f; color: #fff; }
      .lang-opt .lang-check { flex: none; font-weight: 800; opacity: 0; }
      .lang-opt[aria-pressed="true"] .lang-check { opacity: 1; }
      .lang-toggle .lang-menu .lang-opt-disabled {
        cursor: default; color: var(--ink-3); font-weight: 600;
      }
      .lang-toggle .lang-menu .lang-opt-disabled:hover { background: transparent; }
      .lang-opt-disabled .lang-soon { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); }
      /* Phone layouts: the selector sits at the top of the hamburger
         panel; keep the trigger a full tap target and anchor the panel
         to the left edge so it never spills past the card. */
      @media (max-width: 820px) {
        .lang-toggle .lang-trigger { min-height: 44px; padding: 10px 15px; font-size: 13.5px; }
        .lang-menu { left: 0; right: auto; }
      }
      html.force-mobile .lang-toggle .lang-trigger { min-height: 44px; padding: 10px 15px; font-size: 13.5px; }
      html.force-mobile .lang-menu { left: 0; right: auto; }
    
/* No manual night-mode toggle anywhere (owner call, 2026-11-02,
   first for the crowded Russian header, then all languages).
   The theme simply follows the system; header.php also clears any
   previously stored manual choice so nobody stays stuck in dark. */
.theme-btn { display: none !important; }