/* Nova skin — phone layout (≤767px). Loaded last on every nova page (site-head / landing-head).
   Everything visual lives inside the phone media query below, so desktop and tablet render exactly
   as before. The only rules outside it hide the phone-only markup (tab bar, drawer account block,
   terminal phone tabs) at every other width.

   Scale: type 12/14/16/20/28 (nova-tokens.css), weights 400/500/600, 16px page gutter,
   44px minimum touch target, 56px header, 56px tab bar + safe-area inset. */

.m-tabbar, .lk-sidebar__me, .lk-sidebar__group--me, .lk-sidebar__logout, .m-filter-toggle,
.sk-m-sheethead, .sk-m-scrim, .sk-m-bar, .m-dots, .m-grab, .lk-header__me { display: none; }

@media (max-width: 767px) {
  :root {
    --m-gut: 16px;
    --m-sheet-r: 16px;
    --m-head: 56px;
    --m-tab: calc(56px + env(safe-area-inset-bottom));
  }
  /* Public pages (home, markets, help, legal) have no bottom tab bar — it's account-only — so
     everything sized around it (page padding, hero height, support button) drops that space. */
  body.nova-pub { --m-tab: env(safe-area-inset-bottom); }
  /* ...except for a signed-in visitor, who gets the tab bar there too (landing-foot.ejs). */
  body.nova-pub.nova-pub--tab { --m-tab: calc(56px + env(safe-area-inset-bottom)); }
  html, body.nova { overflow-x: clip; }
  /* Vertical overscroll is the browser's own (rubber band + native pull to refresh); only sideways
     overscroll stays off. */
  html, body.nova { overscroll-behavior-x: none; }
  /* Keyboard focus / anchor jumps never land under the fixed bottom bars. */
  html { scroll-padding-bottom: calc(var(--m-tab) + 16px); scroll-padding-top: calc(var(--m-head) + 8px); }
  body.nova :is(a, button, [role="button"], input, select, label) { touch-action: manipulation; }
  body.nova { padding-bottom: var(--m-tab); }
  body.nova.kx-page { padding-bottom: 0; }

  /* iOS zooms into any field under 16px — keep every text field at 16. */
  body.nova input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  body.nova select, body.nova textarea { font-size: 16px; }

  /* ---------- Header ---------- */
  .lk-header { height: var(--m-head); padding: 0 8px 0 4px; gap: 4px; overflow: visible; }
  /* The same see-through Safari bar sits above the sticky header: the page scrolled by visibly in that gap.
     A page-coloured fill runs up from the header's top edge and covers it. */
  .lk-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--ink); pointer-events: none; }
  /* Burger sits at the far right, after the bell (the left group is flattened into the header row). */
  .lk-header { padding: 0 4px 0 16px; }
  /* No burger (guests): Sign up is the last item — full 16px from the edge. */
  .lk-header:not(:has(.lk-header__burger)) { padding-right: var(--m-gut); }
  .lk-header__left { display: contents; }
  .lk-header__burger { order: 10; display: flex; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius); }
  .lk-header__brand { gap: 10px; font-size: 20px; min-width: 0; }
  .lk-header__logo-img, .lk-header__logo-mark { width: 36px; height: 36px; font-size: 18px; }
  .lk-header__burger svg { width: 28px; height: 28px; }
  .lk-header__me {
    order: 9; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--bone); cursor: pointer;
  }
  .lk-header__brand-name { font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lk-header__right { gap: 4px; align-self: center; }
  .lk-header__right > .lk-nav__wallet,
  .lk-header__right > .lk-nav__a,
  .lk-header__right > .lk-nav__profile,
  .lk-header__right > .nb__btn.lk-header__menu-btn,
  .lk-header__right > .nb { display: none; }
  .lk-header__right .nb__btn { width: 44px; height: 44px; }
  .lk-header__login, .lk-header__signup { height: 36px; padding: 0 12px; font-size: 14px; }
  .lk-header__signup { background: var(--btn); color: var(--btn-ink); border-radius: var(--radius); }

  /* Notifications: a full-width panel under the header instead of a 360px dropdown. */
  .nb { position: static; }
  [data-lk-bell] .nb__panel, .nb__panel {
    position: fixed; top: var(--m-head); left: 0; right: 0; width: auto; margin: 0;
    max-height: calc(100dvh - var(--m-head) - var(--m-tab)); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-left: 0; border-right: 0; box-shadow: none; z-index: 95;
  }
  .nb__list { overflow-y: auto; overscroll-behavior: contain; }
  .nb__item { padding: 14px var(--m-gut); }

  /* ---------- Drawer (burger menu) ---------- */
  /* Drops down from the top edge when the burger is tapped. */
  .lk-sidebar { left: 0; right: 0; transform: translateY(-100%); }
  .lk-sidebar.lk-sidebar--mobile-open { transform: none; }
  /* Safari on newer iPhones draws the page under its see-through status / address bar too, so a drawer parked
     just above the screen showed there. Closed, it is now also invisible (after the slide-out finishes). */
  .lk-sidebar:not(.lk-sidebar--mobile-open) { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .lk-sidebar.lk-sidebar--mobile-open { visibility: visible; transition: transform .25s ease; }
  .lk-sidebar {
    width: 100%; max-width: none; height: auto; max-height: calc(100dvh - var(--m-tab)); border-right: 0; background: var(--ink);
    border-radius: 0 0 var(--m-sheet-r) var(--m-sheet-r);
    box-shadow: none; padding-top: env(safe-area-inset-top); overflow-x: hidden; overscroll-behavior: contain;
  }
  .lk-sidebar__close {
    top: calc(24px + env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px;
    background: transparent; border-radius: var(--radius);
  }
  /* Both menus (burger + account) are only as tall as their items, never taller than the screen. */
  .lk-sidebar__scroll { padding: 8px var(--m-gut) 16px; display: flex; flex-direction: column; }
  .lk-sidebar__group { margin: 0 0 16px; padding-top: 16px; border-top: 0; }
  .lk-sidebar__title { padding: 0 0 8px; }
  .lk-sidebar__link {
    min-height: 48px; padding: 0 12px; margin: 0 -12px; gap: 14px;
    font-size: 16px; font-weight: 500; color: var(--bone); border-radius: var(--radius);
  }
  .lk-sidebar__link:active { background: var(--panel); }
  /* Right-edge chevron on every menu row (Lucide chevron-right as a mask, tinted like the icons). */
  .lk-sidebar__link::after {
    content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .lk-sidebar__link--active { background: var(--panel); color: var(--bone); }
  .lk-sidebar__ico { opacity: 1; color: var(--stone); }
  .lk-sidebar__link--active .lk-sidebar__ico { color: var(--bone); }
  .lk-sidebar__link--mobile-only { display: flex; }

  .lk-sidebar__me { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 16px; padding: 0 56px 16px 0; }
  .lk-sidebar__me-ava { display: none; }
  .lk-sidebar__me-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lk-sidebar__me-mail { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lk-sidebar__me-uid {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 28px; padding: 0;
    background: none; border: 0; color: var(--stone); font-size: 12px; cursor: pointer;
  }
  .lk-sidebar__me-uid.is-ok { color: var(--ok); }
  .lk-sidebar__me--guest { gap: 8px; padding-right: 56px; }
  .lk-sidebar__me-btn {
    flex: 1; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--bone);
  }
  .lk-sidebar__me-btn.is-primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
  .lk-sidebar__group--me { display: block; }
  /* Two drawer modes (nova-mobile.js): the burger shows the main menu without the account links,
     the person button in the header shows only the account block. */
  /* Burger menu has no e-mail row on top, so its first section starts below the close button. */
  .lk-sidebar:not(.m-drawer-me) .lk-sidebar__scroll { padding-top: 48px; }
  .lk-sidebar:not(.m-drawer-me) .lk-sidebar__group--me, .lk-sidebar:not(.m-drawer-me) .lk-sidebar__me:not(.lk-sidebar__me--guest) { display: none; }
  .lk-sidebar.m-drawer-me .lk-sidebar__desk-nav, .lk-sidebar.m-drawer-me .lk-sidebar__logout { display: none; }
  .lk-sidebar.m-drawer-me .lk-sidebar__group--me { margin-bottom: 0; }
  .lk-sidebar__desk-nav { display: block; }
  .lk-sidebar__logout { display: block; margin-top: auto; padding-top: 16px; border-top: 0; }
  .lk-sidebar__logout .lk-sidebar__link { width: calc(100% + 24px); background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
  body.bw-sidebar-open { overflow: hidden; }

  /* ---------- Bottom tab bar ---------- */
  .m-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--m-tab); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(27, 26, 28, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateZ(0); /* own compositing layer: no jitter while the page scrolls */
  }
  /* While the browser's address bar slides in/out during a scroll, the phone re-pins fixed
     bottom elements a beat late and a sliver of page shows under the bar. The bar's colour runs
     on below its edge, so that sliver shows the bar, not the page. */
  .m-tabbar::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 120px;
    background: rgb(27, 26, 28); pointer-events: none;
  }
  .m-tabbar__a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--stone); font-size: 12px; font-weight: 500; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .m-tabbar__ico { display: flex; }
  .m-tabbar__a.is-on { color: var(--bone); }
  .m-tabbar__a:active { color: var(--bone); }
  /* Stays visible and tappable while a menu is open (above the menu and its dim layer). */
  body.bw-sidebar-open .m-tabbar { z-index: 95; }

  /* ---------- Things that sit above the tab bar ---------- */
  body.nova .nsw { right: var(--m-gut); bottom: calc(var(--m-tab) + 16px); }
  /* Launcher is draggable on phones (nova-support.js) — the finger drags it instead of scrolling the page. */
  body.nova .nsw-fab { touch-action: none; }
  /* One-time "you can move me" hint (nova-support.js): a short nudge of the launcher and a bubble beside it. */
  .nsw.is-hinting .nsw-fab { animation: nsw-nudge .9s ease-in-out 2; }
  @keyframes nsw-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-6deg); }
    45% { transform: translateX(6px) rotate(5deg); }
    70% { transform: translateX(-3px) rotate(-2deg); }
  }
  .nsw-hint {
    position: absolute; top: 50%; right: calc(100% + 10px); translate: 0 -50%; white-space: nowrap; pointer-events: none;
    padding: 8px 12px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: 14px; line-height: 20px; font-weight: 500;
    animation: nsw-hint-in .25s ease-out both;
  }
  .nsw-hint.is-right { right: auto; left: calc(100% + 10px); }
  .nsw-hint.is-out { animation: nsw-hint-out .2s ease-in both; }
  @keyframes nsw-hint-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  @keyframes nsw-hint-out { to { opacity: 0; scale: .95; } }
  @media (prefers-reduced-motion: reduce) { .nsw.is-hinting .nsw-fab, .nsw-hint { animation: none; } }
  body.nova.kx-page .nsw { bottom: calc(var(--m-tab) + 80px); }
  .ntoast-stack { top: calc(var(--m-head) + 8px); left: var(--m-gut); right: var(--m-gut); }

  /* The shared cookie banner has no nova styles at all — give it a phone card above the tab bar. */
  .cookie-banner:not([hidden]) {
    position: fixed; left: 8px; right: 8px; bottom: calc(var(--m-tab) + 8px); z-index: 75;
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5); color: var(--stone); font-size: 14px; line-height: 1.45;
  }
  body.kx-page .cookie-banner:not([hidden]) { bottom: calc(var(--m-tab) + 72px); }
  .cookie-banner__row { display: flex; gap: 10px; }
  .cookie-banner__text { margin: 0; }
  .cookie-banner__text a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
  .cookie-banner__btn {
    height: 44px; border: 0; border-radius: var(--radius); background: var(--btn); color: var(--btn-ink);
    font: 600 14px/1 var(--font); cursor: pointer;
  }

  /* ---------- Page frame ---------- */
  .lk-app__body { padding: 16px var(--m-gut) 32px; }
}

/* =====================================================================================
   Landing, markets, docs, help (landing-head pages)
   ===================================================================================== */
@media (max-width: 767px) {
  /* Hero: art first, then headline and sign-up, promo cards as a swipe strip. */
  .nova-hero { min-height: 0; flex-direction: column; flex-wrap: nowrap; gap: 16px; padding: 32px var(--m-gut) 8px; text-align: center; }
  .nova-hero__inner { order: 1; width: 100%; max-width: none; min-height: 0; flex: none; }
  .nova-hero::before { content: none; }
  .nova-hero h1 { font-size: clamp(28px, 7.4vw, 34px); line-height: 1.12; margin: 0 0 12px; }
  .nova-hero__accent { margin-bottom: 4px; }
  .nova-hero__sub { font-size: 18px; line-height: 1.45; margin: 0 0 20px; }
  .nova-join { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: none; height: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .nova-join__input { flex: none; height: 48px; padding: 0 16px; background: transparent; border: 1px solid var(--field-line); border-radius: var(--radius); }
  .nova-join__go { height: 48px; width: 100%; padding: 0 16px; border-radius: var(--radius); font-size: 16px; }
  /* The art takes whatever height the first screen has left (never smaller than before, at most
     440px); signed-in visitors have no e-mail form, so their art gets the extra room. */
  .nova-hero__art { order: 0; width: auto; max-width: 92vw; height: clamp(252px, calc(100svh - 660px), 440px); flex: none; }
  .nova-hero:not(:has(.nova-join)) .nova-hero__art { height: clamp(252px, calc(100svh - 600px), 400px); }
  /* The hero fills the first screen so nothing below peeks in. Its content (dots right under the
     cards) sits at the bottom of that screen, spare height goes above the art, so the gap from
     the dots to the 3-steps band is the same 48px as from that band to "Market Trending". */
  .nova-hero { min-height: calc(100svh - var(--m-head) - var(--m-tab)); justify-content: center; padding-bottom: 16px; }
  .nova-hero > :first-child { margin-top: auto; }
  /* iPhone Safari: its floating, see-through bottom bar covers the last ~84px of the screen, so
     whatever sits there shows through it. The hero runs that much taller (content still ending
     above the bar), so the 3-steps band starts under the bar and never peeks into the first view. */
  @supports (-webkit-touch-callout: none) {
    body.nova-pub .nova-hero { min-height: calc(100svh - var(--m-head) - var(--m-tab) + 84px); padding-bottom: 100px; }
  }
  /* Promo cards: one full-width card at a time (0 Fees first), swiped sideways, dots under it
     (nova-mobile.js builds the dots). */
  /* Cards move with transform (nova-mobile.js), not by scrolling — no scroll, no snap. */
  .nova-hero__cards { order: 2; margin: 0 calc(var(--m-gut) * -1); padding: 0 var(--m-gut) 4px; gap: calc(var(--m-gut) * 2);
    overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
  .nova-hero__cards .nova-hcard { scroll-snap-align: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s; will-change: transform; }
  .nova-hero__cards.is-drag .nova-hcard { transition: none; }
  /* Taller cards with bigger type (the art on ::before scales with the card height); a little less
     extra height on short screens. */
  .nova-hero { --hcard-grow: clamp(12px, (100svh - 800px) / 2, 40px); }
  .nova-hcard { flex: 0 0 100%; min-height: calc(128px + var(--hcard-grow)); }
  .nova-hcard__title { font-size: 20px; }
  .nova-hcard__desc { font-size: 14px; }
  .nova-hcard[href="/app/swap"] { order: -1; }
  .m-dots { order: 3; display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
  .m-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--line-2); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
  .m-dots button.is-on { width: 16px; background: var(--bone); }

  /* 3 steps: icon left, text right — a compact list instead of three tall centred blocks. */
  .nova-trust { padding: 32px var(--m-gut) 16px; }
  .nova-trust__head { margin-bottom: 24px; }
  .nova-trust__head h2 { font-size: 20px; white-space: nowrap; }
  .nova-trust__row { gap: 16px; }
  .nova-trust__item { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; text-align: left; }
  .nova-trust__ico { grid-row: 1 / 3; margin: 0; }
  .nova-trust__ico img { width: 64px; height: 64px; }
  .nova-trust__item strong { align-self: end; margin: 0 0 4px; }
  .nova-trust__item p { align-self: start; max-width: none; }

  .nova-section { padding: 32px var(--m-gut); }
  .nova-section__head { margin-bottom: 20px; }

  /* Market Trending: coin, price, 24h. The rest of the 9 desktop columns stay desktop-only. */
  .nova-currency__h-mobile { padding: 0 0 8px; font-size: 20px; }
  /* Its desktop twin's wrapper holds only the (hidden) desktop heading — 48px of empty padding here. */
  .nova-currency__top { display: none; }
  .nova-currency__table { overflow: visible; margin: 0 calc(var(--m-gut) * -1); }
  .nova-currency__row { min-width: 0; padding: 12px var(--m-gut); }
  .nova-currency__row::before { inset: 0; }
  .nova-currency__row-inner { grid-template-columns: minmax(0, 1fr) auto 80px; gap: 12px; }
  .nova-currency__row-inner > :nth-child(3),
  .nova-currency__row-inner > :nth-child(n+5) { display: none; }
  .nova-currency__row-inner > :nth-child(2), .nova-currency__row-inner > :nth-child(4) { justify-self: end; text-align: right; }
  .nova-currency__px { color: var(--bone); font-weight: 500; }
  .nova-currency__row:not(.nova-currency__row--head):hover::before,
  .nova-currency__row:not(.nova-currency__row--head):hover .nova-currency__row-inner { transform: none; }
  .nova-currency__row--head { padding-top: 8px; padding-bottom: 8px; }
  .nova-currency__more { margin-top: 12px; }
  .nova-currency__more .nova-currency__more-link { min-height: 44px; }

  .nova-why { padding: 0 0 24px; }
  .nova-why__inner { padding: 0 var(--m-gut); }
  .nova-why__head { margin-bottom: 8px; }
  .nova-why__title { font-size: 28px; }
  .nova-why__item { gap: 16px; padding: 24px 0; }
  .nova-why__item-title { font-size: 20px; gap: 12px; }
  .nova-why__desc { font-size: 16px; }
  .nova-why__video { width: min(220px, 60vw); order: 1; }
  .nova-why__item[data-reveal] > *, .nova-why__item[data-reveal]:nth-child(even) > * { transform: translateY(24px); }
  .nova-why__item[data-reveal].is-visible > * { transform: none; }

  /* Footer: link columns collapse into tap-to-open rows (nova-mobile.js toggles .is-open). */
  .nova-foot { margin-top: 24px; padding: 32px var(--m-gut) 24px; }
  .nova-foot__top { grid-template-columns: 1fr; gap: 0; }
  .nova-foot__brand { padding-bottom: 16px; }
  .nova-foot__brand .nova-brand { font-size: 20px; gap: 12px; }
  .nova-foot__brand .nova-brand__mark, .nova-foot__brand .nova-brand__logo { width: 36px; height: 36px; font-size: 16px; }
  .nova-foot__col { border-top: 0; }
  .nova-foot__col h4 {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nova-foot__col h4::after { content: "+"; color: var(--stone); font-size: 20px; font-weight: 400; }
  .nova-foot__col.is-open h4::after { content: "\2212"; }
  .nova-foot__col a { display: none; padding: 10px 0; }
  .nova-foot__col.is-open a { display: block; }
  .nova-foot__col.is-open { padding-bottom: 12px; }
  .nova-foot__legal { margin-top: 0; padding-top: 24px; border-top: 0; gap: 24px; }
  .nova-foot__legal-col p { overflow-wrap: anywhere; }
  .nova-foot__bottom { margin-top: 24px; padding-top: 24px; }

  /* Guest /markets list */
  .nova-doc { padding-left: var(--m-gut); padding-right: var(--m-gut); }
  .nova-markets-page__toolbar { position: relative; padding: 0 var(--m-gut); margin-bottom: 8px; }
  .nova-markets-page__toolbar > svg { position: absolute; left: calc(var(--m-gut) + 14px); top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
  .nova-markets-page__search { max-width: none; height: 44px; padding: 0 16px 0 40px; border-radius: var(--radius); }
  .nova-markets-table { padding: 0 0 24px; overflow: visible; }
  .nova-markets-table th:nth-child(2), .nova-markets-table td:nth-child(2) { display: none; }
  .nova-markets-table th, .nova-markets-table td { padding: 12px 8px; }
  .nova-markets-table th:first-child, .nova-markets-table td:first-child { padding-left: var(--m-gut); }
  .nova-markets-table th:last-child, .nova-markets-table td:last-child { padding-right: var(--m-gut); text-align: right; }
  .nova-markets-table .sym strong { font-size: 14px; }
  .nova-markets-table td.num { font-size: 14px; }

  /* Legal / info pages: tables become one card per row (labels from nova-mobile.js). */
  .nd { padding: 0 var(--m-gut) 40px; }
  .nd-table { overflow: visible; margin: 12px 0 16px; }
  .nd-table table, .nd-table tbody, .nd-table tr, .nd-table td,
  .nova-doc table, .nova-doc tbody, .nova-doc tr, .nova-doc td { display: block; width: 100%; }
  .nd-table thead, .nova-doc thead { display: none; }
  .nd-table tr, .nova-doc tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nd-table tr:last-child, .nova-doc tr:last-child { border-bottom: 0; }
  .nd-table td, .nova-doc td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; white-space: normal; }
  .nd-table td::before, .nova-doc td::before { content: attr(data-label); color: var(--faint); font-size: 12px; font-weight: 500; line-height: 1.55; }
  .nd-table td:first-child, .nova-doc td:first-child { display: block; padding: 0 0 6px; color: var(--bone); font-size: 16px; font-weight: 600; }
  .nd-table td:first-child::before, .nova-doc td:first-child::before { content: none; }
  .nd-table .num { white-space: normal; }

  /* Sign in / sign up page on a phone: form only on white, full screen height, promo panel hidden.
     Fields are 48px tall with 16px text (no iOS zoom on focus); bottom padding clears the
     floating support button. The .ap-card--register selectors undo the desktop 895×525 squeeze. */
  body.nova-authp-body .lk-header { display: none; }
  /* Its slide-down menu can't be opened here either; left in place (fixed, dark, parked off-screen)
     it is what iPhone Safari samples to tint its bars dark over the white page. */
  body.nova-authp-body .lk-sidebar { display: none; }
  /* Guests are sent to log in by the support widget anyway — on these two pages it only covers the form. */
  body.nova-authp-body .nsw { display: none; }
  /* No page scroll / rubber-band whenever the page fits the screen (nova-auth-modal.js toggles it). */
  html.ap-lock, html.ap-lock body { overflow: hidden; overscroll-behavior: none; }
  .ap-math__q { font-size: 16px; }
  .ap-card--register .ap-field--math .ap-field__label { display: flex; }
  .ap-math__in:not(#_) { padding-left: 80px; }
  .ap { align-items: stretch; min-height: 100dvh; padding: calc(24px + env(safe-area-inset-top)) var(--m-gut) 40px; }
  .ap-card, .ap-card--register { display: block; width: 100%; height: auto; min-height: 0; border: 0; border-radius: 0; overflow: visible; }
  /* Promo panel becomes a dark card above the form, stacked like the desktop panel: art on
     top, headline, the four fee rates in a 2×2 grid. */
  .ap-promo, .ap-card--register .ap-promo {
    display: flex; flex-direction: column; align-items: center; margin: 0 0 24px; padding: 20px 16px 24px;
    border-radius: 16px; text-align: center;
  }
  .ap-promo__art, .ap-card--register .ap-promo__art { width: 200px; }
  .ap-promo__head, .ap-card--register .ap-promo__head { margin: 16px 0 12px; font-size: 16px; line-height: 1.3; }
  .ap-promo__fees {
    grid-template-columns: 1fr 1fr; gap: 6px 20px; width: 100%; max-width: 320px; margin: 0; font-size: 12px;
  }
  .ap-promo__fees div, .ap-promo__fees div:nth-child(even) { justify-content: space-between; }
  .ap-promo__fees dt { color: var(--stone); }
  .ap-promo__foot { display: none; }

  /* Home coin cards: the four stats sit centered under the sparkline. */
  .nova-coin-card__stat { align-items: center; text-align: center; }
  .ap-form, .ap-card--register .ap-form { padding: 0; overflow: visible; }
  .ap-pane, .ap-card--register .ap-pane { gap: 20px; margin: 0; }
  .ap-creds { gap: 20px; }
  .ap-title, .ap-card--register .ap-title { margin: 0 0 8px; font-size: 28px; }
  .ap-lede { margin: -20px 0 0; }
  .ap-field, .ap-card--register .ap-field { gap: 8px; }
  .ap-field__label { font-size: 14px; }
  .ap-input:not(#_), .ap-card--register .ap-input:not(#_) { height: 48px; font-size: 16px; }
  .ap-field__btn { width: 44px; height: 44px; right: 2px; }
  .ap-hint, .ap-card--register .ap-hint { margin: 0; }
  .ap-promo-code__toggle { min-height: 44px; margin: -12px 0; }
  /* Consent on one line: shorter wording ("have read and" dropped) at 12px, 18px box; the whole
     label row stays a 44px touch target. */
  .ap-check, .ap-card--register .ap-check { margin: -12px 0; min-height: 44px; font-size: 12px; white-space: nowrap; grid-template-columns: 18px 1fr; }
  .ap-check__long { display: none; }
  .ap-check input { width: 18px; height: 18px; }
  .ap-check input:checked::after { left: 5px; top: 2px; width: 4px; height: 8px; }
  .ap-error, .ap-card--register .ap-error { margin: -8px 0 0; font-size: 14px; }
  .ap-submit, .ap-card--register .ap-submit { height: 48px; margin-top: 8px; }
  .ap-alt, .ap-card--register .ap-alt { margin: 0; }
}
@media (max-width: 399px) {
  /* 14px wallet tabs only fit one row from ~400px; narrower phones drop to 12px. */
  .wo-side .wo-side__link { font-size: 12px; }
}
@media (max-width: 359px) {
  .ap-check, .ap-card--register .ap-check { white-space: normal; }
  .wo-side .wo-side__nav { gap: 6px; padding: 0 10px 4px; }
  .nova-trust__head h2 { font-size: 16px; }
}

/* =====================================================================================
   Account area: shared frame, sheets, wallet, deposit / withdraw / swap / staking
   ===================================================================================== */
@media (max-width: 767px) {
  /* Dialogs slide up from the bottom edge instead of floating in the middle. */
  .lk-sheet:not(.lk-restricted):not([hidden]) { align-items: flex-end; padding: 0; }
  .lk-sheet:not(.lk-restricted) .lk-sheet__panel,
  .wd-result .lk-sheet__panel, .lk-swap-ok .lk-sheet__panel,
  .lk-vipbuy .lk-sheet__panel, .lk-depmodal .lk-sheet__panel {
    width: 100%; max-width: none; max-height: 90dvh; border: 0; background: var(--ink);
    border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0; padding: 24px var(--m-gut) calc(20px + env(safe-area-inset-bottom)); box-shadow: none;
    overscroll-behavior: contain;
  }
  .lk-sheet__actions { flex-direction: column-reverse; align-items: stretch; }
  .lk-sheet__actions > * { min-height: 48px; justify-content: center; }

  .lk-card { border-radius: var(--radius-lg); }
  .lk-desk__head { margin-bottom: 16px; }
  .lk-desk__head h1 { font-size: 20px; }

  /* One flexible column: the 499px pickers set a min-content that pushed every form 165px
     past the screen edge. */
  .lk-desk__grid, .lk-desk__grid--twin, .wd-page .lk-desk__grid--twin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lk-desk__form, .wd-page .lk-desk__form { padding: 16px; min-width: 0; }
  .wd-page .lk-desk__form { padding: 0; border: 0; background: none; }
  [data-deposit-page] .asset-select .wd-id__pick, [data-deposit-page] .net-select,
  [data-withdraw-desk] .wd-sum, [data-swap-desk] .wd-sum, [data-stake-desk] .wd-sum,
  .wd-step--flip .wd-step__body { width: 100% !important; max-width: none; }
  /* Swap: the reverse button sits exactly halfway between the You Pay and You Receive pickers
     (the generic step padding above must not apply to this in-between step). */
  .wd-step--flip { margin: -6px 0 -35px; }
  .wd-step--flip .wd-step__body { padding-bottom: 0; }
  /* Its dashed rail joins step 1's line above and stops above the "2" (the step overlaps step 2 by 35px). */
  [data-deposit-page] .wd-step--flip .wd-step__line { margin: -4px 0 45px; }
  /* Just the reverse icon — no ring around it (the 44px tap area stays). */
  .swap-flip, .swap-flip:hover { border-color: transparent; }
  .swap-flip svg { width: 26px; height: 26px; }
  /* Swap / staking / withdraw submit button spans the same width as the summary above it (back over the 36px step rail). */
  [data-swap-desk] .swap-ticket__cta,
  [data-stake-desk] .wd-step--last button[type="submit"],
  [data-withdraw-desk] .wd-step--last button[type="submit"] { margin-left: -36px; width: calc(100% + 36px); }
  .wd-id__pick { min-height: 48px; }
  .wd-id > .asset-select, .wd-id__asset, .wd-step__body > .asset-select { flex: 1 1 100%; width: 100%; min-width: 0; }
  .wd-step { gap: 12px; }
  .wd-step__body { padding-bottom: 20px; }
  [data-deposit-page] .wd-step__body { padding-bottom: 28px; }
  [data-deposit-page] .wd-page__head { margin-bottom: 20px; }
  .wd-page__head { gap: 4px; }
  .wd-page__back { width: 44px; height: 44px; margin-left: -12px; display: inline-flex; align-items: center; justify-content: center; }
  .wd-leg__row { font-size: 14px; gap: 16px; padding: 2px 0; }
  .wd-leg__row > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .desk-ticket button[type="submit"], .desk-ticket .wd-submit, .lk-desk__form button[type="submit"] { min-height: 48px; font-size: 16px; }
  .dep-chip { min-height: 36px; }

  /* Deposit address: QR on top, the full address under it with a 44px copy button. */
  [data-deposit-page] .lk-depmodal__row { flex-direction: column; align-items: stretch; gap: 16px; max-width: none; }
  /* The step body starts after the 24px step-number rail + 12px gap — widen the QR / address block
     back over that rail so it is centred on the whole step (and screen), not on the indented body. */
  [data-deposit-page] .wd-step--last .lk-depmodal__row, [data-deposit-page] .wd-step--last .wd-leg { margin-left: -36px; }
  /* Promo code block: a clear break from the deposit summary above it. */
  [data-deposit-page] .wd-promo { margin-top: 16px; }
  [data-deposit-page] .lk-depmodal__qrwrap { justify-content: center; }
  [data-deposit-page] .deposit-qr { width: 184px; height: 184px; }
  [data-deposit-page] .lk-depmodal__addrbox { padding: 0; border: 0; border-radius: 0; text-align: center; }
  [data-deposit-page] .lk-depmodal__addrbox .lk-vipbuy__line { flex-direction: column; align-items: center; gap: 8px; }
  [data-deposit-page] .lk-depmodal__addrbox .lk-vipbuy__text { align-items: center; text-align: center; max-width: 100%; }
  [data-deposit-page] .lk-vipbuy__copy { width: 44px; height: 44px; }

  /* Every dropdown (coin / network / staking term, KYC country + document type, filter selects)
     opens as a bottom sheet over a dimmed page. The dim layer is body::after, so tapping it is a
     click outside the picker and each page's own outside-click handler closes the list. */
  .asset-select__menu:not([hidden]), .nsel.is-open > .nsel__list, .lk-kyc__menu:not([hidden]) {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 121;
    width: auto; min-width: 0; max-height: 70dvh; margin: 0;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); scrollbar-width: none;
    background: var(--panel); border: 0; border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0;
    box-shadow: none;
    animation: m-sheet-up .25s ease;
  }
  .asset-select__menu:not([hidden]) { overflow: hidden; }
  .asset-select__menu:not([hidden]), .nsel.is-open > .nsel__list, .lk-kyc__menu:not([hidden]),
  .hx-filters.m-fold.is-m-open, .hx-filters.is-m-open > .m-fsheet-head { background: var(--ink); }
  /* Swipe-down hint bar on top of every sheet;
     nova-mobile.js adds it and closes the sheet when it is dragged down. */
  .m-grab {
    position: sticky; top: -8px; z-index: 3; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin: -8px 0 0; padding: 10px 0 6px; background: var(--ink); touch-action: none; cursor: grab; list-style: none;
  }
  .m-grab__bar { width: 36px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--bone) 28%, transparent); }
  .hx-filters .m-grab { top: 0; margin: 0 calc(var(--m-gut) * -1); }
  .lk-vipbuy .lk-sheet__panel > .m-grab { top: -24px; margin: -16px calc(var(--m-gut) * -1) 4px; }
  .hx-filters.is-m-open > .m-fsheet-head { top: 20px; }
  .asset-select__menu .asset-select__list { max-height: none; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
  .asset-select__search { flex: none; }
  .asset-select__menu .asset-select__row { min-height: 48px; padding-left: var(--m-gut); padding-right: var(--m-gut); border-radius: 0; }
  .asset-select__menu .asset-select__list { padding: 0; gap: 0; scrollbar-width: none; }
  .asset-select__menu .asset-select__list::-webkit-scrollbar, .nsel__list::-webkit-scrollbar, .lk-kyc__menu::-webkit-scrollbar, .hx-filters::-webkit-scrollbar { display: none; }
  .hx-filters.m-fold.is-m-open { scrollbar-width: none; }
  .asset-select__menu .asset-select__search { padding-left: var(--m-gut); padding-right: var(--m-gut); }
  .nsel__opt { padding: 14px var(--m-gut); font-size: 16px; border-radius: 0; }
  .lk-kyc__menu button { padding: 14px var(--m-gut); font-size: 16px; border-radius: 0; }
  html:has(.asset-select__menu:not([hidden]), .nsel.is-open, .lk-kyc__menu:not([hidden])) { overflow: hidden; }
  html:has(.asset-select__menu:not([hidden]), .nsel.is-open, .lk-kyc__menu:not([hidden])) body::after {
    content: ""; position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .6);
  }
  @keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

  /* Deposit / withdraw / staking history rows: one card each — coin + status on top,
     the other fields as label / value lines. */
  .wd-hist { margin-top: 24px; }
  /* Deposit + withdraw: no history list on phones (staking keeps its "Your locks"). */
  [data-deposit-page]:not([data-swap-desk]):not([data-stake-desk]) .wd-hist { display: none; }
  [data-swap-desk] .dep-rules, [data-stake-desk] .dep-rules { display: none; }
  .wd-hist__row, .wd-hist__row[style] {
    grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 6px; column-gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px;
  }
  .wd-hist__row:last-child { border-bottom: 0; }
  .wd-hist__row > * { grid-column: 1 / -1; display: block; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
  .wd-hist__row > [data-label]::before { content: attr(data-label); float: left; margin-right: 16px; color: var(--faint); font-family: var(--font); }
  .wd-hist__row > :first-child { grid-column: 1; grid-row: 1; display: flex; text-align: left; font-weight: 600; }
  .wd-hist__row > :first-child::before { content: none; }
  .wd-hist__row > .wd-hist__status { grid-column: 2; grid-row: 1; font-weight: 600; }
  .wd-hist__row > .wd-hist__status::before { content: none; }
  .wd-hist__addr { color: var(--stone); }
  .wd-hist__row .stake-pos__acts { justify-content: flex-end; }
  .wd-hist__row > :has(.stake-pos__acts) { overflow: visible; white-space: normal; }

  /* ---- Wallet overview ---- */
  .wo-page { gap: 16px; }
  .wo-page .lk-card { border: 0; background: none; padding: 0; }
  .wo-top__head { margin-bottom: 16px; }
  .wo-top__head h1 { font-size: 20px; }
  .wo-top__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; order: 3; }
  .wo-top { display: flex; flex-direction: column; }
  .wo-top__head { display: contents; }
  .wo-top__head h1 { order: 0; margin-bottom: 16px; }
  .wo-top__k { order: 1; }
  .wo-top__figs { order: 2; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
  .wo-top__meta { order: 2; flex-direction: column; gap: 6px; font-size: 14px; margin-bottom: 20px; }
  .wo-act { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: var(--radius); }
  .wo-act:nth-child(3) { grid-column: 1 / -1; }
  .wo-top__actions > .wo-act[href^="/app/history"] { display: none; }
  .lk-cash__eye { width: 32px; height: 32px; }

  .lk-hold__head { padding: 0 0 12px; border-bottom: 0; flex-wrap: nowrap; }
  .lk-hold__head h2 { font-size: 16px; flex: none; }
  .lk-hold__tools { flex: 1; min-width: 0; }
  .lk-hold__search { height: 40px; width: 100%; border-radius: var(--radius); }
  .wo-assets .lk-hold__search { display: none; }
  .lk-hold__search input { width: 100%; font-size: 16px; }
  /* Assets: coin on the left, amount with its value under it on the right. */
  .wo-assets .lk-hold__table, .wo-assets .lk-hold__table tbody { display: block; }
  .wo-assets .lk-hold__table thead { display: none; }
  .wo-assets .lk-hold__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; padding: 10px 0; }
  .wo-assets .lk-hold__row[hidden] { display: none; }
  .wo-assets .lk-hold__table td { padding: 0; border: 0; }
  .wo-assets .lk-hold__row > td:first-child { grid-row: 1 / 3; align-self: center; }
  .wo-assets .lk-hold__row > .wo-td-amount { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 600; color: var(--bone); }
  .wo-assets .lk-hold__row > .wo-td-value { grid-column: 2; grid-row: 2; font-size: 12px; font-weight: 400; color: var(--faint); }
  .wo-assets .lk-hold__row > .wo-td-cost, .wo-assets .lk-hold__row > .wo-td-px, .wo-assets .lk-hold__row > .wo-td-profit { display: none; }
  .lk-hold__name { gap: 12px; }
  .lk-hold__name-txt strong { font-size: 16px; }
  .wo-alloc { display: none; }

  /* Wallet-area side nav (Overview / Futures / PNL / History): all four on one row, text only. */
  .wo-side { display: block; margin: 0 calc(var(--m-gut) * -1); min-width: 0; }
  .wo-side__nav {
    position: static; flex-direction: row; justify-content: space-between; gap: 12px; padding: 0 var(--m-gut) 4px;
  }
  .wo-side__ico { display: none; }
  .wo-side__link {
    flex: none; height: 36px; padding: 0; border: 0;
    border-radius: var(--radius); font-size: 14px; white-space: nowrap;
  }
  .wo-side__link.is-active { color: var(--bone); }
}

/* =====================================================================================
   Tables as cards, filters, history / orders / PNL / settings / notifications
   ===================================================================================== */
@media (max-width: 767px) {
  /* Any data table: header row hidden, each row a card. The first cell is the card title,
     every other cell is "label ........ value" (labels come from nova-mobile.js). */
  .hx-scroll, .lk-hold__scroll { overflow: visible; margin-top: 12px; }
  table.hx-table, table.hx-table tbody, table.lk-table, table.lk-table tbody { display: block; width: 100%; }
  table.hx-table thead, table.lk-table thead { display: none; }
  table.hx-table tr, table.lk-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  table.hx-table tr[hidden], table.lk-table tr[hidden] { display: none; }
  table.hx-table td, table.lk-table td {
    display: block; grid-column: 1 / -1; padding: 0 !important; border: 0; text-align: right;
    white-space: normal; overflow-wrap: anywhere; font-size: 14px; color: var(--bone); min-width: 0;
  }
  table.hx-table td[data-label]::before, table.lk-table td[data-label]::before {
    content: attr(data-label); float: left; margin-right: 16px; color: var(--faint); font-weight: 400; text-align: left;
  }
  table.hx-table td:first-child, table.lk-table td:first-child { grid-column: 1; grid-row: 1; text-align: left; font-weight: 600; }
  table.hx-table td:first-child::before, table.lk-table td:first-child::before { content: none; }
  table.hx-table td.m-cell-full, table.lk-table td.m-cell-full { grid-column: 1 / -1; text-align: center; font-weight: 400; color: var(--stone); }
  .hx-table .hx-addr { display: inline-block; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .hx-table .od-act { justify-content: flex-end; display: inline-flex; }
  .od-act__b { height: 36px; padding: 0 16px; font-size: 14px; }
  /* Transaction history: the status (last column) sits top-right next to the asset. */
  [data-hx-rows] > tr > td:last-child { grid-column: 2; grid-row: 1; }
  [data-hx-rows] > tr > td:last-child::before { content: none; }

  /* Filters fold behind one "Filters" button (added by nova-mobile.js). */
  .m-filter-toggle {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin: 0 0 4px;
    border: 1px solid var(--line-2); border-radius: var(--radius); background: none; color: var(--bone);
    font: 500 14px/1 var(--font); cursor: pointer;
  }
  /* Hidden from the first paint, not only once nova-mobile.js has folded them — otherwise every
     page load (history tabs are plain links) flashes the full filter block mid-screen. */
  .hx-filters:not(.is-m-open) { display: none; }
  .hx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 8px; }
  .hx-filters > * { grid-column: 1 / -1; min-width: 0; }
  .hx-filters > button, .hx-filters > .hx-btn, .hx-filters > a { grid-column: auto; height: 48px; justify-content: center; }
  .hx-filters > button:only-of-type { grid-column: 1 / -1; }
  .hx-field, .hx-range, .hx-select, .od-filters .hx-select { width: 100%; min-width: 0; }
  .hx-filters .hx-field { display: flex; flex-direction: column; gap: 8px; }
  .hx-filters .nsel, .hx-filters .nsel__btn, .hx-filters .hx-range { width: 100%; min-height: 48px; }
  /* Open: a bottom sheet (nova-mobile.js adds the title row and the dim layer). */
  .hx-filters.m-fold.is-m-open {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 122; margin: 0;
    max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; align-content: start;
    padding: 0 var(--m-gut) calc(20px + env(safe-area-inset-bottom));
    background: var(--ink); border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0;
    box-shadow: none; animation: m-sheet-up .25s ease;
  }
  .m-fsheet-head { display: none; }
  .hx-filters.is-m-open > .m-fsheet-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
    margin: 0 calc(var(--m-gut) * -1); padding: 6px 4px 6px var(--m-gut); background: var(--ink);
    font-size: 16px; font-weight: 600; color: var(--bone);
  }
  .m-fsheet-head button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--bone); cursor: pointer; }
  .m-fsheet-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 119; background: rgba(0, 0, 0, .6); }
  .hx-filters .nsel__btn { font-size: 16px; }
  /* Any date range (history / orders filters, PNL): start date left, arrow centred, end date right
     next to the calendar icon. */
  .hx-range .hx-range__in:nth-of-type(2) { text-align: right; }
  /* Calendars (history / orders date range, KYC date of birth): a bottom sheet like every other
     picker — above the tab bar, full-width grid of seven equal columns, grab bar on top. */
  .hx-cal, .idv-cal {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 125; width: auto; max-width: none;
    max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding: 0 var(--m-gut) calc(16px + env(safe-area-inset-bottom)); background: var(--ink);
    border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0; box-shadow: none; animation: m-sheet-up .25s ease;
  }
  .hx-cal > .m-grab { margin: 0 calc(var(--m-gut) * -1); top: 0; }
  .hx-cal .hx-cal__months { padding: 0; gap: 0; align-items: stretch; }
  .hx-cal .hx-cal__pane { width: 100%; }
  .hx-cal .hx-cal__head { height: 48px; border-bottom: 0; }
  .hx-cal .hx-cal__nav { width: 40px; height: 40px; font-size: 20px; color: var(--stone); }
  .hx-cal .hx-cal__title { font-size: 16px; }
  .hx-cal .hx-cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; padding: 8px 0 12px; }
  .hx-cal .hx-cal__wd { height: 32px; font-size: 13px; }
  .hx-cal .hx-cal__d { height: 44px; font-size: 16px; }
  .hx-cal .hx-cal__d span { width: 40px; height: 40px; border-radius: 10px; }
  .hx-cal .hx-cal__big, .idv-cal .idv-cal__body { padding: 0; }
  .hx-cal .hx-cal__cell { height: 48px; font-size: 16px; }
  .hx-cal .hx-cal__cell span { min-width: 72px; height: 36px; border-radius: 10px; }
  /* Date range on phones: one month at a time. The second month's forward arrows (› ») move into
     the first month's header on the right — they already advance both months, so this reads as a
     single month paged both ways. Quick presets are left out on phones. */
  .hx-cal:not(.idv-cal) .hx-cal__presets { display: none; }
  .hx-cal:not(.idv-cal) .hx-cal__months { position: relative; }
  .hx-cal:not(.idv-cal) .hx-cal__pane + .hx-cal__pane { position: absolute; top: 0; right: 0; width: auto; }
  .hx-cal:not(.idv-cal) .hx-cal__pane + .hx-cal__pane .hx-cal__grid,
  .hx-cal:not(.idv-cal) .hx-cal__pane + .hx-cal__pane .hx-cal__title { display: none; }
  .hx-cal:not(.idv-cal) .hx-cal__pane + .hx-cal__pane .hx-cal__head { display: flex; justify-content: flex-end; }
  /* KYC date of birth opens outside any other sheet: dim + lock the page behind it too. */
  html:has(.idv-date.is-open) body::after { content: ""; position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .6); }

  /* Transaction history page */
  .hx__head { padding: 0; border-bottom: 1px solid var(--line); }
  .hx__head h1 { font-size: 20px; margin: 16px 0 12px; }
  .hx-tabs { gap: 20px; margin: 0 calc(var(--m-gut) * -1); padding: 0 var(--m-gut); }
  .hx .hx-tabs__a { padding: 8px 0 12px; }
  .hx__body { padding: 16px 0 0; }
  .wo-page--hist .lk-card, .wo-main.hx { border: 0; background: none; }

  /* Orders + Settings: the left menu becomes chip rows. */
  .od { gap: 12px; }
  .od-side { padding: 0; border: 0; margin: 0 calc(var(--m-gut) * -1); min-width: 0; }
  .od-grp { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 0 var(--m-gut) 8px; scrollbar-width: none; }
  .od-grp::-webkit-scrollbar { display: none; }
  .od-grp + .od-grp { margin-top: 0; }
  .od-grp__h { flex: none; width: auto; padding: 0 4px 0 0; font-size: 12px; font-weight: 500; color: var(--faint); pointer-events: none; }
  .od-grp__h > svg, .od-grp__ico { display: none; }
  .od-grp__h--static { display: none; }
  /* Settings pages as text tabs (no boxed chips) — the white underline marks the open page,
     same as the Orders sub-tabs below and the Tools switcher. */
  .od-grp__items, .od-grp__items[hidden] { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; padding: 0; }
  .od-item {
    flex: none; width: auto; height: auto; min-height: 44px; padding: 0; display: inline-flex; align-items: center;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
    color: var(--stone); white-space: nowrap; font-size: 14px; font-weight: 500;
  }
  .od-item.is-on { color: var(--bone); font-weight: 600; border-bottom-color: var(--bone); background: none; }
  /* Orders menu (not settings): a Spot / Futures switch on top, the chosen group's pages under it
     as underline tabs (history-page style). nova-mobile.js turns a switch tap into "open the
     group's first page". */
  .od-side:has([data-od-tab]) { margin: 0; }
  .od-side:has([data-od-tab]) nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 4px; }
  .od-side:has([data-od-tab]) .od-grp { display: contents; }
  .od-side:has([data-od-tab]) .od-grp__h {
    grid-row: 1; display: flex; align-items: center; justify-content: center; width: auto; height: 40px; margin: 0; padding: 0 8px;
    border-radius: var(--radius); background: var(--panel); color: var(--stone); font-size: 14px; font-weight: 600; pointer-events: auto;
  }
  .od-side:has([data-od-tab]) .od-grp__h > span { flex: none; }
  .od-side:has([data-od-tab]) .od-grp:has(.od-item.is-on) > .od-grp__h { background: var(--panel-3); color: var(--bone); }
  .od-side:has([data-od-tab]) .od-grp__items, .od-side:has([data-od-tab]) .od-grp__items[hidden] {
    grid-row: 2; grid-column: 1 / -1; display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--m-gut) * -1); padding: 0 var(--m-gut);
  }
  .od-side:has([data-od-tab]) .od-grp:not(:has(.od-item.is-on)) > .od-grp__items { display: none; }
  .od-side:has([data-od-tab]) .od-item {
    height: auto; padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: none; color: var(--stone); font-size: 14px; font-weight: 500;
  }
  .od-side:has([data-od-tab]) .od-item.is-on { color: var(--bone); font-weight: 600; border-bottom-color: var(--bone); }
  .od-main { padding: 0; border: 0; min-height: 0; }
  .od-title { font-size: 20px; margin: 8px 0 12px; }
  .od-scroll { margin-top: 12px; }
  .od-pager { justify-content: space-between; padding-top: 16px; }
  .od-pager__b { min-height: 44px; padding: 0 8px; font-size: 14px; }

  /* PNL analysis */
  .pa-top, .pa-eq { grid-template-columns: minmax(0, 1fr); }
  .pa-chart, .pa-eq { padding: 16px 0; }
  .pa-eq__bar { gap: 12px; }
  .pa-eq__bar .hx-range, .pa-eq__range { width: 100%; }
  .pa-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .pa-legend li { font-size: 14px; }

  /* Settings */
  .lk-set .ac-cards { grid-template-columns: minmax(0, 1fr); }
  /* Identification: only the photo tips stay next to the wizard, without their divider. */
  .idv-info > .idv-info__sec:nth-of-type(-n+2) { display: none; }
  .idv-info > .idv-info__sec { border-bottom: 0; }

  /* Referral: the three counters as a plain figure row, no tiles. */
  .rf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .rf-tile { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
  .rf-tile__ico { display: none; }
  .rf-tile .rf-k { margin-bottom: 4px; }
  .rf-tile__v { gap: 6px; flex-wrap: wrap; }
  .rf-share { display: none; }
  .sec-row { gap: 12px; }
}

/* =====================================================================================
   Stocks hub + stock page
   ===================================================================================== */
@media (max-width: 767px) {
  .sk-geo { overflow: hidden; }
  /* Market list: one line per stock — asset, price, 24h change. Range / 7 days / volume stay desktop. */
  [data-sk-rows] > tr[data-sk-row] { grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; row-gap: 0; padding: 10px 0; }
  [data-sk-rows] > tr[data-sk-row] > td { grid-column: auto; grid-row: 1; }
  [data-sk-rows] > tr[data-sk-row] > td::before { content: none; }
  [data-sk-rows] > tr[data-sk-row] > td:nth-child(n+4) { display: none; }
  [data-sk-rows] > tr[data-sk-row] > td:nth-child(2) { font-weight: 600; }
  .sk-asset { gap: 12px; }
  /* Hover: rows are grids on phones, so the desktop per-cell tint left gaps — tint the whole
     market row instead; holdings rows get no hover tint at all. */
  .sk-table tbody tr:hover td { background: none; }
  [data-sk-rows] > tr[data-sk-row] { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
  @media (hover: hover) { [data-sk-rows] > tr[data-sk-row]:hover { background: rgba(255, 255, 255, .025); } }
  .sk-market__head { gap: 12px; }
  .sk-market__head .sk-search { flex: none; width: 160px; margin-left: auto; }
  .sk-market .sk-tabs { margin: 0 calc(var(--m-gut) * -1); padding: 0 var(--m-gut); }
  .sk-chart__bar { flex-wrap: wrap; row-gap: 8px; }
  .sk-ranges { margin-left: auto; }
  .sk-range-btn { height: 36px; }
  .sk-d .ac-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

  /* Stock page: Buy / Sell bar on top of the tab bar, the ticket opens as a bottom sheet. */
  html.m-lock, html.m-lock body { overflow: hidden; }
  body.sk-detail-page { padding-bottom: calc(64px + var(--m-tab)); }
  body.sk-detail-page .nsw { bottom: calc(var(--m-tab) + 80px); }
  body.sk-detail-page .cookie-banner:not([hidden]) { bottom: calc(var(--m-tab) + 72px); }
  .sk-m-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: var(--m-tab); z-index: 59;
    padding: 8px var(--m-gut); background: var(--ink); border-top: 0;
  }
  .sk-pos { border-top: 0; }
  .sk-trades table.hx-table tr { border-bottom: 0; }
  .sk-m-bar button { height: 48px; border: 0; border-radius: var(--radius); color: #fff; font: 600 16px/1 var(--font); cursor: pointer; }
  .sk-m-bar__buy { background: var(--ok); }
  .sk-m-bar__sell { background: var(--down); }
  .sk-m-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, .6); }
  .sk-ticket {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 0 var(--m-gut) calc(20px + env(safe-area-inset-bottom)); background: var(--ink);
    border: 0; border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0;
    transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
  }
  .sk-ticket.m-sheet-open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .sk-m-sheethead {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 20px; z-index: 2;
    margin: 0 calc(var(--m-gut) * -1) 12px; padding: 4px var(--m-gut) 8px;
    background: var(--ink); border-bottom: 0; font-size: 16px;
  }
  /* Closed by the grab bar (swipe down) or the dim layer — no X on phones. */
  .sk-m-sheethead button { display: none; }
  .sk-ticket > .m-grab { top: 0; margin: 0 calc(var(--m-gut) * -1); }
  .sk-ticket .sk-sum .sk-sum__big { border-top: 0; }
  .sk-ticket__note:empty { display: none; }
  .sk-ticket .sk-seg4 { display: none; }
  /* With the 25 / 50 / 75 / Max row gone, the summary needs its own space below the amount field. */
  .sk-ticket .sk-sum { margin-top: 16px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sk-ticket { transition: none; }
}

/* ---------- Tools pages (site/tools.ejs, desktop styles in nova-tools.css) ---------- */
@media (max-width: 767px) {
  /* Switcher: three equal slots with short names, pinned under the header while the page scrolls. */
  .tl { --tl-stick: calc(var(--m-head) + 48px); }
  .tl-tabs {
    position: sticky; top: var(--m-head); z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin: -16px calc(var(--m-gut) * -1) 0; padding: 0 var(--m-gut); background: var(--ink); overflow: visible;
  }
  .tl-tabs__a { height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .tl-tabs__full { display: none; }
  .tl-tabs__short { display: inline; }

  /* Screener: exchange-app list — coin | price | 24h, with a sortable header row pinned under the tabs. */
  .scr-scroll { overflow: visible; }
  .scr-t, .scr-t thead, .scr-t tbody { display: block; min-width: 0; }
  .scr-t thead { position: sticky; top: var(--tl-stick); z-index: 5; background: var(--ink); }
  .scr-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; column-gap: 12px; }
  .scr-t th, .scr-t td { display: none; padding: 0; }
  .scr-t th.scr-t__asset, .scr-t th:has([data-scr-sort="price"]), .scr-t th:has([data-scr-sort="ch24"]) { display: block; }
  .scr-t thead tr { height: 40px; }
  .scr-t thead button { min-height: 40px; font-size: 12px; }
  .scr-t thead button svg { opacity: 0; }
  .scr-t tbody tr { height: auto; min-height: 64px; padding: 8px 0; }
  .scr-t tbody tr:hover { background: none; }
  .scr-t tbody tr:active { background: var(--panel); }
  .scr-t td.scr-t__asset, .scr-t td[data-k="price"], .scr-t td[data-k="ch24"] { display: block; }
  .scr-t td[data-k="price"] { font-size: 16px; line-height: 22px; }
  .scr-t td[data-k="ch24"] { font-size: 14px; line-height: 20px; font-weight: 600; }
  .scr-t .asset-ico img { width: 36px; height: 36px; }
  .scr-coin b { font-size: 16px; line-height: 22px; }
  .scr-coin span { font-size: 12px; }

  /* Cross rates / heat map: the grid gives way to "base currency → list". */
  .fx-scroll, .fx-read, .fx--rates .fx-top { display: none; }
  .fx--heat .fx-top { order: 3; min-height: 0; margin: 16px 0 0; justify-content: center; }
  /* The legend sits under the list, which nova-tools.js builds after load: kept out of sight until then, so it
     does not flash right under the chips and then slide down. */
  .fx:has(.fx-m__list:empty) .fx-top { visibility: hidden; }
  .fx { display: flex; flex-direction: column; }
  .fx-m { display: block; }
  .fx-m__bases {
    position: sticky; top: var(--tl-stick); z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--m-gut) * -1); padding: 4px var(--m-gut) 8px; background: var(--ink); scroll-snap-type: x proximity;
  }
  .fx-m__bases::-webkit-scrollbar { display: none; }
  .fx-m__base {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; scroll-snap-align: center;
    border: 0; border-radius: var(--radius); background: none; color: var(--stone); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .fx-m__base.is-on { background: var(--panel-2); color: var(--bone); }
  .fx-m__base:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
  .fx-m__head { margin: 12px 0 8px; font-size: 14px; line-height: 20px; color: var(--stone); }
  .fx-m__head b { color: var(--bone); font-weight: 600; }
  .fx-m__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  /* Rows are buttons: tapping one makes it the quote currency in the pair card. */
  .fx-m__row {
    width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 64px;
    padding: 0 12px; margin: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--bone);
    font: inherit; text-align: left; cursor: pointer;
  }
  .fx-m__row:active { background: var(--panel); }
  .fx-m__row.is-on { background: var(--panel-2); }
  .fx-m__row--heat.is-on { box-shadow: inset 0 0 0 2px var(--bone); }
  .fx-m__row:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
  .fx-m__val small { font-size: 12px; font-weight: 500; color: var(--stone); }

  /* Pair card: the one rate being read, in words, with a flip button between the two currencies. */
  .fx-pair { margin: 0 0 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--panel); }
  .fx-pair__line { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 12px; }
  .fx-pair__cur { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; line-height: 28px; }
  .fx-pair__cur:last-child { justify-self: end; }
  .fx-pair__cur b { font-weight: 600; color: var(--bone); }
  .fx-pair__cur .fx-flag { width: 28px; height: 28px; }
  .fx-pair__swap {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: var(--panel-3); color: var(--bone); cursor: pointer;
  }
  .fx-pair__swap:active { background: var(--line-2); }
  .fx-pair__swap:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
  .fx-pair__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 16px 0 4px; }
  .fx-pair__big { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--bone); }
  .fx-pair__big.is-up { color: var(--signal); }
  .fx-pair__big.is-down { color: var(--down); }
  .fx-pair__unit { font-size: 16px; line-height: 24px; color: var(--stone); }
  .fx-pair__sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; line-height: 18px; color: var(--stone); }
  .fx-pair__chg.is-up { color: var(--signal); }
  .fx-pair__chg.is-down { color: var(--down); }
  .fx-m__row .fx-flag { width: 32px; height: 32px; }
  .fx-m__cur, .fx-m__val { display: grid; }
  .fx-m__cur b, .fx-m__val b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--bone); }
  .fx-m__cur span { font-size: 12px; line-height: 16px; color: var(--stone); }
  .fx-m__val { text-align: right; }
  .fx-m__val span { font-size: 12px; line-height: 16px; color: var(--stone); }
  .fx-m__chg.is-up { color: var(--signal); }
  .fx-m__chg.is-down { color: var(--down); }
  /* Heat rows are the heat map's own tiles: tint strength = size of the move. */
  .fx-m__row--heat { background: var(--panel); }
  .fx-m__row--heat.is-up { background: color-mix(in oklab, var(--signal) calc(12% + var(--s) * 68%), var(--panel)); }
  .fx-m__row--heat.is-down { background: color-mix(in oklab, var(--down) calc(12% + var(--s) * 68%), var(--panel)); }
  .fx-m__row--heat .fx-m__cur span, .fx-m__row--heat .fx-m__val span { color: rgba(255, 255, 255, .72); }
}

/* VIP explainer as a bottom sheet, like the VIP payment sheet: grab bar, slides up, swipe down closes. */
@media (max-width: 767px) {
  .vx .vx__panel { animation: m-sheet-up .25s ease; padding-top: 24px; }
  .vx .lk-sheet__panel > .m-grab { top: -24px; margin: -16px calc(var(--m-gut) * -1) 4px; }
  .vx__x { display: none; }
  .vx__title { margin-right: 0; }
  .vx__cmp td { width: 84px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vx .vx__panel { animation: none; }
}

/* ---------- Our card (site/card.ejs, desktop styles in nova-card.css) ---------- */
@media (max-width: 767px) {
  .cd { --cd-gap: 72px; padding: 16px var(--m-gut) 64px; }
  /* The hero is sized to the small viewport (browser bar shown), so it does not re-lay itself out while the
     bar hides and shows during a scroll (100dvh made the title and marks jump on every scroll). When the bar
     is hidden the window is up to ~100px taller: while the plans are still closed, room under the hero keeps
     the footer from peeking in. */
  .cd:has(#plans[hidden]) { padding-bottom: 160px; }
  /* Phone first screen = window - header - page padding 16 - bottom tab bar (--m-tab: 0 for guests without
     it). The title stays right over the card; the free height is shared equally between the header and the
     title and between the card and the row of marks, which sits near the bottom (72px clear of the floating support button). The card picture is as wide as the screen,
     so both ends of the pedestal stay in view. */
  .cd-hero {
    min-height: calc(100vh - var(--m-head) - 16px - var(--m-tab));
    min-height: calc(100svh - var(--m-head) - 16px - var(--m-tab));
    --cd-card-w: 100vw;
  }
  /* The marks go under the card: one straight row over the faded foot of the pedestal. */
  .cd-arc-zone { padding: 4px 0 72px; }
  .cd-arc { gap: 5vw; align-items: center; translate: 0 -40px; }
  /* The button hangs under the row, out of the flow, so the card and the title do not move. */
  .cd-arc-zone { gap: 0; }
  .cd-how { position: absolute; left: 50%; top: 28px; translate: -50% 0; white-space: nowrap; }
  .cd-arc__apay { width: 21vw; }
  .cd-arc__visa { width: 27vw; }
  .cd-arc__gpay { width: 25vw; }
  /* One line on its glass pane, scaled to the screen (the headline is ~10.1x its font size wide); the block keeps its former
     two-line height so the card and the marks stay where they were. */
  .cd-head { margin-bottom: 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
  .cd-head { align-items: center; }
  .cd-title { padding: 10px 20px; font-size: min(40px, (100vw - 72px) / 10.2); line-height: 44px; }
  /* Out of the flow on phones, so adding it moves nothing: it hangs in the free space between the title and
     the card (nova-card.js centres it there). */
  .cd-soon { font-size: min(26px, 6.2vw); line-height: 32px; }
  .cd { overflow-x: visible; }
  .cd-h2 { font-size: 28px; line-height: 36px; }
  /* Plans on a phone: the two heads side by side, each difference as a label over two bars. */
  .cd-plans { text-align: left; }
  .cd-plans .cd-h2 { margin: 0; }
  .cd-cmp { margin-top: 28px; }
  .cd-cmp__heads { gap: 0 20px; padding-bottom: 20px; }
  .cd-cmp__pk { align-items: flex-start; }
  .cd-cmp__price { font-size: 40px; line-height: 44px; }
  .cd-cmp__row { gap: 10px 20px; padding: 14px 0; }
  .cd-cmp__label { font-size: 14px; line-height: 20px; }
  .cd-cmp__cell { align-items: flex-start; gap: 8px; }
  .cd-cmp__bar { width: 100%; }
  .cd-both__h { margin-top: 48px; }
  .cd-both { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .cd-both li { font-size: 14px; line-height: 20px; align-items: flex-start; }
}