/* MoveConsole — marketing home (v2)
   Visual language follows clay.com: white page, warm "oat" containers, 48px boxes,
   12px buttons and pills, tight display type. Brand accent is MoveConsole blue. */

/* the fonts, served from this site (assets/fonts, latin + latin-ext, variable weights; Google Fonts originals):
   no third-party request before the first paint, and figtree-latin and geist-latin are preloaded by every page
   (found only through this file, Geist started after all the CSS and held the first paint back) */
@font-face{ font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  /* type — swap "Figtree" for a licensed Roobert by putting it first in --font */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* neutrals */
  --ink: #111317;
  --ink-2: #2a2e35;
  --muted: #6b6f78;
  --line: rgba(17, 19, 23, .08);
  --paper: #ffffff;
  --oat: #f4f3f0;
  --oat-2: #eae8e2;
  --cream: #fdfcf9;

  /* brand */
  --blue: #186ff2;
  --blue-600: #0e5bd6;
  --blue-100: #dcebff;
  --blue-50: #eef5ff;
  --sky: #8fc3ff;
  --navy: #061a3f;
  --navy-2: #0b2b62;

  /* motion (same curves as clay.com) */
  --ease: cubic-bezier(.165, .84, .44, 1);
  --ease-btn: cubic-bezier(.075, .82, .165, 1);

  /* shape + layout */
  --r-btn: 12px;
  --r-card: 24px;
  --r-box: 48px;
  --gutter: clamp(16px, 2.6vw, 40px);
  --maxw: 1440px;
  --hdr: 103px;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg{ display: block; max-width: 100%; }
/* the dot of an "i", "!" or "?" is a zero-length segment (M12 8h.01) that only a round line cap draws */
path[d*="h.01"], path[d*="v.01"]{ stroke-linecap: round; }
a{ color: inherit; text-decoration: none; }
a[data-soon]{ cursor: pointer; }   /* a page still to come: no href, a click says so (site.js) */
button{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.ico{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap{ width: calc(100% - 2 * var(--gutter)); max-width: var(--maxw); margin-inline: auto; }

/* ---------- type ---------- */
.h1, .h2, .h3, .h4{ margin: 0; font-family: var(--font); text-wrap: balance; color: inherit; }
.h1{ font-size: clamp(48px, 6.6vw, 96px); line-height: 1; font-weight: 575; letter-spacing: -.04em; }
.h2{ font-size: clamp(38px, 5.1vw, 72px); line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.h3{ font-size: clamp(32px, 3.4vw, 48px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.h4{ font-size: clamp(30px, 3vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.lead{ font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.005em; margin: 0; text-wrap: pretty; }
.sub{ font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.body{ font-size: 16px; line-height: 1.4; margin: 0; text-wrap: pretty; }
.tone{ color: var(--accent, var(--blue)); }

/* clay-style eyebrow: solid pill trailed by fading discs. The pill takes the theme's deeper shade (--accent-600)
   where there is one: white 12px text needs 4.5:1, and teal, sky, coral and gold only reach that a step darker */
.eyebrow{ display: inline-flex; align-items: center; height: 32px; }
.eyebrow b{
  position: relative; z-index: 3; display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--accent-600, var(--accent, var(--blue))); color: #fff;
  font: 600 12px/1 var(--font); letter-spacing: .25em; text-transform: uppercase;
}
.eyebrow i{ width: 32px; height: 32px; margin-left: -17px; border-radius: 50%; background: var(--accent-600, var(--accent, var(--blue))); }
.eyebrow i:nth-of-type(1){ opacity: .45; z-index: 2; }
.eyebrow i:nth-of-type(2){ opacity: .25; z-index: 1; }
.eyebrow i:nth-of-type(3){ opacity: .12; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 8px 16px; border: 0; border-radius: var(--r-btn);
  font: 500 16px/24px var(--font); letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  background: var(--oat); color: var(--ink);
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn), transform .3s var(--ease-btn);
}
.btn .ico{ width: 16px; height: 16px; stroke-width: 2; transition: transform .35s var(--ease); }
.btn:hover .ico{ transform: translateX(3px); }
.btn:active{ transform: scale(.98); }
.btn-lg{ height: 47px; padding: 9px 18px; gap: 9px; font-size: 18px; line-height: 27px; letter-spacing: -.01em; }
.btn-sm{ height: 38px; padding: 8px 16px; font-size: 14px; line-height: 21px; }
.btn-oat:hover{ background: var(--oat-2); }
.btn-dark{ background: #000; color: #fff; }
.btn-dark:hover{ background: #2b2d31; }
.btn-white{ background: #fff; color: #000; }
.btn-white:hover{ background: var(--oat); }
.btn-blue{ background: var(--blue); color: #fff; }
.btn-blue:hover{ background: var(--blue-600); }
.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: var(--accent-600, var(--accent)); filter: saturate(1.1); }
.btn-plain{ background: #fff; color: var(--accent-ink, var(--ink)); }
.btn-plain:hover{ background: rgba(255, 255, 255, .7); }
.link{ display: inline-flex; align-items: center; gap: 6px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link .ico{ width: 15px; height: 15px; stroke-width: 2; transition: transform .35s var(--ease); }
.link:hover .ico{ transform: translateX(3px); }

/* ---------- header ---------- */
.hdr{ position: fixed; inset: 0 0 auto; z-index: 60; }
.announce{ height: 44px; background: var(--blue); color: #fff; }
.announce .wrap{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.announce-msg{ display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 16px; }
.announce-msg span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-tag{ flex: none; font: 700 11px/1 var(--font); letter-spacing: .12em; padding: 6px 8px; border-radius: 7px; background: #fff; color: var(--blue); }
.announce-cta{ flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.announce-cta .ico{ width: 14px; height: 14px; stroke-width: 2.2; transition: transform .35s var(--ease); }
.announce-cta:hover .ico{ transform: translateX(3px); }

.nav{
  position: relative; display: flex; align-items: center; gap: 28px; height: 59px; padding: 8px 24px;
  background: #fff; border-radius: 0 0 24px 24px;
  /* the corners round back only once a closing mega sheet has folded away */
  transition: box-shadow .4s var(--ease), border-radius .15s var(--ease) .4s;
}
.hdr.is-scrolled .nav{ box-shadow: 0 10px 30px -18px rgba(6, 26, 63, .35); }
.brand{ display: inline-flex; align-items: center; color: var(--ink); }
/* the mark fills the logo's box edge to edge: not clipped to it, or a display at 125% loses a row of pixels off its top and bottom */
.brand svg, #logo, #mark{ overflow: visible; }
.brand svg{ width: 158px; height: 23px; }
.nav-links{ display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-item{ position: static; }
.nav-btn{
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; font-size: 16px; color: var(--ink); cursor: pointer; transition: background-color .3s var(--ease-btn);
}
.nav-btn:hover, .nav-item.is-open .nav-btn{ background: var(--oat); }
.nav-btn .chev{ width: 14px; height: 14px; stroke-width: 2; opacity: .55; transition: transform .35s var(--ease); }
.nav-item.is-open .chev{ transform: rotate(180deg); }
.nav-right{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kbd{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 12.8px/1 var(--font); cursor: pointer; }
.kbd:hover{ background: var(--oat); color: var(--ink); }
.kbd .ico{ width: 15px; height: 15px; }
.nav-sep{ width: 1px; height: 18px; background: var(--line); }
.nav-login{ font-size: 14px; font-weight: 500; padding: 0 6px; white-space: nowrap; }
/* five menus need the room on small laptops: the shortcut button goes first */
@media (max-width: 1240px){
  .nav{ gap: 18px; }
  .kbd, .nav-sep{ display: none; }
}
.nav-login:hover{ color: var(--blue); }
.burger{ display: none; width: 40px; height: 38px; border: 0; border-radius: 10px; background: var(--oat); cursor: pointer; align-items: center; justify-content: center; }

/* phone menu: one accordion per mega menu, built by site.js from the mega menus */
.mnav{
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); gap: 0; padding: 4px 14px 14px;
  max-height: calc(100dvh - var(--hdr) - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .05);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .25s;
}
.hdr.menu-open .mnav{ opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.mnav-sec{ border-bottom: 1px solid var(--line); }
.mnav-sec summary{ display: flex; align-items: center; justify-content: space-between; padding: 15px 6px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.mnav-sec summary::-webkit-details-marker{ display: none; }
.mnav-sec summary .ico{ width: 16px; height: 16px; opacity: .5; transition: transform .3s var(--ease); }
.mnav-sec[open] summary .ico{ transform: rotate(180deg); }
.mnav-body{ display: grid; gap: 1px; padding: 0 0 12px; }
.mnav-body a{ display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; font-size: 15.5px; color: var(--ink-2); }
.mnav-body a:active{ background: var(--oat); }
.mnav-body .hl-ic{ width: 30px; height: 30px; border-radius: 9px; }
.mnav-body .hl-ic .ico{ width: 16px; height: 16px; }
.mnav-h{ display: block; padding: 12px 6px 4px; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mnav-link{ display: flex; align-items: center; padding: 15px 6px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.mnav-ctas{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

/* ---------- mega menus ----------
   The header opens into one white sheet, the way clay.com's does. Each panel lives in its
   own nav item; .mega-bg is the shared sheet under them. site.js sets --mh on .nav to the
   open panel's height, so the sheet grows, shrinks and morphs between menus, and every
   panel is clipped to it while it moves. */
.mega-bg{
  position: absolute; left: 0; right: 0; top: 100%; height: var(--mh, 0px); pointer-events: none;
  background: #fff; border-radius: 0 0 24px 24px;
  box-shadow: inset 0 1px 0 var(--line), 0 40px 80px -36px rgba(6, 26, 63, .42);
  opacity: 0; transition: height .5s var(--ease), opacity .2s var(--ease) .3s;
}
.hdr.mega-open .mega-bg{ opacity: 1; transition: height .5s var(--ease), opacity .1s var(--ease); }
.hdr.mega-open .nav{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: box-shadow .4s var(--ease), border-radius .1s var(--ease); }
.mega{
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1; padding: 26px 28px 24px;
  clip-path: inset(0 0 calc(100% - var(--mh, 0px)) 0);
  opacity: 0; visibility: hidden;
  /* a panel that is fading out must not catch the pointer: it would reopen its own menu */
  pointer-events: none;
  transition: clip-path .5s var(--ease), opacity .15s var(--ease), visibility 0s linear .5s;
}
.nav-item.is-open .mega{ opacity: 1; visibility: visible; pointer-events: auto; transition: clip-path .5s var(--ease), opacity .3s var(--ease) .06s; }
.mega > *{ transform: translateY(-8px); transition: transform .5s var(--ease); }
.nav-item.is-open .mega > *{ transform: none; }
.mega-k{ display: block; margin: 0 0 12px; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hl-ic{ flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn); }
/* MovePilot is marked with our logo, blue, wherever an icon stands by its name (owner, Nov 10 2026: «слева от Move Pilot
   у нас везде должна быть наша иконка логотипа синяя»): the mark keeps its own colours; .is-mark makes it the tile */
.ico.mp-mark{ fill: none; stroke: none; }
.is-mark{ background: none !important; }
.is-mark .ico.mp-mark{ width: 100%; height: 100%; }
.mp-ai .hl-ic .ico.mp-mark{ width: 22px; height: 21px; }

/* Product: four stage columns (Quote → Book → Move → Get paid), what runs across every
   job beside them, and the platform underneath */
.mega-product{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "stages side" "plat plat"; gap: 18px 32px; }
.mp-stages{ grid-area: stages; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.mp-col .mega-k{ margin-bottom: 8px; color: var(--c); }
.mp-hub{ display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px 6px; border-radius: 12px; transition: background-color .25s var(--ease-btn); }
.mp-hub b{ font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.mp-hub .hl-ic{ width: 32px; height: 32px; }
.mp-hub .hl-ic .ico{ width: 17px; height: 17px; }
.mp-go{ width: 15px; height: 15px; margin-left: auto; color: var(--c); opacity: 0; transform: translateX(-4px); transition: opacity .25s var(--ease-btn), transform .35s var(--ease); }
.mp-hub:hover{ background: color-mix(in srgb, var(--c) 7%, #fff); }
.mp-hub:hover .hl-ic{ background: var(--c); color: #fff; }
.mp-hub:hover .mp-go{ opacity: 1; transform: none; }
.mp-feats{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mp-feats a{ display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-inline: -8px; border-radius: 9px; font-size: 14.5px; line-height: 1.25; color: var(--ink-2); transition: background-color .2s var(--ease-btn), color .2s var(--ease-btn); }
.mp-feats .ico{ width: 16px; height: 16px; color: var(--c); opacity: .65; transition: opacity .2s var(--ease-btn); }
.mp-feats a:hover{ background: var(--oat); color: var(--ink); }
.mp-feats a:hover .ico{ opacity: 1; }
.mp-side{ grid-area: side; display: grid; gap: 10px; align-content: start; }
.mp-side .mega-k{ margin: 0 0 2px; }
.mp-card{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 8%, #fff); transition: transform .45s var(--ease), background-color .25s var(--ease-btn); }
.mp-card:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--c) 13%, #fff); }
.mp-card .hl-ic{ background: var(--c); color: #fff; }
.mp-card-t b{ display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.mp-card-t small{ display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.mp-chips{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.mp-chips i{ padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--c); font: 600 11.5px/1.2 var(--font); font-style: normal; }
/* MovePilot in the brand blue: a white icon tile and badge, the question in a frosted bubble */
.mp-ai{ --c: var(--blue); background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 55%), var(--blue); color: #fff; }
.mp-ai:hover{ background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%), var(--blue-600); }
.mp-ai .hl-ic{ background: #fff; color: var(--blue); }
.mp-ai .mp-card-t small{ color: rgba(255, 255, 255, .84); }
.mp-ai em{ padding: 4px 6px; border-radius: 6px; background: #fff; color: var(--blue); font: 700 10px/1 var(--font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.mp-ask{ grid-column: 1 / -1; justify-self: start; margin-top: 12px; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 12.5px; line-height: 1.3; }
.mp-platform{ grid-area: plat; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.mp-platform .mega-k{ margin: 0 10px 0 0; }
.mp-platform a{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; font-size: 14px; color: var(--ink-2); transition: background-color .2s var(--ease-btn), color .2s var(--ease-btn); }
.mp-platform a:hover{ background: var(--oat); color: var(--ink); }
.mp-platform .ico{ width: 16px; height: 16px; color: var(--muted); }
.mp-platform .mp-all{ margin-left: auto; color: var(--blue); font-weight: 600; }
.mp-platform .mp-all .ico{ color: currentColor; transition: transform .35s var(--ease); }
.mp-platform .mp-all:hover{ background: var(--blue-50); color: var(--blue); }
.mp-platform .mp-all:hover .ico{ transform: translateX(3px); }

/* Solutions / Resources / Company: three grouped columns and a feature card */
.mega-cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 340px; gap: 32px; }
.mc-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mc-list a{ display: block; padding: 8px 10px; margin-inline: -10px; border-radius: 10px; transition: background-color .2s var(--ease-btn); }
.mc-list a:hover{ background: var(--oat); }
.mc-list b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mc-list small{ display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.mc-plain a{ padding: 7px 10px; font-size: 15px; color: var(--ink-2); }
.mc-plain a:hover{ color: var(--ink); }
.mc-k2{ margin-top: 22px; }
.mc-ico a{ display: flex; align-items: center; gap: 12px; padding: 7px 10px; font-size: 15px; font-weight: 500; }
.mc-ic{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blue-50); color: var(--blue); transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn); }
.mc-ic .ico{ width: 17px; height: 17px; }
.mc-ico a:hover .mc-ic{ background: var(--blue); color: #fff; }
.mega-card{ display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border-radius: 20px; background: var(--blue-50); transition: transform .45s var(--ease), background-color .25s var(--ease-btn); }
.nav-item.is-open .mega-card:hover{ transform: translateY(-2px); background: #e3efff; }
.mega-card small{ font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.mega-card strong{ font-size: 16.5px; font-weight: 550; line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; }
.mcard-vis{ flex: 1; display: grid; place-items: center; min-height: 150px; margin-bottom: 8px; }
/* the cards' small product scenes */
.mv-est, .mv-job{ width: 100%; max-width: 270px; display: grid; gap: 7px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -20px rgba(6, 26, 63, .45); }
.mv-tariffs{ display: flex; gap: 4px; margin-bottom: 2px; }
.mv-tariffs i{ flex: 1; padding: 5px 0; border-radius: 7px; background: var(--oat); color: var(--muted); font: 600 10.5px/1 var(--font); font-style: normal; text-align: center; }
.mv-tariffs i.on{ background: var(--blue); color: #fff; }
.mv-row{ display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.mv-row b{ font-weight: 600; color: var(--ink-2); }
.mv-row em{ font-style: normal; }
.mv-total{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 7px; border-top: 1px solid var(--line); }
.mv-total em{ font-style: normal; font-size: 11.5px; font-weight: 600; }
.mv-total b{ font: 600 14.5px/1 var(--font-mono); color: var(--blue); }
.mv-job-h{ display: flex; align-items: center; gap: 6px; font-size: 12px; }
.mv-job-h i{ font: 500 10.5px/1 var(--font-mono); font-style: normal; color: var(--blue); }
.mv-job-h b{ font-weight: 600; }
.mv-job-h em{ margin-left: auto; padding: 3px 7px; border-radius: 6px; background: #fdf4e0; color: #a16207; font: 600 9.5px/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.mv-tabs{ display: flex; gap: 9px; overflow: hidden; padding-bottom: 6px; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.mv-tabs i{ font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.mv-tabs i.on{ color: var(--ink); font-weight: 600; box-shadow: 0 8px 0 -6px var(--blue); }
.mv-lines{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mv-lines i{ height: 30px; border-radius: 7px; background: var(--oat); }
.mv-lines i:first-child{ background: var(--blue-50); box-shadow: inset 0 0 0 1px #cfe2ff; }
.mv-dbs{ width: 100%; max-width: 250px; display: grid; gap: 6px; }
.mv-db{ display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .55); color: var(--muted); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); }
.mv-db .ico{ width: 16px; height: 16px; }
.mv-db b{ font-weight: 500; }
.mv-db.is-you{ background: #fff; color: var(--ink); box-shadow: 0 14px 28px -18px rgba(6, 26, 63, .45), inset 0 0 0 1.5px var(--blue); }
.mv-db.is-you > .ico{ color: var(--blue); }
.mv-db.is-you b{ font-weight: 600; }
.mv-db i{ display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: var(--blue); color: #fff; }
.mv-db i .ico{ width: 12px; height: 12px; stroke-width: 2.4; }
/* below 1240px the product menu stacks its side cards under the stages */
@media (max-width: 1240px){
  .mega-product{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "stages" "side" "plat"; }
  .mp-side{ grid-template-columns: 1fr 1fr; }
  .mp-side .mega-k{ grid-column: 1 / -1; }
  .mega-cols{ grid-template-columns: repeat(3, minmax(0, 1fr)) 280px; gap: 24px; }
}

/* links to pages that are still being built say so (site.js) instead of opening a 404 */
.soon-toast{
  position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px); padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--navy); color: #fff;
  box-shadow: 0 24px 50px -20px rgba(6, 26, 63, .6); pointer-events: none;
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.soon-toast.on{ opacity: 1; transform: translate(-50%, 0); }
.soon-toast > i{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blue); }
.soon-toast > i .ico{ width: 17px; height: 17px; }
.soon-toast b{ display: block; font-size: 14.5px; font-weight: 600; }
.soon-toast small{ display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .7); }

/* ---------- art slots (replace with your own 3D) ---------- */
.art{ position: relative; margin: 0; overflow: hidden; background: var(--art-bg, #dcebff); }
.art > img, .art > video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.art-ph{ position: absolute; inset: 0; z-index: 0; }
.art-ph > svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.art.has-media .art-ph{ display: none; }
.art-tag{
  position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88);
  font: 500 11.5px/1 var(--font-mono); color: #1b2a44; letter-spacing: 0; white-space: nowrap;
}
.art-tag::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.art.has-media .art-tag{ display: none; }
/* the file hints are for a local copy only (site.js marks it .is-local); the live site never shows them */
html:not(.is-local) .art-tag{ display: none !important; }
.art-hint .art-tag{ left: 14px; right: auto; top: 14px; bottom: auto; }

/* placeholder scenes (SVG templates injected by site.js) — colours come from these vars */
.ph-scene{ --s1: #9fcbff; --s2: #e7f2ff; --h1: #a9cdf7; --h2: #79abee; --h3: #4b88e0; --h4: #1f5cc0; --tr: #174a9e; --road: #eef5ff; }
.ph-object{ --bg1: #f4f8ff; --bg2: #dfeafb; --floor: #cfdcf2; --c1: #5a96ee; --c2: #2f72dc; --c3: #1d55b5; }

/* ---------- hero ---------- */
.hero{
  position: relative; color: #fefdfb; background: var(--navy);
  min-height: max(820px, 100svh); padding: calc(var(--hdr) + 40px) 0 300px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.hero > .art{ position: absolute; inset: 0; z-index: 0; background: var(--navy); }
/* the collage of product screens (assets/art/hero.webp, made from _hero-collage.html) fades in over the navy */
.hero > .art .art-ph{ opacity: 0; }
.hero > .art > img{ animation: hero-art-in 1.2s var(--ease) both; }
@keyframes hero-art-in{ from{ opacity: 0; transform: scale(1.03); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .hero > .art > img{ animation: none; } }
/* while the page scrolls away, the collage trails a little behind the text: depth, with no script. Only where there's a
   mouse: iPhone Safari (26 runs scroll-driven animations) keeps the layer of an element whose animation is in effect,
   and this one is in effect for good, the whole first screen at 3x; with the rest of a long page that ran it out of
   memory ("A problem repeatedly occurred", owner Nov 13; WebKit bug 312727) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine){
    .hero > .art{ animation: hero-depth linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes hero-depth{ to{ transform: translate3d(0, 22%, 0); } }
/* narrower screens see a slice of the collage: frame its right edge, where the iPhone app is */
@media (max-width: 1100px){ .hero > .art > img{ object-position: 100% 50%; } }
.hero > .art .art-ph{ --s1: #8fc2ff; --s2: #e3f0ff; --h1: #a6cbf7; --h2: #6ea3ec; --h3: #3c7cdb; --h4: #15468f; --tr: #0f3a80; }
.hero > .art .art-tag{ bottom: auto; top: calc(var(--hdr) + 18px); right: var(--gutter); }
.hero .trees{ display: none; }
.hero::after{
  content: ""; position: absolute; inset: auto 0 0; height: 72%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 26, 63, 0) 0%, rgba(6, 26, 63, .45) 30%, rgba(6, 26, 63, .86) 58%, var(--navy) 100%);
}
.hero-grid{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: end; gap: 48px; }
.hero-side{ display: grid; gap: 22px; padding-bottom: 6px; }
.hero-side .lead{ color: #fefdfb; max-width: 360px; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 10px; }
.hero-note{ font-size: 13.5px; color: rgba(254, 253, 251, .72); display: flex; align-items: center; gap: 8px; }
.hero-note .ico{ width: 15px; height: 15px; color: var(--sky); }

/* ---------- the box under the hero: built for movers ----------
   What a moving company sells, then the move itself in movers' terms: two rows of same-height
   tiles drifting in opposite directions (site.js marquee). They pause under the pointer, can be
   dragged, and fade out at the box's edges. */
.proof{ position: relative; z-index: 3; margin-top: -244px; padding-bottom: 64px; }
.proof-box{ display: grid; gap: 12px; padding: 44px 0 40px; border-radius: var(--r-box); background: var(--oat); overflow: hidden; }
.pm-head{ display: grid; justify-items: center; gap: 12px; margin-bottom: 18px; padding: 0 24px; text-align: center; }
.pm-eyebrow{ font: 600 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.proof-intro{ max-width: 640px; margin: 0; font-size: 20px; line-height: 1.4; text-wrap: balance; }
.proof-intro b{ font-weight: 600; }
.mq{
  position: relative; height: 76px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq.is-drag{ cursor: grabbing; }
.mq-track{ position: absolute; top: 0; left: 0; display: flex; gap: 12px; height: 100%; will-change: transform; }
.mq-tile{ flex: none; display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 22px 0 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(17, 19, 23, .04); white-space: nowrap; }
.mq-ic{ flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-50); color: var(--blue); }
.mq-ic .ico{ width: 20px; height: 20px; }
.mq-t{ display: grid; gap: 4px; }
.mq-t b{ font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.mq-t small{ font-size: 13px; line-height: 1.2; color: var(--muted); }
.mq-t em{ font-family: var(--font-mono); font-size: .94em; font-style: normal; color: var(--ink-2); }
.mq-t b em{ font-family: inherit; font-size: inherit; font-variant-numeric: tabular-nums; color: inherit; }
.mq-tile .av-row{ margin-left: 4px; }
/* the odd ones out: a text to the customer, and the AI */
.mq-sms{ background: var(--blue); color: #fff; }
.mq-sms .mq-ic{ background: rgba(255, 255, 255, .16); color: #fff; }
.mq-sms small{ color: rgba(255, 255, 255, .78); }
.mq-ai{ background: var(--navy); color: #fff; }
.mq-ai .mq-ic{ background: rgba(143, 195, 255, .14); color: var(--sky); }
.mq-ai small{ color: var(--sky); }
@media (max-width: 720px){
  .proof-box{ gap: 8px; }
  .pm-head{ margin-bottom: 12px; padding: 0 18px; }
  .mq{ height: 62px; }
  .mq-track{ gap: 8px; }
  .mq-tile{ gap: 10px; padding: 0 16px 0 10px; border-radius: 15px; }
  .mq-ic{ width: 36px; height: 36px; border-radius: 10px; }
  .mq-ic .ico{ width: 18px; height: 18px; }
  .mq-t{ gap: 3px; }
  .mq-t b{ font-size: 14.5px; }
  .mq-t small{ font-size: 12px; }
  .mq-tile .av-row span{ width: 24px; height: 24px; }
}

/* ---------- home page variants ----------
   index.html can carry two versions of a block, for different audiences or a test; its <head> sets
   html[data-home] ("a" unless the visit asks for "b"). A block marked data-home-variant shows only
   in its own version. */
html:not([data-home="b"]) [data-home-variant="b"], html[data-home="b"] [data-home-variant="a"]{ display: none !important; }

/* ---------- variant B of the box under the hero: the product map ----------
   Everything in the console, stage by stage — the same map as the Product menu: the four stages
   of a move, each with its hub, a glimpse of it at work and its tools; then what runs across every
   job, and what the platform brings. On phones the stages swipe and a step bar follows them. */
.proof-map .proof-box{ gap: 16px; padding: 44px clamp(16px, 2.4vw, 36px) 32px; overflow: visible; }
.proof-map .pm-head{ margin-bottom: 12px; padding: 0; }
.proof-map .proof-intro{ max-width: 620px; }

.pm-steps{ display: none; }
.pm-flow{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* each stage spans three of the strip's rows (top, glimpse, tools), so all four line up */
.pm-stage{
  position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; align-content: start; gap: 14px; min-width: 0;
  padding: 18px; border-radius: var(--r-card); background: #fff; box-shadow: 0 1px 0 rgba(17, 19, 23, .04);
}
/* the order of the stages: a small arrow in the gap to the next one */
.pm-stage:not(:last-child)::after{
  content: ""; position: absolute; z-index: 1; top: 21px; right: -17px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 4px var(--oat);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pm-top{ display: flex; align-items: center; gap: 9px; min-width: 0; }
.pm-n{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: #fff; font: 700 13px/1 var(--font-ui); }
.pm-step{ font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.pm-hub{
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 7px 9px; border-radius: 9px;
  background: color-mix(in srgb, var(--c) 9%, #fff); color: color-mix(in srgb, var(--c) 86%, #000); font: 600 12.5px/1 var(--font); white-space: nowrap;
  transition: background-color .25s var(--ease-btn);
}
.pm-hub .ico{ flex: none; width: 13px; height: 13px; transition: transform .3s var(--ease); }
.pm-hub:hover{ background: color-mix(in srgb, var(--c) 16%, #fff); }
.pm-hub:hover .ico{ transform: translateX(2px); }
/* a glimpse of the stage at work */
.pm-demo{ display: grid; align-content: center; gap: 8px; min-height: 126px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--c) 6%, #fbfbfa); }
.pm-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pm-pills{ justify-content: flex-start; gap: 6px; }
.pm-k{ font: 600 10.5px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-v{ font: 600 22px/1.05 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-meta{ font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pm-tl{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pm-tl li{ display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.2; }
.pm-tl .ico{ flex: none; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--c); color: #fff; }
.pm-tl time{ margin-left: auto; padding-left: 6px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.pm-demo .bubble{ padding: 9px 11px; font-size: 13px; }
.pm-demo .av-row span{ width: 26px; height: 26px; }
/* its tools, each linked to where the hub shows it */
.pm-feats{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pm-feats a{ display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 7px 8px; border-radius: 9px; color: var(--ink-2); font-size: 14.5px; line-height: 1.25; transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn); }
.pm-feats .ico{ flex: none; width: 17px; height: 17px; color: var(--c); }
.pm-feats a:hover{ background: color-mix(in srgb, var(--c) 7%, #fff); color: var(--ink); }

/* across every job: the customer's side and the AI */
.pm-across{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pm-wide{
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px 14px; padding: 20px 52px 20px 20px;
  border-radius: var(--r-card); background: #fff; box-shadow: 0 1px 0 rgba(17, 19, 23, .04); transition: transform .45s var(--ease);
}
.pm-wide:hover{ transform: translateY(-2px); }
.pm-wide-ic{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.pm-wide-ic .ico{ width: 20px; height: 20px; }
.pm-wide-t{ display: grid; gap: 5px; min-width: 0; }
.pm-wide-t b{ font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.pm-wide-t small{ font-size: 14px; line-height: 1.35; color: var(--muted); }
.pm-wide-x{ grid-column: 2; display: grid; align-content: space-between; gap: 12px; min-width: 0; }
.pm-go{ position: absolute; top: 22px; right: 20px; width: 18px; height: 18px; opacity: .45; transition: transform .35s var(--ease), opacity .25s var(--ease-btn); }
.pm-wide:hover .pm-go{ opacity: 1; transform: translateX(3px); }
.pm-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chips i{ padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 9%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font: 600 13px/1.2 var(--font); font-style: normal; }
.pm-progress{ display: grid; gap: 7px; font-size: 13px; color: var(--muted); }
.pm-progress b{ color: var(--ink); font-weight: 600; }
.pm-progress i{ display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f28a64, var(--c)) 0 0 / 78% 100% no-repeat, #efe9e4; }
.pm-ai{ background: var(--navy); color: #fff; }
.pm-ai .pm-eyebrow{ color: var(--sky); }
.pm-ai .pm-wide-t small{ color: rgba(255, 255, 255, .66); }
.pm-ai .pm-wide-ic{ background: rgba(143, 195, 255, .14); color: var(--sky); }
.pm-chat{ gap: 8px; font-size: 13.5px; line-height: 1.35; }
.pm-q{ justify-self: end; max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: rgba(255, 255, 255, .12); }
.pm-a{ justify-self: start; display: grid; gap: 9px; max-width: 94%; padding: 11px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--ink); }
.pm-acts{ display: flex; gap: 6px; }
.pm-acts i{ padding: 6px 11px; border-radius: 8px; background: var(--blue); color: #fff; font: 600 12.5px/1 var(--font); font-style: normal; }
.pm-acts i + i{ background: var(--oat); color: var(--ink); }

/* what the platform brings */
.pm-platform{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; }
.pm-platform .pm-eyebrow{ margin-right: 4px; }
.pm-platform > span:not(.pm-eyebrow), .pm-platform > a{ display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.pm-platform .ico{ width: 15px; height: 15px; color: var(--blue); }
.pm-platform > a{ background: var(--ink); color: #fff; }
.pm-platform > a .ico{ color: #fff; transition: transform .3s var(--ease); }
.pm-platform > a:hover .ico{ transform: translateX(2px); }
@media (max-width: 1100px){
  .pm-flow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-stage:nth-child(2)::after{ display: none; }   /* the end of a row */
}
@media (max-width: 900px){
  .pm-across{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px){
  .proof-map .proof-box{ padding: 28px 14px 18px; }
  .proof-map .pm-head{ margin-bottom: 4px; }
  .pm-steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #fff; }
  .pm-steps button{
    display: grid; justify-items: center; gap: 4px; padding: 7px 2px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    color: var(--muted); font: 600 12.5px/1 var(--font); white-space: nowrap; transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn);
  }
  .pm-steps b{ display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--oat); font: 700 11px/1 var(--font-ui); transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn); }
  .pm-steps button.on{ background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ink); }
  .pm-steps button.on b{ background: var(--c); color: #fff; }
  /* one stage per screen, the next one peeking in */
  .pm-flow{ display: flex; gap: 10px; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pm-flow::-webkit-scrollbar{ display: none; }
  .pm-stage{ flex: 0 0 86%; scroll-snap-align: start; }
  .pm-stage::after{ display: none; }
  .js .pm-stage[data-reveal]{ opacity: 1; transform: none; }   /* no rise while swiping */
  .pm-wide{ padding: 16px 44px 16px 16px; }
  .pm-wide-x{ grid-column: 1 / -1; }
  .pm-go{ top: 18px; right: 16px; }
  .pm-platform{ justify-content: flex-start; }
}

.pillx{ display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 10.5px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.pillx::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.px-blue{ background: #e7f0fe; color: #1559c9; }
.px-green{ background: #e6f6ec; color: #16794a; }
.px-amber{ background: #fdf3df; color: #9a6206; }
.bubble{ background: var(--blue); color: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13.5px; line-height: 1.35; }
.av-row{ display: flex; }
.av-row span{ width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; margin-right: -6px; border: 2px solid #fff; font: 600 10.5px/1 var(--font-ui); }

/* ---------- sections ---------- */
.sec{ position: relative; padding: 112px 0; }

/* "Guides and how-tos": the blog guides and Help Center articles for a page's topic, at the foot of product,
   solution and template pages (written in by the session's mkguides.js between <!--guides--> markers). It brings its
   own spacing: after a .sec (which already ends padded) it starts at once. */
.gl-sec{ padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); }
.sec + .gl-sec{ padding-top: 0; }
.gl{ display: grid; gap: 20px; }
.gl-head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.gl-head h2{ margin: 0; color: var(--navy); font: 600 clamp(22px, 2vw, 28px)/1.2 var(--font); letter-spacing: -.02em; }
.gl-head nav{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gl-head nav a{ color: var(--blue-600); font: 500 14.5px/1.3 var(--font-ui); }
.gl-head nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.gl-links{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gl-card{ display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 140px; padding: 18px 18px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--ease); }
.gl-card:hover{ box-shadow: inset 0 0 0 1px #c9dcff, 0 18px 40px -26px rgba(6, 26, 63, .35); transform: translateY(-2px); }
.gl-card small{ display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 600 11.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.gl-card small .ico{ width: 14px; height: 14px; color: var(--blue); }
.gl-card b{ color: var(--navy); font: 600 16.5px/1.3 var(--font-ui); letter-spacing: -.01em; text-wrap: balance; }
.gl-card i{ justify-self: end; color: var(--blue); font: 500 18px/1 var(--font-ui); font-style: normal; transition: transform .25s var(--ease); }
.gl-card:hover i{ transform: translateX(3px); }
@media (max-width: 1080px){ .gl-links{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl-card{ min-height: 118px; } }
@media (max-width: 560px){
  .gl-links{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gl-card{ grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 7px 14px; min-height: 0; padding: 14px 16px; }
  .gl-card small, .gl-card b{ grid-column: 1; }
  .gl-card i{ grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce){ .gl-card, .gl-card i{ transition: none; } .gl-card:hover{ transform: none; } }
.sec-head{ display: grid; justify-items: center; gap: 20px; text-align: center; max-width: 820px; margin: 0 auto 44px; }
.sec-head .sub{ max-width: 620px; }

/* pills (tabs) */
.pills-wrap{ position: relative; margin: 0 auto 40px; max-width: 100%; }
.pills{ display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pills::-webkit-scrollbar{ display: none; }
.pill{
  position: relative; flex: none; overflow: hidden; height: 44px; padding: 10px 16px; border: 0; border-radius: 12px;
  background: var(--oat); color: var(--ink); font: 500 16px/24px var(--font); cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn);
}
.pill:hover{ background: var(--oat-2); }
.pill.is-on{ background: var(--blue); color: #fff; }
.pill .bar{ position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: rgba(255, 255, 255, .75); }
.pill.is-on .bar{ animation: pill-progress var(--dur, 5s) linear forwards; }
.pills-wrap.is-paused .pill.is-on .bar{ animation-play-state: paused; }
@keyframes pill-progress{ to{ transform: scaleX(1); } }

/* ---------- UI mockups (product screens rendered from the design) ---------- */
.ui{ position: relative; display: block; width: 100%; }
.ui-win{ position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); }

/* ---------- job showcase ---------- */
.job .stage{
  position: relative; border-radius: var(--r-box); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 0%, #d7e8ff 0%, rgba(215, 232, 255, 0) 70%), linear-gradient(180deg, #edf4ff, #f7f9fc);
  padding: clamp(18px, 3.4vw, 56px) clamp(14px, 3.4vw, 56px) 0;
}
.job-frame{ position: relative; aspect-ratio: 1560 / 860; }
.job-canvas{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; transform-origin: 0 0; }
/* the list steps back while the job opens over it */
.job-list{ position: absolute; inset: 0; border-radius: 16px 16px 0 0; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -40px rgba(6, 26, 63, .5); transform-origin: 50% 100%; transition: opacity .9s cubic-bezier(.3, 0, .2, 1), transform 1.2s cubic-bezier(.3, 0, .2, 1); }
.job.is-unfolded .job-list{ opacity: .42; transform: scale(.975); }   /* not .is-open: the menu's rule ".is-open … > *" would restyle all the job's screens on the opening's first frame (49 ms) */
/* the job's window as the office draws it (assets/ui/booking-*: its own corners and shadow) over the list.
   While it opens (site.js unfold) .job-morph is the sheet: white, cut to a box that grows from the row to the window;
   .job-shade is that box's shadow. When it lands both go and the window's own corners and shadow carry on. */
.job-modal{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; opacity: 0; transform-origin: 0 0; overflow: visible; }
.job-morph{ position: absolute; inset: 0; pointer-events: none; }
.job-morph.is-on{ background: #fff; }
.job-shade{ position: absolute; left: 0; top: 0; border-radius: 13px; opacity: 0; transform-origin: 0 0; pointer-events: none; box-shadow: 0 22px 64px rgba(23, 23, 31, .28); }
.job-tap{ position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--blue); opacity: 0; pointer-events: none; }
.job-hl{ position: absolute; left: 0; top: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--blue); background: rgba(24, 111, 242, .07); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.job-hl.is-on{ opacity: 1; }
.job-cursor{ position: absolute; left: 0; top: 0; width: 40px; height: 40px; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(6, 26, 63, .3)); }
.job-cap{
  position: absolute; z-index: 5; left: clamp(12px, 3vw, 40px); bottom: clamp(12px, 3vw, 36px); width: min(360px, calc(100% - 24px));
  background: #fff; border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 24px 60px -24px rgba(6, 26, 63, .45);
  display: grid; gap: 6px; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.job.is-unfolded .job-cap{ opacity: 1; transform: none; }
.job.is-unfolding .job-cap{ transition-delay: .62s; }   /* the caption comes last, once the window has arrived */
.job-cap small{ font: 600 11px/1 var(--font); letter-spacing: .16em; color: var(--blue); text-transform: uppercase; }
.job-cap strong{ font-size: 19px; font-weight: 550; letter-spacing: -.015em; line-height: 1.2; }
.job-cap p{ margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.job-cap.swap{ opacity: 0 !important; transform: translateY(6px) !important; transition-duration: .2s; }

/* ---------- modules (tabs + composites) ---------- */
.mods-sub{ min-height: 2.8em; transition: opacity .3s var(--ease); }
.mods-sub.swap{ opacity: 0; }
.mods-stage{ position: relative; aspect-ratio: 1440 / 700; }
.comp{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility 0s linear .55s; }
.comp.is-on{ opacity: 1; visibility: visible; transition: opacity .55s var(--ease); }
.comp-blob{ position: absolute; left: 2%; bottom: 0; width: 46%; height: 72%; border-radius: 40px; background: var(--blob, #cfe2ff); transform: rotate(-4deg); }
.comp-win{ position: absolute; left: 11%; top: 0; width: 72%; }
.comp .float{ transform: translateY(18px) scale(.97); opacity: 0; transition: transform .8s var(--ease), opacity .6s var(--ease); }
.comp.is-on .float{ transform: none; opacity: 1; transition-delay: .25s; }
.comp.is-on .float.f-l{ transition-delay: .4s; }
/* a card steps aside while the demo behind it needs that corner (the portal's messenger) */
.comp.is-on .float.pv-aside{ transform: translateY(-10px) scale(.97); opacity: 0; transition-delay: 0s; }
.float{
  position: absolute; z-index: 3; display: grid; gap: 8px; padding: 16px 18px; width: 260px;
  background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -28px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .05);
}
.float.f-r{ right: 2%; top: 14%; }
.float.f-l{ left: 3%; bottom: 10%; }
.float.f-sm{ width: 190px; }
.float .k{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.float .v{ font: 600 26px/1 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.float .meta{ font-size: 13px; line-height: 1.35; color: var(--muted); }
.float .row{ display: flex; gap: 8px; }
.float-p{ margin: 0; font-size: 14.5px; line-height: 1.35; letter-spacing: -.005em; }
.btn.mini{ height: 32px; padding: 6px 12px; font-size: 13px; }
.mini-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mini-list li{ display: flex; align-items: center; gap: 9px; font-size: 14px; }
.mini-list i{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mini-list b{ margin-left: auto; font-weight: 600; font-size: 13px; }
.comp-phone .comp-phone-ui{ position: absolute; left: 50%; top: 0; width: 25%; transform: translateX(-50%); filter: drop-shadow(0 40px 60px rgba(6, 26, 63, .35)); }
.comp-phone .comp-blob{ left: 27%; width: 46%; }
.comp-phone .float.f-r{ right: 12%; top: 22%; }
.comp-phone .float.f-l{ left: 12%; bottom: 22%; }

/* ---------- MovePilot ask box ---------- */
.ask{ max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }   /* the column never grows past a phone's width to fit an answer */
.ask-box{ position: relative; }
.ask-input{
  position: relative; z-index: 2; min-height: 144px; padding: 14px 18px 18px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 19, 23, .08), 0 24px 50px -30px rgba(6, 26, 63, .35);
  font-size: 18px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
}
.ask-caret{ display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -3px; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity: 0; } }
.ask-bar{ display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 10px 10px 10px 12px; border-radius: 0 0 16px 16px; background: var(--oat); }
.ask-chips{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.chip{ flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: var(--muted); font: 500 15px/1 var(--font); cursor: pointer; transition: color .3s var(--ease-btn), background-color .3s var(--ease-btn); }
.chip:hover{ color: var(--ink); }
.chip.is-on{ color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.ask-send{ flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px; background: #000; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease-btn); }
.ask-send:hover{ background: var(--blue); }
.ask-answers{ position: relative; min-height: 236px; }
.ans{
  position: absolute; inset: 0 0 auto; display: grid; gap: 12px; padding: 18px 20px 20px; border-radius: 20px;
  background: var(--blue-50); opacity: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s linear .45s;
}
.ans.is-on{ opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--ease), transform .7s var(--ease); }
.ans-head{ display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.ans-badge{ width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.ans-badge .ico{ width: 16px; height: 16px; }
.ans-rows{ display: grid; gap: 6px; }
.ans-row{ display: grid; grid-template-columns: 74px 1fr 1.2fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 14px; }
.ans-row b{ font-weight: 600; }
.mono{ font-family: var(--font-mono); font-size: 12.5px; color: var(--blue-600); }
.ans-p{ margin: 0; font-size: 15px; color: var(--ink-2); }
.ans .row{ display: flex; gap: 8px; }
.ans-msg{ padding: 12px 14px; border-radius: 14px; background: #fff; display: grid; gap: 6px; }
.ans-msg .k{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ans-msg p{ margin: 0; font-size: 15px; line-height: 1.4; }
.ans-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ans-stats div{ background: #fff; border-radius: 12px; padding: 12px; display: grid; gap: 4px; }
.ans-stats .v{ font: 600 24px/1 var(--font-ui); letter-spacing: -.03em; }
.ans-stats .meta{ font-size: 12.5px; color: var(--muted); }
.ask-thinking{ display: inline-flex; gap: 4px; }

/* ---------- pillars: sticky stacking cards (clay home-feature) ---------- */
.pillars{ padding-top: 40px; }
.pillar-list{ position: relative; }
.pillar{
  position: sticky; top: calc(var(--hdr) + 12px);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; padding-bottom: 48px;
  border-radius: var(--r-box); background: var(--card); color: var(--accent-ink);
  transform-origin: 50% 0%;
}
/* each card docks a little lower, so the earlier ones stay visible as a deck */
.pillar:nth-child(2){ top: calc(var(--hdr) + 28px); }
.pillar:nth-child(3){ top: calc(var(--hdr) + 44px); }
.pillar:nth-child(4){ top: calc(var(--hdr) + 60px); }
/* the arriving card casts a shadow onto the one it covers */
.pillar + .pillar{ box-shadow: 0 -18px 40px -26px rgba(6, 26, 63, .3); }
/* covered cards dim as they recede (opacity driven from site.js) */
.pillar::after{ content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #061a3f; opacity: var(--dim, 0); pointer-events: none; }
.pillar-left{ display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 24px 16px 48px; }
.pillar-top{ display: grid; gap: 24px; justify-items: start; }
.pillar-top .h3{ max-width: 520px; }
.pillar-top .body{ max-width: 460px; font-size: 17px; line-height: 1.45; opacity: .9; }
.pillar-bottom{ display: grid; gap: 24px; }
.pillar-proof{ display: flex; align-items: flex-start; gap: 14px; max-width: 460px; }
.pillar-proof p{ margin: 0; font-size: 15px; line-height: 1.45; }
.pillar-proof b{ font-weight: 600; }
.pp-ic{ flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--accent); }
.pillar-ctas{ display: flex; flex-wrap: wrap; gap: 8px; }
.pillar-right{ position: relative; padding: 24px; }
.t-blue{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --card: #eef5ff; }
.t-indigo{ --accent: #5b4be8; --accent-600: #4a3bd4; --accent-ink: #17123f; --card: #f2f0ff; }
.t-teal{ --accent: #0e8f74; --accent-600: #0b7a63; --accent-ink: #04291f; --card: #e9f6f1; }
.t-sky{ --accent: #0a8fc4; --accent-600: #0779a8; --accent-ink: #052a38; --card: #eaf6fc; }

/* ---------- pillar visuals built from live product UI ---------- */
.pv{
  position: relative; height: 100%; min-height: 560px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(80% 60% at 75% 8%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--pv1, #f4f8ff), var(--pv2, #dce9fc));
}
.pv::before{
  /* faint dot grid, fading toward the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.1px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
}
.pv-canvas{ position: absolute; left: 50%; top: 50%; width: 600px; height: 720px; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.pv-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
/* on a phone or tablet the camera gets a layer only while it moves: a lasting one holds a whole product screen at full
   size in iPhone Safari's memory (the home page ran out of it, Nov 13) */
@media not all and (hover: hover) and (pointer: fine){ .pv-cam{ will-change: auto; } }
.pv-card{
  position: relative; z-index: 0; width: 340px; border-radius: 16px; overflow: hidden; background: #fbfbfc;
  box-shadow: 0 30px 60px -28px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .06);
}
/* max-width: none — a camera layer has no width of its own, and `svg{ max-width: 100% }` would squash the cursor to 0 */
.pv-cursor{ position: absolute; z-index: 2; left: 0; top: 0; width: 26px; height: 26px; max-width: none; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(6, 26, 63, .3)); }
.pv-step{
  position: absolute; left: 24px; top: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px;
  border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(6, 26, 63, .35), 0 0 0 1px rgba(6, 26, 63, .05);
  font: 500 15px/1 var(--font); color: var(--accent-ink); transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.pv-ripple{ position: absolute; z-index: 1; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; }
.pv-step b{ width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.pv-step.swap{ opacity: 0; transform: translateY(-6px); }
.t-indigo .pv{ --pv1: #f8f7ff; --pv2: #e3dffb; }
.t-teal .pv{ --pv1: #f1fbf7; --pv2: #d2ece2; }
.t-sky .pv{ --pv1: #f1f9fd; --pv2: #d3eaf6; }

/* windows the camera moves inside */
.pv-win{ position: absolute; z-index: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(6, 26, 63, .42), 0 0 0 1px rgba(6, 26, 63, .07); }
.pv-win .pv-cam{ position: absolute; left: 0; top: 0; }
.pv-board{ position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.pv-lane{ position: absolute; left: 0; top: 0; z-index: 1; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .25s ease, background-color .25s ease, box-shadow .25s ease; }
.pv-lane.on{ opacity: 1; }
.pv-lane.bad{ background: rgba(229, 72, 77, .07); box-shadow: inset 0 0 0 2px rgba(229, 72, 77, .55); }
.pv-lane.good{ background: rgba(22, 163, 74, .07); box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .5); }
.pv-tip{
  position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 9px; background: #e5484d; color: #fff; font: 600 13px/1 var(--font-ui); white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(229, 72, 77, .7); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .35s var(--ease); pointer-events: none;
}
.pv-tip.on{ opacity: 1; transform: none; }
.pv-tip .ico{ width: 15px; height: 15px; flex: none; }
/* the home page's board window is narrow: the office's refusal goes on two lines */
.pv-dispatch .pv-tip{ height: auto; padding: 8px 12px; width: max-content; max-width: 290px; white-space: normal; line-height: 1.3; }
.pv-ghost{ position: absolute; z-index: 2; font-family: var(--font-ui); pointer-events: none; transform-origin: 30% 50%; }
.pv-toast{
  position: absolute; z-index: 3; left: 50%; top: 594px; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 11px; border-radius: 16px;
  background: #fff; white-space: nowrap; box-shadow: 0 24px 50px -24px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .05);
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.pv-toast.on{ opacity: 1; transform: translate(-50%, 0); }
.pv-toast b{ display: block; font: 600 15px/1.2 var(--font); color: var(--ink); }
.pv-toast small{ display: block; margin-top: 2px; font: 400 13px/1.3 var(--font); color: var(--muted); }
.pv-toast-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #e6f6ec; color: #16794a; }
.pv-toast-ic .ico{ width: 18px; height: 18px; stroke-width: 2.4; }

/* crew phone */
.pv-crew .pv-cam{ position: absolute; inset: 0; }
.pv-phone{ position: absolute; left: 0; top: 0; width: 404px; height: 876px; transform-origin: 0 0; filter: drop-shadow(0 40px 50px rgba(6, 26, 63, .32)); }
.pv-phone-list, .pv-phone-job{ position: absolute; left: 0; top: 0; width: 404px; }
.pv-screen{ position: absolute; left: 11px; top: 11px; width: 382px; height: 854px; border-radius: 42px; overflow: hidden; }
.pv-screen .pv-phone-job{ left: -11px; top: -11px; transform: translateX(400px); box-shadow: -18px 0 30px -18px rgba(6, 26, 63, .35); }
.pv-tap{ position: absolute; left: 0; top: 0; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 10px 24px -8px rgba(6, 26, 63, .45); opacity: 0; pointer-events: none; }
.pv-chip{
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 15px; background: #fff; white-space: nowrap;
  box-shadow: 0 22px 44px -22px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .05);
  opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .4s var(--ease), transform .7s var(--ease);
}
.pv-chip.on{ opacity: 1; transform: none; }
.pv-chip b{ display: block; font: 600 14.5px/1.2 var(--font); color: var(--ink); }
.pv-chip small{ display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--font); color: var(--muted); }
.pv-chip-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--accent); }
.pv-chip-ic .ico{ width: 17px; height: 17px; }
.pv-chip-1{ right: 14px; top: 196px; }
.pv-chip-2{ left: 14px; top: 430px; }
.pv-chip-3{ right: 14px; top: 560px; }

/* customer portal demo inside the modules tabs */
.pv-pwin{ aspect-ratio: 1440 / 900; background: #f6f6f4; }
.pv-pwin .pv-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); }
.pv-page{ position: absolute; left: 0; top: 0; width: 1440px; }
/* the messenger, where the portal opens it: the right edge of the first screen, in page px */
.pv-msgr{ position: absolute; left: 1032px; top: 162px; width: 384px; height: 640px; z-index: 2; border-radius: 24px; opacity: 0; transform: translateY(14px) scale(.96); transform-origin: 90% 100%; transition: opacity .22s ease, transform .32s cubic-bezier(.165, .84, .44, 1); }
.pv-msgr.on{ opacity: 1; transform: none; }
.pv-modal{ position: absolute; inset: 0; z-index: 4; background: rgba(17, 19, 23, .42); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.pv-modal.on{ opacity: 1; }
.pv-dlg{ position: absolute; left: 50%; top: 50%; width: 720px; transform: translate(-50%, -50%) scale(calc(var(--ms, .5) * .96)); transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.165, .84, .44, 1); }
.pv-modal.on .pv-dlg{ transform: translate(-50%, -50%) scale(var(--ms, .5)); }
.pv-pwin .pv-cursor{ z-index: 6; }

/* customer portal in a browser window */
.pv-browser .pv-bar{ position: relative; z-index: 2; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #f3f4f7; border-bottom: 1px solid #e6e8ee; }
.pv-browser .pv-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #d8dbe2; }
.pv-browser .pv-bar span{ flex: 1; display: flex; align-items: center; gap: 6px; height: 22px; margin-left: 10px; padding: 0 10px; border-radius: 7px; background: #fff; font: 500 11.5px/1 var(--font-ui); color: #6b6f78; }
.pv-browser .pv-bar .ico{ width: 11px; height: 11px; color: #16794a; }
.pv-view{ position: absolute; left: 0; right: 0; top: 36px; bottom: 0; overflow: hidden; background: #f4f5f7; }
.pv-portal{ position: absolute; left: 0; top: 0; width: 1000px; height: 1100px; }
.pv-paid{ opacity: 0; transition: opacity .6s ease; }
.pv-paid.on{ opacity: 1; }
.pv-office{
  position: absolute; z-index: 3; right: 10px; top: 488px; width: 292px; display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 16px;
  background: #fff; font-family: var(--font-ui); box-shadow: 0 26px 50px -24px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .05);
}
.pv-office-h{ display: flex; align-items: center; justify-content: space-between; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-office-h em{ font-style: normal; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; background: var(--oat); color: var(--ink-2); }
.pv-office-kpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-office-kpis div{ display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: #f6f7f9; }
.pv-office-kpis small{ font: 600 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pv-office-kpis b{ font: 600 19px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-office-row{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }
.pv-office-row .pillx{ margin-left: auto; }
.pv-pay .pv-toast{ left: 14px; top: 606px; transform: translateY(14px); }
.pv-pay .pv-toast.on{ transform: none; }

/* ---------- team ---------- */
.team-box{ background: var(--oat); border-radius: var(--r-box); padding: 48px; display: grid; gap: 40px; }
.team-head{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.team-l{ display: grid; gap: 22px; justify-items: start; }
.team-r{ display: grid; gap: 18px; }
.roles{ display: flex; flex-wrap: wrap; gap: 8px; }
.role{ display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; font-weight: 500; }
.role .ico{ color: var(--blue); width: 17px; height: 17px; }
.role{ transition: background-color .35s var(--ease), color .35s var(--ease); }
.role.on{ background: var(--blue); color: #fff; }
.role.on .ico{ color: #fff; }

/* one move, three views on move day: the office's job and the customer's portal (real screens) behind and in front,
   the crew's app on a phone (all three real screens), layered on one stage. A fixed canvas (1240×780, or 640×1090 when narrow), scaled to
   the stage by site.js oneMove(); each view drifts a little with the pointer. */
.one{
  position: relative; aspect-ratio: 1240 / 780; border-radius: 28px; overflow: hidden; --accent: var(--blue); --accent-ink: #031a3f;
  background:
    radial-gradient(38% 46% at 10% 24%, rgba(24, 111, 242, .17), rgba(24, 111, 242, 0) 70%),
    radial-gradient(40% 50% at 90% 88%, rgba(14, 143, 116, .14), rgba(14, 143, 116, 0) 70%),
    radial-gradient(46% 52% at 70% 2%, rgba(107, 77, 230, .13), rgba(107, 77, 230, 0) 70%),
    linear-gradient(180deg, #f7f9ff, #e5edfb);
}
.one::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 20%, transparent) 1.1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
}
.one.narrow{ aspect-ratio: 640 / 1090; }
.one-canvas{ position: absolute; left: 0; top: 0; width: 1240px; height: 780px; transform-origin: 0 0; font-family: var(--font-ui); color: var(--ink); }
.one.narrow .one-canvas{ width: 640px; height: 1090px; }
.one .pv-step{ left: auto; right: 24px; top: 22px; z-index: 6; }
.one.narrow .pv-step{ right: auto; left: 20px; top: 18px; }

/* the three views: depth from the pointer (--px/--py, set by oneMove), a ring when a change lands */
.o-dev{
  position: absolute; z-index: 1; --d: 0;
  translate: calc(var(--px, 0) * var(--d) * 1px) calc(var(--py, 0) * var(--d) * 1px); transition: translate .9s var(--ease);
}
.o-dev::after{ content: ""; position: absolute; inset: -5px; border-radius: 19px; pointer-events: none; opacity: 0; }
.o-dev.ping::after{ animation: o-ping 1s var(--ease); }
@keyframes o-ping{
  0%{ opacity: 1; box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(24, 111, 242, .35); }
  100%{ opacity: 0; box-shadow: 0 0 0 2px var(--accent), 0 0 0 24px rgba(24, 111, 242, 0); }
}
.o-office{ left: 110px; top: 64px; width: 780px; --d: 6; }
.o-cust{ left: 520px; top: 318px; width: 700px; z-index: 2; --d: 13; }
.o-crew{ left: 30px; top: 196px; width: 260px; z-index: 3; rotate: -4deg; --d: 20; }
.o-crew{ border-radius: 33.5px; box-shadow: 0 50px 70px -36px rgba(6, 26, 63, .55), 0 18px 30px -18px rgba(6, 26, 63, .3); }
.o-crew::after{ inset: -4px; border-radius: 38px; }
.o-crew .o-ui{ aspect-ratio: 404 / 876; }
.one.narrow .o-office{ left: 20px; top: 70px; width: 600px; }
.one.narrow .o-cust{ left: 40px; top: 352px; width: 580px; }
.one.narrow .o-crew{ left: 24px; top: 500px; }

/* the desktop windows, holding the real screens */
.o-win{ border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 60px 100px -50px rgba(6, 26, 63, .5), 0 18px 36px -24px rgba(6, 26, 63, .22), 0 0 0 1px rgba(6, 26, 63, .08); }
.o-chrome{ display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f6f7f9; border-bottom: 1px solid #ececef; }
.o-chrome i{ width: 9px; height: 9px; border-radius: 50%; background: #dcdde3; }
.o-chrome span{ margin: 0 auto; padding: 4px 12px; border-radius: 7px; background: #fff; font: 500 10.5px/1 var(--font-ui); color: #8b8b98; box-shadow: inset 0 0 0 1px #ececef; }
.o-ui{ display: block; width: 100%; }
.o-office .o-ui{ aspect-ratio: 1466 / 723; }
.o-cust .o-ui{ aspect-ratio: 1440 / 780; }

/* who is looking: a label on each view, like a teammate's cursor; it turns green when a change lands there */
.o-tag{
  position: absolute; z-index: 5; top: -15px; right: 22px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px;
  border-radius: 99px; background: var(--c); color: #fff; font: 600 12.5px/1 var(--font); white-space: nowrap;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c) 75%, transparent); transition: background-color .35s var(--ease);
}
.o-tag .ico{ width: 14px; height: 14px; }
.o-office .o-tag{ --c: #186ff2; }
.o-cust .o-tag{ --c: #6b4de6; right: auto; left: 22px; }
.o-crew .o-tag{ --c: #0e8f74; top: auto; bottom: -15px; right: auto; left: 50%; translate: -50% 0; }
.o-tag.on{ animation: o-tag-on .7s var(--ease); }
@keyframes o-tag-on{ 40%{ scale: 1.12; } }
.o-tag.synced{ background: #16a34a; }

/* a change in flight: an arc from the field it was made in to the same field in another view */
.o-beams{ position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.o-beam{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(24, 111, 242, .55)); }
.o-beam-dot{ fill: #fff; stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(24, 111, 242, .7)); }
.o-beam-end{ fill: none; stroke: var(--accent); stroke-width: 2; }


/* ---------- get started: a bento of five ways in, each with a photo slot ---------- */
.bento{ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.bc{ position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--oat); transition: transform .5s var(--ease); }
.bc:hover{ transform: translateY(-3px); }
.bc .art{ flex: 1; min-height: 180px; }
.bc-txt{ display: grid; gap: 10px; padding: 22px 24px 24px; justify-items: start; }
.bc-txt small{ font: 600 11px/1 var(--font); letter-spacing: .16em; color: var(--blue); text-transform: uppercase; }
.bc-txt strong{ font-size: 21px; line-height: 1.2; font-weight: 550; letter-spacing: -.02em; text-wrap: balance; }
.bc-txt p{ margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; max-width: 380px; }
.bc-a{ grid-column: 1; grid-row: 1 / span 2; background: #efe9ff; }
.bc-b{ grid-column: 2 / span 2; grid-row: 1; flex-direction: row; }
.bc-b .bc-txt{ flex: 1; align-content: center; padding: 28px; }
.bc-b .art{ flex: 0 0 40%; margin: 14px; border-radius: 20px; }
.bc-c{ grid-column: 2; grid-row: 2; min-height: 300px; }
.bc-c .art{ position: absolute; inset: 0; }
.bc-c .on-art{ position: relative; z-index: 2; margin-top: auto; color: #fff; }
.bc-c .on-art small{ color: #d6e8ff; }
.bc-c::after{ content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(6, 26, 63, 0), rgba(6, 26, 63, .7)); z-index: 1; }
.bc-d{ grid-column: 3; grid-row: 2 / span 2; background: var(--blue-50); }
.bc-e{ grid-column: 1 / span 2; grid-row: 3; flex-direction: row; }
.bc-e .art{ flex: 0 0 36%; margin: 14px; border-radius: 20px; }
.bc-e .bc-txt{ align-content: center; }

/* ---------- CTA + footer ---------- */
/* The footer art is a street scene (1711×919): movers on both sides, empty sky in the middle,
   the road filling the bottom third. The road dissolves (a mask) into --end-fill, the colour the
   footer card rests on: the page's white by default, light blue with .end-blue. On wide screens
   the CTA stands in the sky; narrower, the sky is too slim and it moves above the scene. */
/* The top 120px of the 919 are empty sky: the box leaves them out (1711 × 799, the picture held
   to its bottom edge), and the cut tree tops and roofs fade in from the page above. */
.end{
  --end-fill: var(--cream); --art-h: calc(100cqw * 799 / 1711);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--cream); container-type: inline-size;
}
.end-blue{ --end-fill: #dcebff; }
.end::before{ content: ""; grid-column: 1 / -1; grid-row: 2; background: var(--end-fill); }   /* the footer's row: rows are implicit, so no -1 */
.end-art{
  --fade-top: 7%; --fade-from: 58.6%; --fade-to: 92%;   /* the road dissolves from just above the kerb */
  grid-area: 1 / 1; aspect-ratio: 1711 / 799; background: linear-gradient(transparent 49%, var(--end-fill) 92%);
}
.end-art > img, .end-art > video{
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fade-top), #000 var(--fade-from), transparent var(--fade-to));
          mask-image: linear-gradient(transparent, #000 var(--fade-top), #000 var(--fade-from), transparent var(--fade-to));
}
.end-art .art-ph{ --s1: #cfe5ff; --s2: #f2f8ff; --h1: #b7d6fa; --h2: #8bbaf2; --h3: #5c97e6; --h4: #2f6fd1; --tr: #1f57b3; }
/* the CTA stands low in the sky, between the couch and the truck, about a hundred pixels above the road */
.end-head{ grid-area: 1 / 1; align-self: start; margin-top: calc(var(--art-h) * .225); position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; }
.end-head .h4{ max-width: 640px; }
.end-ctas{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.btn-line{ box-shadow: inset 0 0 0 1px rgba(17, 19, 23, .85); }
.ftr{ grid-area: 2 / 1; position: relative; z-index: 2; margin-top: calc(var(--art-h) * -.08); padding-bottom: 32px; }   /* the card starts where the road has faded */
/* on white the cream card needs an edge of its own */
.end:not(.end-blue) .ftr-box{ box-shadow: 0 0 0 1px rgba(6, 26, 63, .07), 0 24px 60px -34px rgba(6, 26, 63, .3); }
@media (max-width: 1199px){
  .end-head{ margin-top: 0; padding-top: 96px; padding-bottom: 28px; }
  .end-art{ grid-area: 2 / 1; }
  .end::before{ grid-row: 3; }
  .ftr{ grid-area: 3 / 1; }
}
.ftr-box{ background: var(--cream); border-radius: var(--r-box); padding: 48px 48px 28px; display: grid; gap: 48px; box-shadow: 0 -30px 80px -50px rgba(6, 26, 63, .4); }
.ftr-cols{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.ftr-cols h3{ margin: 0 0 14px; font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ftr-cols a{ display: block; padding: 5px 0; color: var(--ink-2); font-size: 15px; transition: color .25s var(--ease-btn); }
.ftr-cols a:hover{ color: var(--blue); }
.ftr-bottom{ display: flex; align-items: center; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ftr-bottom .brand svg{ width: 140px; height: 21px; }
.ftr-social{ margin-left: auto; display: flex; gap: 8px; }
.ftr-social a{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; }

/* smooth scrolling on desktop (Lenis) */
html.lenis, html.lenis body{ height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow: clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-smooth iframe{ pointer-events: none; }

/* sections off screen skip rendering entirely — keeps a long page with live product UI light */
main > .sec, main > .proof, main > .end{ content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.cv-all main > .sec, .cv-all main > .proof, .cv-all main > .end{ content-visibility: visible; }

/* ---------- reveal motion ---------- */
.js [data-split]:not(.is-split){ opacity: 0; }
.js [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in{ opacity: 1; transform: none; }
/* the first screen doesn't wait for scripts or fonts, and isn't faded in: its text is what Google times as the page's
   main content (LCP), and a fade only counts once it's done. So it's there from the first paint and just settles a
   little into place. Further down, site.js still reveals things as they scroll in. */
.js .hero [data-reveal], .js .hub-hero [data-reveal], .js .co-hero [data-reveal], .js .rl-hero [data-reveal]{ opacity: 1; transform: none; transition: none; animation: mc-rise .9s var(--ease) var(--d, 0s) both; }
@keyframes mc-rise{ from{ transform: translateY(18px); } }
.split .ln{ display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split .ln > span{ display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s)); }
.split.is-in .ln > span{ transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav-links, .kbd, .nav-sep{ display: none; }
  .burger{ display: inline-flex; }
  .mnav{ display: grid; }
  .hero-grid{ grid-template-columns: 1fr; gap: 28px; }
  .hero-side .lead{ max-width: 520px; }
  /* one column puts the headline higher, over the collage's sharp band: shade from there down */
  .hero::after{ height: 100%; background: linear-gradient(180deg, rgba(6, 26, 63, 0) 18%, rgba(6, 26, 63, .55) 36%, rgba(6, 26, 63, .9) 52%, var(--navy) 70%); }
  /* single column cards are taller than the screen, so they simply stack in the flow */
  .pillar, .pillar:nth-child(n){ position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; border-radius: 40px; margin-bottom: 14px; box-shadow: none; }
  .pillar-list{ overflow: visible; border-radius: 0; }
  .pillar-left{ padding: 36px 32px 8px; }
  .team-head{ grid-template-columns: 1fr; gap: 24px; }
  .ftr-cols{ grid-template-columns: repeat(3, 1fr); }
  .mods-stage{ aspect-ratio: 1440 / 820; }
  .comp-win{ left: 4%; width: 86%; }
  .float.f-r{ right: 0; }
}
@media (max-width: 720px){
  :root{ --hdr: 97px; }
  .announce{ height: 38px; }
  .announce-msg{ font-size: 13.5px; }
  .announce-cta{ display: none; }
  .nav{ padding: 8px 10px 8px 16px; border-radius: 0 0 18px 18px; }
  .nav-login, .nav-right .btn-oat{ display: none; }
  .brand svg{ width: 136px; }
  .hero{ min-height: 880px; padding-bottom: 250px; }
  .proof{ margin-top: -200px; }
  .proof-box{ border-radius: 32px; padding: 30px 0 26px; }
  .proof-intro{ font-size: 17px; }
  .sec{ padding: 80px 0; }
  .pills{ justify-content: flex-start; padding-inline: var(--gutter); }
  .pills-wrap{ margin-inline: calc(-1 * var(--gutter)); }
  .job .stage{ border-radius: 28px; padding-bottom: 14px; }
  .job-cap{ position: relative; left: auto; bottom: auto; width: auto; margin-top: 14px; box-shadow: none; }
  /* a phone shows the screen alone: the cards beside it and the colored shape under it only fit in a band of their
     own below it, which read as empty space (owner, Nov 13). The stage is the screen's own height */
  .mods-stage{ aspect-ratio: 1440 / 900; }
  .comp-win{ left: 0; width: 100%; top: 0; }
  .comp-blob, .comp .float{ display: none; }
  .comp-phone .comp-phone-ui{ width: 28.6%; filter: drop-shadow(0 14px 24px rgba(6, 26, 63, .22)); }   /* the crew app's phone as tall as the windows (its crop is 404 × 876) */
  .ask-input{ min-height: 120px; font-size: 16.5px; }
  .ans-row{ grid-template-columns: 64px 1fr; }
  .ans-row span:nth-child(3), .ans-row span:nth-child(4){ grid-column: 2; }
  .ans-stats{ grid-template-columns: repeat(2, 1fr); }
  .ask-answers{ min-height: 320px; }
  .pillar, .pillar:nth-child(n){ border-radius: 32px; margin-bottom: 12px; }
  .pillar-left{ padding: 28px 22px 4px; }
  .pillar-right{ padding: 14px; }
  .pv{ min-height: 460px; border-radius: 20px; }
  .pv-step{ left: 16px; top: 16px; }
  .team-box{ padding: 28px 20px; border-radius: 32px; }
  .bento{ grid-template-columns: 1fr; }
  .bc-a, .bc-b, .bc-c, .bc-d, .bc-e{ grid-column: auto; grid-row: auto; }
  .bc-b, .bc-e{ flex-direction: column; }
  .bc-b .art, .bc-e .art{ flex: none; height: 200px; margin: 0 14px 14px; }
  .bc-e .art{ order: 2; }
  .end-head{ padding-top: 80px; }
  /* a phone shows the left of the scene, the house and the couch, at a readable size */
  .end-art{ aspect-ratio: auto; height: 360px; --fade-top: 0%; --fade-from: 64%; --fade-to: 93%; }   /* the whole height shows here */
  .end-art > img{ object-position: 10% 100%; }
  .ftr{ margin-top: -44px; }
  .ftr-box{ padding: 32px 22px 22px; border-radius: 32px; }
  .ftr-cols{ grid-template-columns: repeat(2, 1fr); }
  .ftr-bottom{ flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal]{ opacity: 1; transform: none; }
  .js .hero [data-reveal], .js .hub-hero [data-reveal], .js .co-hero [data-reveal], .js .rl-hero [data-reveal]{ animation: none; }
  .split .ln > span{ transform: none; }
}