/* molvi-web.css — web design system of molvi.ai (S05).
   Source of look: site/prototypes/s04/variant-a.html (owner, 06.11.2026). Docs: site/ds/README.md.
   Include:  <link rel="stylesheet" href="…/fonts.css"> <link rel="stylesheet" href="…/molvi-web.css">
             <script src="…/molvi-web.js" defer></script>   and   <body class="m-root">
   Every class and custom property starts with m- (the old live styles.css was removed in S06).
   Colours here must equal site/ds/tokens.json (check.py compares them). */

/* ---------- 1. Primitives and scales ---------- */
:root{
  --m-ink:#17162A; --m-paper:#F7F3EC; --m-paper-2:#EFE9DE; --m-surface:#211F3A; --m-surface-2:#2A2845;
  --m-muted:#8E8CA0; --m-voice:#FF5C39; --m-voice-hover:#FF7655; --m-signal:#7B5CFF; --m-white:#FFFFFF;
  --m-ink-soft:#4A4860; --m-lilac:#CFCBDD;
  --m-grad-voice:linear-gradient(135deg,#FF5C39,#7B5CFF); /* sound only: mark, wave, record button. Never text. */

  --m-fd:'Unbounded',system-ui,sans-serif; --m-ft:'Golos Text',system-ui,sans-serif; --m-fm:'JetBrains Mono',ui-monospace,monospace;
  --m-fs-display:clamp(40px,7vw,84px); --m-fs-h1-page:clamp(32px,5vw,56px); --m-fs-h2:clamp(30px,4.4vw,54px);
  --m-fs-sub:clamp(22px,2.4vw,30px); --m-fs-stat:clamp(26px,3vw,38px); --m-fs-h3:20px;
  --m-fs-lead:clamp(18px,1.7vw,21px); --m-fs-body:17px; --m-fs-ui:16px; --m-fs-small:15px;
  --m-fs-meta:14px; --m-fs-label:13px; --m-fs-caption:12px;
  --m-lh-display:1.08; --m-lh-sub:1.15; --m-lh-body:1.55; --m-lh-ui:1.4;
  --m-tr-display:-.02em; --m-tr-label:.04em; --m-tr-mono:.02em;

  --m-s-0-5:4px; --m-s-1:8px; --m-s-2:16px; --m-s-3:24px; --m-s-4:32px; --m-s-5:40px; --m-s-6:48px;
  --m-s-8:64px; --m-s-10:80px; --m-s-15:120px;
  --m-sec:clamp(64px,9vw,120px); --m-gutter:clamp(20px,4vw,48px); --m-container:1200px;
  --m-measure-lead:34em; --m-measure-prose:40em;

  --m-r-sm:8px; --m-r-md:20px; --m-r-card:28px; --m-r-inset:56px; --m-r-pill:999px;
  --m-tap:44px; /* tap.min in tokens.json: smallest button height, checked by check.py */
  --m-focus-w:3px; --m-focus-off:3px;
  --m-dur-fast:150ms; --m-dur:240ms; --m-dur-slow:320ms;
  --m-ease:cubic-bezier(.2,0,0,1); --m-ease-out:cubic-bezier(0,0,.2,1); --m-ease-spring:cubic-bezier(.3,1.4,.5,1);
}

/* ---------- 2. Themes (semantic tokens). Paper is the default. ---------- */
:root,.m-theme-paper{
  --m-bg:#F7F3EC; --m-fg:#17162A; --m-fg2:#4A4860; --m-label:#4A4860; --m-card:#FFFFFF; --m-card2:#EFE9DE;
  --m-line:rgba(23,22,42,.14); --m-ctl-line:rgba(23,22,42,.5); --m-link:#17162A; --m-focus:#7B5CFF;
  --m-out-bg:#17162A; --m-out-fg:#F7F3EC; --m-sw-on-line:#17162A; --m-shadow:0 24px 60px rgba(23,22,42,.10);
}
.m-theme-ink{
  --m-bg:#17162A; --m-fg:#F7F3EC; --m-fg2:#CFCBDD; --m-label:#8E8CA0; --m-card:#211F3A; --m-card2:#2A2845;
  --m-line:rgba(255,255,255,.11); --m-ctl-line:rgba(255,255,255,.4); --m-link:#FF5C39; --m-focus:#7B5CFF;
  --m-out-bg:#F7F3EC; --m-out-fg:#17162A; --m-sw-on-line:#FF5C39; --m-shadow:0 30px 80px rgba(0,0,0,.35);
}
.m-theme-surface{
  --m-bg:#211F3A; --m-fg:#F7F3EC; --m-fg2:#CFCBDD; --m-label:#8E8CA0; --m-card:#17162A; --m-card2:#2A2845;
  --m-line:rgba(255,255,255,.11); --m-ctl-line:rgba(255,255,255,.4); --m-link:#FF5C39; --m-focus:#7B5CFF;
  --m-out-bg:#F7F3EC; --m-out-fg:#17162A; --m-sw-on-line:#FF5C39; --m-shadow:0 30px 80px rgba(0,0,0,.35);
}
.m-root,.m-theme-paper,.m-theme-ink,.m-theme-surface,.m-section{background:var(--m-bg);color:var(--m-fg)}

/* ---------- 3. Base (only inside .m-root) ---------- */
.m-root{margin:0;font-family:var(--m-ft);font-size:var(--m-fs-body);line-height:var(--m-lh-body);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
:where(.m-root),:where(.m-root) *,:where(.m-root) ::before,:where(.m-root) ::after{box-sizing:border-box}
:where(.m-root) :is(h1,h2,h3,h4,p,ol,ul,figure,blockquote){margin:0}
:where(.m-root) a{color:var(--m-link)}
:where(.m-root) button{font-family:inherit}
:where(.m-root) :focus-visible{outline:var(--m-focus-w) solid var(--m-focus);outline-offset:var(--m-focus-off)}
:where(.m-root) a:not([class]):focus-visible,.m-link:focus-visible{border-radius:4px}
.is-focus{outline:var(--m-focus-w) solid var(--m-focus);outline-offset:var(--m-focus-off)}
html:has(.m-root){scroll-behavior:smooth}
.m-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.m-nw{white-space:nowrap}
/* Two languages in one page (showcase, prototypes). Live pages are one language each and do not need it. */
html[lang|="ru"] [data-m-l="en"],html:not([lang|="ru"]) [data-m-l="ru"]{display:none!important}
/* Hit area: the box looks as drawn, the target is at least 44×44. */
.m-btn,.m-chip,.m-lang,.m-switch,.m-fnref,.m-brand,.m-nav__links>li>a,.m-nav__menu,.m-foot__links a{position:relative}
.m-btn::after,.m-chip::after,.m-lang::after,.m-switch::after,.m-fnref::after,.m-brand::after,.m-nav__links>li>a::after,.m-foot__links a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}

/* ---------- 4. Type ---------- */
.m-display,.m-h1,.m-h2,.m-h3,.m-sub,.m-stat{font-family:var(--m-fd);font-weight:600;letter-spacing:var(--m-tr-display);line-height:var(--m-lh-display);margin:0}
.m-display{font-size:var(--m-fs-display)}
.m-h1{font-size:var(--m-fs-h1-page)} /* h1 of inner pages; .m-display is for the home hero only */
.m-h1,.m-prose :is(h1,h2){hyphens:auto;overflow-wrap:break-word} /* long words (e.g. «конфиденциальности») on a 375 px phone */
.m-h2{font-size:var(--m-fs-h2)}
.m-h3{font-size:var(--m-fs-h3);font-weight:500}
.m-sub{font-size:var(--m-fs-sub);line-height:var(--m-lh-sub)}
.m-stat{font-size:var(--m-fs-stat);line-height:1}
.m-lead{font-size:var(--m-fs-lead);color:var(--m-fg2);max-width:var(--m-measure-lead)}
.m-small{font-size:var(--m-fs-small);color:var(--m-fg2)}
.m-meta{font-size:var(--m-fs-meta);color:var(--m-fg2)}
.m-prose{max-width:var(--m-measure-prose)}
.m-mono{font-family:var(--m-fm);font-size:var(--m-fs-label);letter-spacing:var(--m-tr-mono)}
.m-kicker{font-family:var(--m-fm);font-size:var(--m-fs-label);color:var(--m-label);letter-spacing:var(--m-tr-label);text-transform:uppercase}

/* ---------- 5. Layout ---------- */
.m-wrap{max-width:var(--m-container);margin:0 auto;padding:0 var(--m-gutter)}
.m-pad{padding-top:var(--m-sec);padding-bottom:var(--m-sec)}
.m-inset{border-radius:var(--m-r-inset);margin:clamp(16px,2vw,24px) clamp(8px,1.6vw,24px) 0}
.m-split{display:grid;grid-template-columns:var(--m-split,1fr 1fr);gap:clamp(32px,5vw,72px);align-items:center}
.m-split--hero{--m-split:1.05fr .95fr;padding:clamp(28px,5vw,64px) 0 clamp(64px,8vw,110px)}
.m-split--wide-right{--m-split:.9fr 1.1fr}
.m-stack{display:flex;flex-direction:column;gap:var(--m-gap,22px)}
.m-stack--start{align-items:flex-start}
.m-stack--lg{--m-gap:24px}
.m-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
.m-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.m-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:760px}
.m-head--wide{max-width:none}
.m-mt-3{margin-top:var(--m-s-3)}
.m-mt-4{margin-top:var(--m-s-4)}
.m-mt-6{margin-top:var(--m-s-6)}
@media (max-width:960px){.m-split{grid-template-columns:1fr}}
@media (max-width:760px){.m-grid-3,.m-grid-2{grid-template-columns:1fr}}
/* Short cards (icon + one line, S06 «Wherever you type»): two columns on phones. The display face is wide
   («Сообщения» ≈ 7.5 × font-size), so the label grows with the screen: ~14 px at 320, ~18 px at 375, 20 px max */
@media (max-width:760px){.m-grid--2up{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.m-grid--2up>.m-card{padding:20px 12px}.m-grid--2up .m-h3{font-size:min(20px,calc(6.6vw - 7px));hyphens:manual;overflow-wrap:break-word}}

/* ---------- 6. Buttons and links ---------- */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 17px/1 var(--m-ft);padding:17px 28px;border-radius:var(--m-r-pill);border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color var(--m-dur-fast) var(--m-ease),color var(--m-dur-fast) var(--m-ease),transform var(--m-dur-fast) var(--m-ease)}
.m-btn svg{flex:none}
.m-btn--md{padding:11px 18px;font-size:15px;min-height:var(--m-tap)} /* 41 → 44 px (S06) */
.m-btn--sm{font:500 14px var(--m-ft);padding:9px 16px;border-width:1.5px}
.m-btn--primary{background:var(--m-voice);color:var(--m-ink);border-color:var(--m-ink)}
.m-btn--primary:hover,.m-btn--primary.is-hover{background:var(--m-voice-hover)}
.m-btn--secondary{background:transparent;color:var(--m-fg);border-color:var(--m-fg)}
.m-btn--secondary:hover,.m-btn--secondary.is-hover{background:var(--m-card2)} /* text colour stays: fg on card2 is in check.py */
.m-btn:active,.m-btn.is-active{transform:translateY(1px)}
.m-btn:disabled,.m-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.m-btn--primary:disabled,.m-btn--primary[aria-disabled="true"]{background:var(--m-voice)}
.m-btn--secondary:disabled,.m-btn--secondary[aria-disabled="true"]{background:transparent;color:var(--m-fg)}
.m-link{color:var(--m-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.m-link:hover,.m-link.is-hover{text-decoration-thickness:2px}
/* Platform buttons. No JS: both buttons and the QR are shown. JS sets html[data-m-platform]. */
html.m-js[data-m-platform="mac"] .m-only-iphone,html.m-js[data-m-platform="iphone"] .m-only-mac,html.m-js[data-m-platform="iphone"] .m-qr{display:none!important}
/* Mac vs everything else (S06, Pro button): JS and not Mac → hide .m-when-mac; Mac → hide .m-unless-mac. No JS: both. */
html.m-js:not([data-m-platform="mac"]) .m-when-mac,html.m-js[data-m-platform="mac"] .m-unless-mac{display:none!important}
.m-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:6px}
.m-cta__btns{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.m-cta__meta{font-size:var(--m-fs-meta);color:var(--m-fg2);padding-left:4px}

/* ---------- 7. Navigation ---------- */
.m-nav{position:sticky;top:0;z-index:40;padding:8px 0;pointer-events:none}
.m-nav__bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 12px;margin:0 -12px;border-radius:var(--m-r-pill);
  transition:padding var(--m-dur) var(--m-ease),background-color var(--m-dur) var(--m-ease),box-shadow var(--m-dur) var(--m-ease)}
.m-nav.is-stuck .m-nav__bar{background:var(--m-card);box-shadow:0 0 0 1px var(--m-line),0 10px 30px rgba(23,22,42,.10);padding:6px 6px 6px 12px}
.m-brand{display:flex;align-items:center;gap:10px;color:var(--m-fg);text-decoration:none;font:600 22px var(--m-fd);letter-spacing:var(--m-tr-display)}
.m-nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.m-nav__links>li>a{color:var(--m-fg2);text-decoration:none;font-size:var(--m-fs-small)}
.m-nav__links>li>a:hover,.m-nav__links>li>a[aria-current="page"]{color:var(--m-fg)}
.m-nav__right{display:flex;align-items:center;gap:14px}
.m-lang{font:500 13px var(--m-fm);color:var(--m-fg2);background:none;border:0;cursor:pointer;padding:6px;text-decoration:none}
.m-lang b,.m-lang strong{color:var(--m-fg);font-weight:500}
.m-nav__menu{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--m-ctl-line);background:transparent;color:var(--m-fg);cursor:pointer;align-items:center;justify-content:center;padding:0}
.m-nav__menu svg{display:block}
.m-nav__menu .m-ic-close,.m-nav.is-open .m-nav__menu .m-ic-menu{display:none}
.m-nav.is-open .m-nav__menu .m-ic-close{display:block}
@media (max-width:900px){
  .m-nav__bar{flex-wrap:wrap;position:relative}
  html.m-js .m-nav__menu{display:inline-flex}
  html.m-js .m-nav__links{display:none}
  html.m-js .m-nav.is-open .m-nav__links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-r-card);box-shadow:var(--m-shadow);padding:10px 12px}
  html.m-js .m-nav.is-open .m-nav__links>li>a{display:flex;align-items:center;min-height:48px;padding:0 12px;font-size:var(--m-fs-body);color:var(--m-fg)}
  html:not(.m-js) .m-nav__links{order:3;width:100%;flex-wrap:wrap;gap:4px 22px}
  html:not(.m-js) .m-nav__links>li>a{display:inline-flex;min-height:44px;align-items:center}
}
/* Platform CTA at the bottom of the open phone menu (same buttons as the hero) */
.m-nav__more{display:none}
@media (max-width:900px){html.m-js .m-nav.is-open .m-nav__more{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:8px;padding:16px 12px 8px;border-top:1px solid var(--m-line)}}
.m-nav__more .m-btn{width:100%}
@media (max-width:480px){.m-nav__cta{display:none}}

/* ---------- 8. Labels, badges, chips ---------- */
.m-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--m-fm);font-size:var(--m-fs-label);color:var(--m-fg);border:1.5px solid var(--m-line);border-radius:var(--m-r-pill);padding:6px 12px;white-space:nowrap}
.m-badge--pro{font-weight:500;line-height:normal;border-color:var(--m-fg);padding:5px 11px;align-self:flex-start}
.m-badge--fill{font-weight:500;line-height:normal;background:var(--m-card2);border-color:transparent;padding:6px 11px}
.m-chips{display:flex;flex-wrap:wrap;gap:10px}
.m-chip{font:500 15px var(--m-ft);color:var(--m-fg);background:transparent;border:1.5px solid var(--m-ctl-line);border-radius:var(--m-r-pill);padding:9px 15px;cursor:pointer;
  transition:background-color var(--m-dur-fast) var(--m-ease),color var(--m-dur-fast) var(--m-ease),border-color var(--m-dur-fast) var(--m-ease)}
.m-chip:hover,.m-chip.is-hover{border-color:var(--m-fg)}
.m-chip[aria-pressed="true"]{background:var(--m-fg);color:var(--m-bg);border-color:var(--m-fg)}
.m-chip:active,.m-chip.is-active{transform:translateY(1px)}
.m-chip:disabled,.m-chip[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.m-chip--more{cursor:default;color:var(--m-fg2);border-color:var(--m-line);border-style:dashed}
.m-chip--more:hover{border-color:var(--m-line)}

/* ---------- 9. Cards ---------- */
.m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-r-card);padding:28px;display:flex;flex-direction:column;gap:12px}
.m-card--raised{box-shadow:var(--m-shadow)}
.m-card__text{color:var(--m-fg2)}
.m-step__n{font:500 14px var(--m-fm);color:var(--m-label)}
.m-feature__ic{width:48px;height:48px;border-radius:16px;background:var(--m-card2);display:grid;place-items:center;color:var(--m-fg)}
.m-plan{gap:18px}
.m-plan--pro{border:2px solid var(--m-fg)}
.m-plan__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.m-plan__list li{display:flex;gap:10px;align-items:flex-start}
.m-plan__list svg{flex:none;margin-top:4px}
.m-plan .m-btn{align-self:flex-start;margin-top:auto}
.m-scenario__said{font-size:var(--m-fs-ui);line-height:var(--m-lh-ui);background:var(--m-card2);border-radius:var(--m-r-md);border-bottom-left-radius:6px;padding:11px 15px;align-self:flex-start}
.m-quote{gap:18px}
.m-quote__text{font-size:var(--m-fs-lead);line-height:1.45;margin:0}
.m-quote__who{font-size:var(--m-fs-meta);color:var(--m-fg2)}

/* ---------- 10. Mark and equalizer (the voice gradient lives only here) ---------- */
.m-mark{flex:none;display:block}
.m-mark rect{transform-box:fill-box;transform-origin:50% 100%;transition:transform 140ms ease}
.m-mark.is-settle rect{transition:transform 550ms var(--m-ease-spring)}
/* A live mark is drawn with five full bars; CSS folds them into the M until JS takes over. */
.m-mark--live rect:nth-of-type(2),.m-mark--live rect:nth-of-type(4){transform:scaleY(.68)}
.m-mark--live rect:nth-of-type(3){transform:scaleY(.44)}
.m-eq{display:inline-flex;gap:3px;align-items:flex-end;height:20px}
.m-eq i{width:4px;border-radius:2px;background:var(--m-grad-voice);height:30%}
.m-eq.is-on i{animation:m-eq .9s ease-in-out infinite}
.m-eq i:nth-child(2){animation-delay:-.2s}.m-eq i:nth-child(3){animation-delay:-.45s}.m-eq i:nth-child(4){animation-delay:-.1s}.m-eq i:nth-child(5){animation-delay:-.6s}
@keyframes m-eq{0%,100%{height:25%}50%{height:100%}}

/* ---------- 11. Chat mockup ---------- */
.m-chat{background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-r-card);box-shadow:var(--m-shadow);overflow:hidden}
.m-chat__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--m-line)}
.m-ava{width:36px;height:36px;border-radius:50%;background:var(--m-card2);color:var(--m-fg);display:grid;place-items:center;font:600 15px var(--m-ft);flex:none}
.m-chat__name{font-weight:600}
.m-chat__sub{font-size:var(--m-fs-label);color:var(--m-fg2)}
.m-chat__body{padding:22px 20px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.m-chat__body--end{min-height:190px;justify-content:flex-end}
.m-bubble{max-width:82%;padding:11px 15px;border-radius:var(--m-r-md);font-size:var(--m-fs-ui);line-height:var(--m-lh-ui)}
.m-bubble--in{background:var(--m-card2);color:var(--m-fg);border-bottom-left-radius:6px;align-self:flex-start}
.m-bubble--out{background:var(--m-out-bg);color:var(--m-out-fg);border-bottom-right-radius:6px;align-self:flex-end}
.m-sent{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:86%}
.m-sent .m-bubble{max-width:100%}
.m-sent__cap{font:500 12px var(--m-fm);color:var(--m-label)}
.m-compose{margin:0 16px;border:1.5px solid var(--m-line);border-radius:var(--m-r-md);padding:14px 16px;min-height:84px;font-size:var(--m-fs-body);line-height:1.45}
.m-caret{display:inline-block;width:2px;height:1.1em;background:var(--m-fg);vertical-align:-3px;margin-left:1px;animation:m-blink 1s steps(1) infinite}
@keyframes m-blink{50%{opacity:0}}
.m-chat__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px 20px}
.m-chat__bar-l{display:flex;align-items:center;gap:14px}
.m-status{font:500 13px var(--m-fm);color:var(--m-fg2)}
.m-speak{margin:0 16px 18px;border-radius:22px;background:var(--m-card2);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.m-speak__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-speak__text{font-size:18px;line-height:1.5;min-height:3em;color:var(--m-fg)}
/* Filler words: highlighted in coral (Ink on Voice 5.78:1), then folded away */
.m-fill{border-radius:6px;transition:background-color var(--m-dur-slow),color var(--m-dur-slow)}
.m-fill.is-hl{background:var(--m-voice);color:var(--m-ink);padding:0 3px}
.m-fill.is-gone{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;white-space:nowrap;padding:0;transition:max-width .5s,opacity .35s,padding .5s}
.m-fill.is-struck{text-decoration:line-through}

/* ---------- 12. Split-flap ---------- */
.m-flap{font-size:var(--m-fs-lead);line-height:1.5}
.m-flap__w{white-space:nowrap}
.m-flap__t{display:inline-block}
.m-flap__t.is-flip{animation:m-flip 90ms linear}
@keyframes m-flip{0%{transform:rotateX(80deg)}100%{transform:rotateX(0)}}

/* ---------- 13. Speed race ---------- */
.m-race{display:grid;grid-template-columns:1fr 2.1fr;gap:20px;align-items:stretch}
.m-lane{border-radius:var(--m-r-card);padding:26px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--m-line);background:var(--m-card)}
.m-lane--molvi{background:var(--m-card2)}
.m-lane__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-lane__who{display:flex;align-items:center;gap:10px;font-weight:600}
.m-lane__speed{font:600 var(--m-fs-stat)/1 var(--m-fd)}
.m-lane__speed small{font:500 14px var(--m-ft);color:var(--m-fg2);margin-left:6px;letter-spacing:0}
.m-lane__text{font-size:var(--m-fs-body);line-height:1.5;min-height:7.5em;color:var(--m-fg)}
.m-bar{height:6px;border-radius:6px;background:var(--m-line);overflow:hidden}
.m-bar i{display:block;height:100%;width:0;background:var(--m-fg);border-radius:6px}
html:not(.m-js) .m-lane--kbd .m-bar i{width:33.3%}
html:not(.m-js) .m-lane--molvi .m-bar i{width:100%}
/* No-JS keyboard bar for other ratios (the build sets html[data-m-ratio]) */
html:not(.m-js)[data-m-ratio="2"] .m-lane--kbd .m-bar i{width:50%}
html:not(.m-js)[data-m-ratio="4"] .m-lane--kbd .m-bar i{width:25%}
html:not(.m-js)[data-m-ratio="5"] .m-lane--kbd .m-bar i{width:20%}
.m-race-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:22px}
@media (max-width:760px){.m-race{grid-template-columns:1fr}.m-lane--kbd{width:78%}}

/* ---------- 14. Footnote and note plate ---------- */
.m-fnref{color:inherit;text-decoration:none;font-size:.55em;vertical-align:super;margin-left:2px}
.m-fn{display:flex;flex-direction:column;gap:4px;font-size:var(--m-fs-small);color:var(--m-fg2)}
.m-note{margin-top:28px;padding:18px 22px;border-radius:var(--m-r-md);background:var(--m-card2);font-size:var(--m-fs-body);line-height:1.5;max-width:860px}
.m-note a{white-space:nowrap}

/* ---------- 15. Switch ---------- */
.m-switch{display:inline-flex;align-items:center;gap:14px;background:none;border:0;color:var(--m-fg);font:600 17px var(--m-ft);cursor:pointer;padding:0}
.m-switch__track{flex:none;width:58px;height:34px;border-radius:var(--m-r-pill);background:var(--m-card2);border:1.5px solid var(--m-ctl-line);position:relative;transition:background-color var(--m-dur) var(--m-ease),border-color var(--m-dur) var(--m-ease)}
.m-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:var(--m-fg);transition:transform var(--m-dur) var(--m-ease),background-color var(--m-dur) var(--m-ease)}
.m-switch[aria-checked="true"] .m-switch__track{background:var(--m-voice);border-color:var(--m-sw-on-line)}
.m-switch[aria-checked="true"] .m-switch__track::after{transform:translateX(24px);background:var(--m-ink)}
.m-switch:disabled,.m-switch[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.m-live{font:500 14px var(--m-fm);color:var(--m-fg)}

/* ---------- 16. Offline scheme ---------- */
.m-flow-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:var(--m-r-card);padding:22px;display:flex;flex-direction:column;gap:22px}
.m-sbar{display:flex;justify-content:space-between;align-items:center;font:500 13px var(--m-fm);color:var(--m-fg2)}
.m-sbar__ic{display:flex;gap:12px;align-items:center}
.m-sbar__ic svg{display:block}
.m-net{transition:opacity var(--m-dur) var(--m-ease)}
.is-air .m-net{opacity:.28}
.m-plane{display:none}
.is-air .m-plane{display:inline}
.m-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:8px}
.m-node{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:var(--m-fs-meta);color:var(--m-fg2);min-width:74px}
.m-node__ic{width:64px;height:64px;border-radius:var(--m-r-md);background:var(--m-card2);display:grid;place-items:center;color:var(--m-fg)}
.m-node__aa{font:600 22px var(--m-fd)}
.m-pipe{height:2px;background:var(--m-line);position:relative;overflow:hidden;border-radius:2px}
.m-pipe i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--m-fg);animation:m-dot 1.6s linear infinite}
.m-pipe i:nth-child(2){animation-delay:-.8s}
@keyframes m-dot{from{left:-6px}to{left:100%}}
.m-cloud{display:flex;align-items:center;gap:10px;font-size:var(--m-fs-meta);color:var(--m-fg2);border-top:1px dashed var(--m-line);padding-top:16px}
.m-mini{border:1.5px solid var(--m-line);border-radius:18px;padding:14px 16px;min-height:76px;font-size:var(--m-fs-ui);line-height:1.45}
.m-aside{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--m-line);padding-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px)}
.m-aside__t{display:flex;flex-direction:column;gap:14px;color:var(--m-fg2);max-width:var(--m-measure-prose)}
.m-aside__t>:first-child{color:var(--m-fg)}
@media (max-width:960px){.m-aside{grid-template-columns:1fr}}
@media (max-width:420px){.m-node{min-width:60px;font-size:13px}.m-node__ic{width:52px;height:52px;border-radius:16px}}

/* ---------- 17. FAQ ---------- */
.m-faq{border-top:1px solid var(--m-line);max-width:860px}
.m-faq__item{border-bottom:1px solid var(--m-line)}
.m-faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:18px;line-height:1.35;border-radius:var(--m-r-sm)}
.m-faq__q::-webkit-details-marker{display:none}
.m-faq__q::marker{content:""}
.m-faq__q:hover{color:var(--m-fg)}
.m-faq__ic{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--m-ctl-line);display:grid;place-items:center;transition:transform var(--m-dur) var(--m-ease)}
.m-faq__item[open] .m-faq__ic{transform:rotate(45deg)}
.m-faq__a{color:var(--m-fg2);padding:0 52px 22px 0;max-width:var(--m-measure-prose)}

/* ---------- 18. QR block ---------- */
.m-qr{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border:1.5px solid var(--m-line);border-radius:18px;background:var(--m-card)}
.m-qr__svg{width:84px;height:84px;display:block;border-radius:var(--m-r-sm);flex:none}
.m-qr__t{display:flex;flex-direction:column;gap:2px}
.m-qr__t b{font-weight:600;font-size:var(--m-fs-small)}
.m-qr__t span{font-size:var(--m-fs-label);color:var(--m-fg2)}
@media (max-width:760px){.m-qr{display:none!important}}

/* ---------- 19. Footer ---------- */
.m-foot{padding-top:48px;padding-bottom:64px;font-size:var(--m-fs-meta);color:var(--m-fg2)}
.m-foot p+p{margin-top:6px}
.m-foot__links{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0 0 14px;padding:0}
.m-foot__links a{color:var(--m-fg);display:inline-flex;align-items:center;min-height:44px}

/* ---------- 20. Skip link, announcement bar, tabs (S06) ---------- */
.m-skip{position:absolute;left:12px;top:-200px;z-index:60;background:var(--m-card);color:var(--m-fg);padding:12px 18px;border-radius:var(--m-r-pill);font-weight:600;box-shadow:var(--m-shadow)}
.m-skip:focus{top:12px}
.m-announce[hidden]{display:none}
.m-announce{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:8px var(--m-gutter);font-size:var(--m-fs-small);text-align:center}
.m-announce a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* [data-m-tabs]: chips with aria-controls switch panels. No JS: chips hidden, every panel shown. */
html:not(.m-js) [data-m-tabs] .m-chips{display:none}
[data-m-tabs] [hidden]{display:none!important}
.m-said{display:flex;flex-direction:column;gap:10px}
.m-said .m-bubble{max-width:100%}
/* ---------- 21. Prose: legal and inner pages (h1 = --m-fs-h1-page) ---------- */
.m-prose>*+*{margin-top:16px}
.m-prose h1{font:600 var(--m-fs-h1-page)/var(--m-lh-display) var(--m-fd);letter-spacing:var(--m-tr-display);margin-bottom:8px}
.m-prose h2{font:600 var(--m-fs-sub)/var(--m-lh-sub) var(--m-fd);letter-spacing:var(--m-tr-display);margin-top:48px}
.m-prose h3{font:500 var(--m-fs-h3)/1.3 var(--m-fd);margin-top:28px}
.m-prose h4{font-size:var(--m-fs-body);margin-top:24px}
.m-prose h2+*,.m-prose h3+*{margin-top:12px}
.m-prose :is(ul,ol){padding-left:1.4em}
.m-prose li+li{margin-top:6px}
.m-prose a{text-decoration-thickness:1px;text-underline-offset:.18em}
.m-prose code{font:var(--m-fs-meta) var(--m-fm);background:var(--m-card2);border-radius:6px;padding:1px 6px}
.m-prose pre{background:var(--m-card2);border-radius:var(--m-r-sm);padding:14px 16px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.m-prose pre code{background:none;padding:0}
.m-prose hr{border:0;border-top:1px solid var(--m-line);margin:40px 0}
.m-prose dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px}
.m-prose dt{font-weight:600}
.m-prose dd{margin:0;color:var(--m-fg2)}
@media (max-width:560px){.m-prose dl{grid-template-columns:1fr;gap:2px}.m-prose dd+dt{margin-top:12px}}
.m-prose .m-cta{margin-top:28px}
/* ---------- 22. Motion off: static frames ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .m-pipe i{display:none}
}
html.m-static *,html.m-static *::before,html.m-static *::after{animation:none!important;transition:none!important}
html.m-static .m-pipe i{display:none}