/* WaMover site layer — built on tokens.css + wamover-web.css. Only uses design tokens for colour. */

/* ---------- Compatibility fallbacks (Safari 14–16, older Firefox) ---------- */
.wm-header { background: var(--paper); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .wm-header { background: color-mix(in srgb, var(--paper) 92%, transparent); }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.wm-root { overflow-x: hidden; }
@supports (overflow: clip) { .wm-root { overflow-x: clip; } }
.wm-root img, .wm-root svg { max-width: 100%; }
.wm-root code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--canvas); padding: .1em .35em; border-radius: var(--radius-4); }
.wm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Skip link ---------- */
.wm-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--blue); border-radius: var(--radius-8); }
.wm-root a.wm-skip { color: var(--on-blue); }
.wm-skip:focus { top: 12px; }

/* ---------- Header ---------- */
.wm-header { z-index: 30; }
.wm-header-actions { display: flex; align-items: center; gap: 8px; }
.wm-btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.wm-nav { gap: 26px; }
.wm-menu { position: relative; display: none; }
.wm-menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-10); cursor: pointer; color: var(--ink); }
.wm-menu summary::-webkit-details-marker { display: none; }
.wm-menu summary:hover { background: var(--canvas); }
.wm-menu summary .wm-icon { width: 24px; height: 24px; }
.wm-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; display: grid; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-14); box-shadow: var(--shadow-menu); }
.wm-root .wm-menu-panel a { display: block; padding: 12px 14px; border-radius: var(--radius-8); color: var(--ink); text-decoration: none; }
.wm-root .wm-menu-panel a:hover, .wm-root .wm-menu-panel a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 960px) { .wm-nav { display: none; } .wm-menu { display: block; } }
@media (max-width: 400px) { .wm-brand img { width: 118px; } }

/* ---------- Hero ---------- */
.wm-hero-section { padding-block: clamp(48px, 7vw, 96px); }
.wm-hero-sm { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.wm-checks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wm-checks li { display: inline-flex; align-items: center; gap: 6px; }
.wm-checks .wm-icon { width: 16px; height: 16px; color: var(--success); }
.wm-measure { max-width: 46rem; }
.wm-center { text-align: center; justify-items: center; }
.wm-center .wm-actions, .wm-center-actions { justify-content: center; }
.wm-center-self { justify-self: center; }
@media (max-width: 879px) {
  .wm-hero-section .wm-logo-stage { width: min(62%, 260px); order: -1; }
}
@media (max-width: 520px) {
  .wm-hero-section .wm-actions .wm-btn, .wm-final-cta .wm-actions .wm-btn { width: 100%; }
}

/* ---------- Direction cards ---------- */
.wm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.wm-root a.wm-card { color: var(--ink); text-decoration: none; transition: border-color .16s, transform .16s; }
.wm-root a.wm-card:hover { border-color: var(--blue); }
.wm-direction { display: grid; gap: 12px; padding: 30px; }
.wm-direction-flow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: .875rem; }
.wm-direction-flow .wm-icon { width: 18px; height: 18px; }
.wm-link-more { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 600; font-size: .9375rem; }
.wm-link-more .wm-icon { width: 16px; height: 16px; }

/* Direction page art */
.wm-direction-art { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 24px); }
.wm-phone { display: grid; place-items: center; gap: 14px; width: clamp(96px, 16vw, 150px); aspect-ratio: 9 / 18; border: 3px solid var(--device-frame); border-radius: clamp(18px, 3vw, 28px); background: var(--paper); color: var(--muted); font-weight: 600; padding: 18px 8px; align-content: center; }
.wm-phone .wm-icon { width: 34px; height: 34px; color: var(--faint); }
.wm-phone-new .wm-icon { color: var(--blue); }
.wm-direction-arrow { display: grid; justify-items: center; gap: 6px; color: var(--blue); font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.wm-direction-arrow .wm-icon { width: 32px; height: 32px; }
@media (max-width: 879px) { .wm-direction-art { display: none; } }

/* ---------- Steps list ---------- */
.wm-steps { list-style: none; padding: 0; display: grid; gap: 14px; }
.wm-steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 22px 24px; }
.wm-steps .wm-h3 { margin-bottom: 4px; }

/* ---------- Comparison table & tables ---------- */
.wm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-14); background: var(--paper); }
.wm-root table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.wm-root th, .wm-root td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.wm-root thead th { background: var(--canvas); font-weight: 650; }
.wm-root tbody tr:last-child > * { border-bottom: 0; }
.wm-root tbody th { font-weight: 600; }
.wm-compare thead th:nth-child(2) { color: var(--blue); }
.wm-compare td:nth-child(2) { background: var(--blue-soft); }
.wm-compare .yes .wm-icon { width: 16px; height: 16px; color: var(--success); vertical-align: -3px; margin-right: 4px; }
.wm-compare .no { color: var(--muted); }

/* ---------- Lists with icons ---------- */
.wm-list-check { list-style: none; display: grid; gap: 18px; padding: 26px 28px; margin: 0; }
.wm-list-check.wm-plain { padding: 0; }
.wm-list-check li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.wm-list-check .wm-icon { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }
.wm-feature { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.wm-feature > .wm-icon { width: 28px; height: 28px; color: var(--blue); padding: 10px; box-sizing: content-box; background: var(--blue-soft); border-radius: var(--radius-12); }
.wm-feature .wm-h3 { margin-bottom: 4px; }

/* ---------- FAQ accordion ---------- */
.wm-faq { display: grid; gap: 10px; }
.wm-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-14); }
.wm-section.canvas .wm-faq details { border-color: transparent; }
.wm-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 600; min-height: 44px; }
.wm-faq summary::-webkit-details-marker { display: none; }
.wm-faq summary .wm-icon { transition: transform .16s; color: var(--muted); }
.wm-faq details[open] summary .wm-icon { transform: rotate(90deg); }
.wm-faq-a { padding: 0 22px 20px; color: var(--muted); line-height: 1.7; }

/* ---------- Answer box / note / CTA box ---------- */
.wm-answer { border-left: 4px solid var(--blue); background: var(--blue-soft); padding: 18px 22px; border-radius: 0 var(--radius-12) var(--radius-12) 0; }
.wm-answer p:last-child { margin: 0; }
.wm-note { background: var(--alert-bg); color: var(--ink); padding: 16px 20px; border-radius: var(--radius-12); margin: 1.4em 0; }
.wm-note p { margin: 0; }
.wm-cta-box { display: grid; gap: 14px; padding: 28px; margin: 2em 0; background: var(--hero-surface); border-radius: var(--radius-16); }
.wm-cta-box .wm-h2 { margin: 0; }
.wm-cta-box p { margin: 0; }

/* ---------- Footer ---------- */
.wm-footer-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.wm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wm-root .wm-footer a { color: var(--muted); text-decoration: none; }
.wm-root .wm-footer a:hover { color: var(--blue); }
.wm-footer-h { font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px !important; }
.wm-footer-brand p { max-width: 30ch; }
.wm-footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
@media (max-width: 760px) { .wm-footer-grid { grid-template-columns: 1fr 1fr; } .wm-footer-brand { grid-column: 1 / -1; } }

/* ---------- Breadcrumbs ---------- */
.wm-breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--muted); }
.wm-breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.wm-root .wm-breadcrumbs a { color: var(--muted); text-decoration: none; }
.wm-root .wm-breadcrumbs a:hover { color: var(--blue); }

/* ---------- Download page ---------- */
.wm-dl-card { display: grid; gap: 18px; }
.wm-dl-head { display: flex; gap: 14px; align-items: center; }
.wm-specs { display: grid; gap: 10px; margin: 0; }
.wm-specs div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9375rem; }
.wm-specs dt { color: var(--muted); }
.wm-specs dd { margin: 0; min-width: 0; }
.wm-hash { word-break: break-all; font-size: .75rem !important; }
.wm-contact-card { display: flex; gap: 18px; align-items: center; margin-bottom: 1.5em; }

/* ---------- Prose (articles, legal, guide) ---------- */
.wm-prose-width { max-width: calc(760px + 2 * var(--wm-gutter)); }
.wm-prose { font-size: 1.0625rem; line-height: 1.75; min-width: 0; }
.wm-root .wm-prose > * + * { margin-top: 1.1em; }
.wm-root .wm-prose h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.03em; margin-top: 2em; }
.wm-root .wm-prose h3 { font-size: 1.15rem; line-height: 1.4; font-weight: 620; margin-top: 1.6em; }
.wm-root .wm-prose h4 { font-size: 1rem; font-weight: 620; margin-top: 1.4em; }
.wm-prose ul, .wm-prose ol { padding-left: 1.3em; }
.wm-prose li + li { margin-top: .4em; }
.wm-prose blockquote { margin-inline: 0; padding: 4px 20px; border-left: 3px solid var(--line); color: var(--muted); }
.wm-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.wm-prose img { border-radius: var(--radius-12); border: 1px solid var(--line); }
.wm-prose .wm-table-wrap { margin-top: 1.4em; }
.wm-prose table { font-size: .9375rem; }

/* ---------- Article layout ---------- */
.wm-article-head { padding-block: clamp(40px, 6vw, 72px); }
.wm-article-title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.wm-article-grid { display: grid; gap: 48px; padding-block: 48px 80px; grid-template-columns: minmax(0, 1fr); max-width: calc(1080px + 2 * var(--wm-gutter)); }
@media (min-width: 1000px) { .wm-article-grid { grid-template-columns: 220px minmax(0, 760px); } }
.wm-toc { font-size: .875rem; }
.wm-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; border-left: 2px solid var(--line); }
.wm-toc li { padding-left: 14px; }
.wm-root .wm-toc a { color: var(--muted); text-decoration: none; }
.wm-root .wm-toc a:hover { color: var(--blue); }
@media (min-width: 1000px) { .wm-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; } }
@media (max-width: 999px) { .wm-toc { background: var(--canvas); padding: 18px 20px; border-radius: var(--radius-14); } }
.wm-author { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-top: 28px; margin-top: 2.5em; border-top: 1px solid var(--line); }
.wm-author img { border-radius: 50%; border: 1px solid var(--line); }
.wm-author p { margin: 0 0 4px; }
.wm-post-card { display: grid; gap: 10px; align-content: start; }

/* ---------- Mobile "send to computer" sheet ---------- */
.wm-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; background: var(--scrim); padding: 12px; }
.wm-sheet[hidden] { display: none; }
.wm-sheet-card { position: relative; width: min(100%, 460px); display: grid; gap: 12px; padding: 28px 22px calc(22px + env(safe-area-inset-bottom)); background: var(--paper); border-radius: var(--radius-18); box-shadow: var(--shadow-dialog); }
.wm-sheet-card p { margin: 0; }
.wm-sheet-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-10); cursor: pointer; }
.wm-sheet-actions { display: grid; gap: 10px; margin-top: 6px; }
.wm-sheet-actions .wm-btn { width: 100%; }
.wm-sheet-url { color: var(--ink); word-break: break-all; }
@media (min-width: 700px) { .wm-sheet { align-items: center; } }