/* =========================================================================
   NAVIGATION (WEB-142; Joe's Oct 9 2026 Loom "Website Navigation and Menu Updates Review", N1–N4)
   Markup: tools/nav.mjs (hybrid/partials/header.html + the homepage's NAV block). Behaviour: nav.js.
   Loaded on every page after styles.css (the bar itself, .hdr, its tone and progress bar, stay in styles.css).

   Desktop (> 1100 px): a label link + a small chevron button per top item. Opening an item (hover with intent,
   the chevron, or the keyboard) turns the header into one white sheet with the item's .mm panel below it,
   Tesla style: .mm-bg (the shared white sheet) grows to the panel's height (--mm-h, set by nav.js), so moving
   between items morphs one sheet instead of swapping boxes; the panel's tiles fade and rise in; .mm-scrim dims
   and blurs the page. The sheet stays white whatever tone the header was in (.hdr.is-dark).
   Mobile (≤ 1100 px): #menu rows become an accordion (.menu__it.is-open), animated with grid rows.
   Reduced motion: no movement, plain fades only where they help.
   ========================================================================= */

/* ---------- the bar ---------- */
.hdr__nav { margin-left: auto; font-size: 13.5px; font-weight: 500; }
.nav { display: flex; align-items: center; gap: clamp(0px, .4vw, 6px); }
.nav__it { display: flex; align-items: center; height: 34px; border-radius: 10px; transition: background-color .25s var(--ease-out); }
.nav__a { display: flex; align-items: center; height: 100%; padding: 0 clamp(7px, .75vw, 11px); border-radius: 10px; color: inherit; opacity: .78; white-space: nowrap; transition: opacity .2s; }
.nav__it--mm .nav__a { padding-right: 2px; border-radius: 10px 0 0 10px; }
.nav__a:hover { text-decoration: none; opacity: 1; }
.nav__tg { display: grid; place-items: center; width: 22px; height: 100%; margin-right: 2px; border-radius: 0 10px 10px 0; color: inherit; opacity: .6; transition: opacity .2s; }
.nav__tg svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.nav__it:hover .nav__tg, .nav__tg:focus-visible, .nav__tg[aria-expanded="true"] { opacity: 1; }
.nav__tg[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__a:focus-visible, .nav__tg:focus-visible { outline-offset: -2px; }
/* hovered / open item: a soft pill behind label + chevron (Tesla's grey pill) */
.nav__it.is-open { background-color: rgba(11, 26, 46, .055); }
@media (hover: hover) {
  .nav__it:hover { background-color: rgba(11, 26, 46, .055); }
  .hdr.is-dark:not(.is-mm) .nav__it:hover { background-color: rgba(255, 255, 255, .12); }
}
.nav__it.is-open .nav__a, .nav__it.is-open .nav__tg { opacity: 1; }
/* the section you are in: full-strength label and a short bar under it (same weight as the others, so the label keeps
   its width and the nav never shifts from page to page) */
.nav__it.is-cur .nav__a { position: relative; opacity: 1; }
.nav__it.is-cur .nav__a::after { content: ""; position: absolute; left: clamp(7px, .75vw, 11px); right: 2px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); opacity: .9; }
.nav__it:not(.nav__it--mm).is-cur .nav__a::after { right: clamp(7px, .75vw, 11px); }

/* PostureCo Cloud (WEB-147, Joe's Oct 9 2026 Loom: "its own icon up here … product placement"): the booth emblem's cloud
   before the label, in the bar's own colour so it follows the header tone */
.nav__a--ic { gap: 6px; }
.nav__ic { width: 21px; height: 10px; flex: none; fill: currentColor; opacity: .9; } /* the booth emblem's cloud (#i-pcloud, 2.12 : 1) */
/* "coming soon" marker: a 6 px orange badge dot on the cloud's lower-right edge, overlapping the lobe with a 1.5 px ring cut
   out of it (badge-style; up in the empty top-right corner it read as a sun behind a cloud), absolutely placed so the
   label keeps its width (the header stays symmetric: .work/cloud/nav/ctasym.cjs); the link reads
   "PostureCo Cloud (coming soon)" to screen readers */
.nav__icw { position: relative; display: flex; flex: none; }
.nav__dot { position: absolute; bottom: -2px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: #F0A830; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); pointer-events: none; }
.hdr.is-dark:not(.is-mm) .nav__dot { box-shadow: 0 0 0 1.5px #0b1422; }   /* opaque: the cut-out reads as the dark bar, not a grey halo */

/* the header while a panel is open: one white sheet with the panel (also over dark bands) */
.hdr { --mm-h: 0px; }
.hdr.is-mm { color: var(--ink); }
.hdr.is-mm::before, body.sub .hdr.is-mm::before, body.sub .hdr.is-mm.is-dark::before { background: #fff; box-shadow: none; }
.hdr.is-mm .hdr__logo-l { opacity: 1; }
.hdr.is-mm .hdr__logo-d { opacity: 0; }
.hdr.is-mm .btn--primary { background: var(--ink); color: #fff; }
.hdr__prog { transition: opacity .25s var(--ease-out); }
.hdr.is-mm .hdr__prog { opacity: 0; }

/* the shared white sheet under the bar; its height follows the open panel (--mm-h). Closing, it stays opaque white and
   retracts up under the bar (its content fades first), and only turns transparent once it is fully up: a half-faded
   white sheet over a dark band would read as a grey flash */
.mm-bg { position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 1; height: var(--mm-h); background: #fff; box-shadow: 0 1px 0 rgba(11, 26, 46, .06), 0 40px 60px -40px rgba(11, 26, 46, .35); pointer-events: none; opacity: 0; transition: height .4s cubic-bezier(.55, 0, .2, 1) .05s, opacity 0s linear .45s; }
.hdr.is-mm .mm-bg { opacity: 1; transition: height .5s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)), opacity .18s var(--ease-out); }
/* the page behind: dimmed and softly blurred */
.mm-scrim { position: fixed; inset: var(--hdr) 0 0 0; z-index: 99; background: rgba(11, 26, 46, .26); -webkit-backdrop-filter: blur(7px) saturate(110%); backdrop-filter: blur(7px) saturate(110%); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s linear .35s; }
.mm-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }

/* ---------- a panel ---------- */
.mm { position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 2; max-height: calc(100vh - var(--hdr)); overflow: hidden auto; overscroll-behavior: contain; color: var(--ink); font-size: 15px; font-weight: 400; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease-out), visibility 0s linear .16s; }
.mm.is-on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .24s var(--ease-out) .04s; }
/* two tracks: the tiles, centred in what is left, and the text-link column at a FIXED width on the right, so the divider
   and the links sit at the same x in every panel and do not jump while the sheet morphs from item to item */
.mm { --mm-cols: 470px; }
.mm__in { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 34px 0 42px; display: grid; grid-template-columns: minmax(0, 1fr) var(--mm-cols); align-items: start; gap: clamp(28px, 3vw, 44px); }
.mm__tiles { justify-self: center; display: flex; align-items: flex-start; gap: clamp(28px, 3vw, 44px); }
.mm__lead { display: flex; gap: clamp(18px, 2vw, 28px); }
.mm__cols { display: flex; gap: 8px clamp(24px, 2.6vw, 40px); padding-left: clamp(28px, 3vw, 44px); border-left: 1px solid var(--line); align-self: stretch; flex-wrap: wrap; align-content: flex-start; width: var(--mm-cols); }
.mm__col { min-width: 168px; }
.mm__foot { flex-basis: 100%; display: grid; gap: 4px; margin-top: 12px; }
.mm__h { margin: 2px 0 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mm__col ul { display: grid; gap: 1px; }
.mm__col a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 14px; font-weight: 550; letter-spacing: -.005em; line-height: 1.3; color: var(--ink); transition: color .2s; }
.mm__col a:hover { color: var(--blue-t); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mm__col a svg { width: 12px; height: 12px; opacity: .6; }
.mm__col a[aria-current="page"] { color: var(--blue-t); }
.mm__note { font-size: 12.5px; color: var(--ink-3); }
.mm__note a { color: var(--ink-2); font-weight: 600; }

/* tiles: picture (device composition, app icon or a small card) + name + small links, each a real link */
.mmt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mmt__main { display: flex; flex-direction: column; align-items: center; align-self: stretch; color: var(--ink); border-radius: 14px; }
.mmt__main:hover { text-decoration: none; }
.mmt__main:focus-visible { outline-offset: 4px; }
.mmt__pic { position: relative; display: grid; place-items: center; transition: transform .45s var(--ease-out); }
.mmt__main:hover .mmt__pic, .mmt__main:focus-visible .mmt__pic { transform: translateY(-4px); }
.mmt__name { margin-top: 12px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.mmt__main:hover .mmt__name { color: var(--blue-t); }
.mmt__sub { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.mmt__sub--soon { display: inline-flex; align-items: center; height: 20px; margin-top: 5px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .01em; color: #8a5300; background: #fff3d6; box-shadow: inset 0 0 0 1px rgba(236, 138, 28, .3); }
.mmt__links { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; }
.mmt__links a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(11, 26, 46, .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.mmt__links a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* lead tile: a clean cut-out device composition (tools/nav-thumbs.cjs renders them with no shadow of their own) standing
   on the floor of its box, with ONE soft contact shadow right under it */
.mmt--lead { width: clamp(200px, 17vw, 240px); }
.mmt--lead .mmt__pic { width: 100%; height: clamp(150px, 12.6vw, 180px); }
.mmt--lead .mmt__pic::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -7px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 26, 46, .2), rgba(11, 26, 46, .06) 60%, transparent); z-index: -1; transition: transform .45s var(--ease-out), opacity .45s; }
.mmt--lead .mmt__main:hover .mmt__pic::after { transform: translateY(4px) scaleX(.94); opacity: .7; }
.mmt__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* emblem + device (PostureCo Cloud, Joe's Oct 12 Loom): the emblem image on top (its dashes drift on their own), a smaller
   MacBook below it, not overlapping; Joe 10/12: the laptop, Coming soon and the links all centred under the cloud, one
   axis down the tile; the tile's one contact shadow sits under the laptop only */
.mmt--lead .mmt__pic--emb { height: auto; display: block; }
.mmt__pic--emb picture { display: contents; }
.mmt__pic--emb .mmt__emb { position: relative; z-index: 1; display: block; width: 92%; height: auto; margin: 0 auto; }
.mmt__pic--emb .mmt__img { position: relative; inset: auto; display: block; width: 70%; height: auto; margin: 4px auto 0; }
.mmt--lead .mmt__pic--emb::after { left: 19%; right: 19%; }
/* app tiles: the app icon with the family's soft blue shadow (.close__icon in styles.css) */
.mm__apps { display: grid; }
.mm__grid { display: grid; gap: 22px 14px; }
.mm__grid--3 { grid-template-columns: repeat(3, 118px); }
.mm__grid--2 { grid-template-columns: repeat(2, 118px); }
.mm__grid--1 { grid-template-columns: 118px; }
.mmt--app { width: 118px; }
.mmt--app .mmt__pic { width: 64px; height: 64px; margin-top: 6px; }
.mmt__icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 12px 22px -12px rgba(0, 128, 178, .65), 0 1px 2px rgba(11, 26, 46, .08); }
.mmt--app .mmt__name { margin-top: 11px; font-size: 14px; }
/* one-line subs ("Posture assessments" is a few px wider than the 118 px tile; the 14 px column gap takes it) */
.mm__grid--3 .mmt__sub { white-space: nowrap; }
/* a logo's own mark instead of an App Store tile (PostureRay's tile, PostureScribe.AI's bubble): drawn whole, no tile
   clip; the soft blue shadow follows the mark's shape */
.mmt__icon--mark { border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 128, 178, .22)); }
/* list groups (PostureCo Cloud's ten apps, Joe 10/12): two columns of compact rows, icon beside name + one-line sub, read
   in pairs; same 402 px as three big tiles, so the fixed tile track and the divider do not move */
.mm__grid--list { grid-template-columns: repeat(2, 194px); gap: 8px 14px; }
.mmt--row { align-items: stretch; text-align: left; }
.mmt--row .mmt__main { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: center; }
.mmt--row .mmt__pic { grid-row: 1 / span 2; width: 44px; height: 44px; }
.mmt--row .mmt__main:hover .mmt__pic, .mmt--row .mmt__main:focus-visible .mmt__pic { transform: translateY(-2px); }
.mmt--row .mmt__icon { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 9px 16px -10px rgba(0, 128, 178, .65), 0 1px 2px rgba(11, 26, 46, .08); }
.mmt--row .mmt__icon--mark { border-radius: 0; box-shadow: none; }
.mmt--row .mmt__name { grid-column: 2; align-self: end; margin-top: 0; font-size: 14px; white-space: nowrap; }
.mmt--row .mmt__sub { grid-column: 2; align-self: start; margin-top: 1px; white-space: nowrap; }
.mmt--row .mmt__sub--soon { justify-self: start; height: 18px; margin-top: 3px; padding: 0 7px; font-size: 10.5px; }
/* logo tiles (RemoteScreen panel → PostureCo Cloud, WEB-147): the compact lockup on the same 64 px row as the app icons,
   straight on the white sheet (no plate, no shadow), its Coming soon pill where an app tile's name sits */
.mm__grid--logo { grid-template-columns: 184px; }
.mmt--logo { width: 184px; }
.mmt--logo .mmt__pic { width: 176px; height: 64px; margin-top: 6px; }
.mmt__logo { width: 100%; height: 100%; object-fit: contain; }
.mmt--logo .mmt__sub--soon { margin-top: 12px; }
/* card tiles (Research counts, Support): a small sky card instead of a picture */
.mmt--card { width: clamp(150px, 12.4vw, 178px); }
.mmt__pic--card { width: 100%; height: 118px; align-content: center; gap: 2px; border-radius: 18px; background: linear-gradient(180deg, #e9f5fb 0%, #f1f8fc 55%, #f6fafd 100%); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .14); transition: transform .45s var(--ease-out), box-shadow .45s; }
.mmt__main:hover .mmt__pic--card { box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .3), 0 18px 30px -22px rgba(0, 95, 134, .7); }
.mmt__n { font-size: 44px; font-weight: 750; letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, var(--sky) -20%, var(--blue-d) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mmt__pic--card small { font-size: 12px; font-weight: 600; color: var(--blue-d); }
.mmt__glyph { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #fff; color: var(--blue-t); box-shadow: 0 12px 22px -14px rgba(0, 128, 178, .7), inset 0 0 0 1px rgba(0, 128, 178, .14); }
.mmt__glyph svg { width: 24px; height: 24px; }

/* entrance: the open panel's tiles rise in one after another, its link columns follow */
.mm .mmt, .mm .mm__h, .mm .mm__col ul, .mm .mm__foot { opacity: 0; transform: translateY(8px); }
.mm.is-on .mmt, .mm.is-on .mm__h, .mm.is-on .mm__col ul, .mm.is-on .mm__foot { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) calc(var(--i, 0) * 35ms + 60ms), transform .55s var(--ease-out) calc(var(--i, 0) * 35ms + 60ms); }
.mm.is-on .mm__cols .mm__h, .mm.is-on .mm__col ul, .mm.is-on .mm__foot { transition-delay: 140ms; }

/* narrower desktops: one link column, the second stacks under it */
@media (max-width: 1279px) {
  .mm { --mm-cols: 270px; }
  .mm__cols { flex-direction: column; flex-wrap: nowrap; gap: 18px; }
  .mm__col { min-width: 0; }
  .mmt--lead { width: 200px; }
}
/* The eighth item (PostureCo Cloud, WEB-147) must leave Get the app inside the same gutter as the logo at every desktop width
   (review: at 1280–1318 px the CTA was clipped). Measured with .work/cloud/nav/ctafit.cjs:
     ≥ 1400 px      cloud glyph + "PostureCo Cloud"
     1181–1399 px   cloud glyph + "Cloud" (the leading word stays for screen readers); 1280–1399 px also tighten the bar's gaps
     1101–1180 px   the cloud glyph alone (the full name stays for screen readers)
   Final regression QA (.work/cloud/final-regress/tune.cjs): the compact bar now runs to 1279 px (at 1241 px the default-size
   bar was 1.5 px over-full) and 1101–1180 px is a touch tighter (at 1101 px the row was 7.4 px over-full): an over-full
   row is absorbed by Get the app, whose iPhone glyph squashed to 3.6 px. Every fine-pointer width now keeps ≥ 16 px of slack,
   enough for a classic (Windows) scrollbar at the bottom of each range. */
.nav__l { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1399px) {
  .nav__pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .hdr__in { gap: 18px; }
  .nav { gap: 0; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .nav__a--ic .nav__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav__a--ic { gap: 0; }
}
/* 1101–1279 px: the eight items, their chevrons and Get the app still fit on one line */
@media (min-width: 1101px) and (max-width: 1279px) {
  .hdr__in { gap: 18px; }
  .hdr__nav { font-size: 13px; }
  .nav { gap: 0; }
  .nav__a { padding: 0 7px; }
  .nav__it--mm .nav__a { padding-right: 1px; }
  .nav__tg { width: 18px; margin-right: 1px; }
  .nav__it.is-cur .nav__a::after { left: 7px; }
  .nav__it:not(.nav__it--mm).is-cur .nav__a::after { right: 7px; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .hdr__in { gap: 14px; }
  .nav__a { padding: 0 6px; }
  .nav__tg { width: 16px; }
  .nav__it.is-cur .nav__a::after { left: 6px; }
  .nav__it:not(.nav__it--mm).is-cur .nav__a::after { right: 6px; }
}
/* touch screens at desktop widths (iPad landscape): the chevron is the only way to open a panel without leaving the
   page, so it gets a comfortable target (≥ 30 × 40 px) and the label gives up a little padding to make room */
@media (min-width: 1101px) and (pointer: coarse) {
  .nav__it { height: 40px; }
  .nav__tg { width: 32px; margin-right: 0; }
}
@media (min-width: 1101px) and (max-width: 1279px) and (pointer: coarse) {
  .hdr__in { gap: 12px; }
  .nav__a { padding: 0 5px; }
  .nav__it--mm .nav__a { padding-right: 0; }
  .nav__tg { width: 30px; }
  .nav__it.is-cur .nav__a::after { left: 5px; right: 0; }
  .nav__it:not(.nav__it--mm).is-cur .nav__a::after { right: 5px; }
}
@media (max-width: 1100px) {
  .mm, .mm-bg, .mm-scrim { display: none; }
}

/* ---------- mobile: the #menu accordion ---------- */
/* the menu scrolls vertically only (nothing inside may make it pan sideways under a finger) */
.menu { overflow-x: hidden; }
/* the App Store badge keeps its own width in the footer grid, so its focus/hover ring hugs it */
.menu__foot .badge { justify-self: start; }
.menu__links { gap: 0; }
.menu__it { border-bottom: 1px solid var(--line); }
.menu__it:last-child { border-bottom: 0; }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu__links .menu__a { flex: 1; min-width: 0; }
.menu__tg { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 12px; color: var(--ink-2); transition: background-color .2s; }
@media (hover: hover) { .menu__tg:hover { background: rgba(11, 26, 46, .05); } }
.menu__tg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.menu__tg[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease-out), visibility 0s linear .45s; }
.menu__it.is-open .menu__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease-out); }
.menu__subin { min-height: 0; overflow: hidden; }
.menu__subin > :first-child { margin-top: 2px; }
.menu__subin > :last-child { margin-bottom: 18px; }
.menu__h { margin: 14px 0 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.menu__apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.menu__links .menu__app { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.menu__app:hover { text-decoration: none; }
.menu__app span { display: grid; line-height: 1.25; }
.menu__app b { font-weight: 650; font-size: 15.5px; }
.menu__app small { font-size: 13px; color: var(--ink-3); }
.menu__app small.is-soon { color: #8a5300; }
.menu__a .menu__soon { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; vertical-align: middle; color: #8a5300; background: #fff4dc; }
.menu__ic { width: 38px; height: 38px; flex: none; border-radius: 9px; box-shadow: 0 8px 16px -10px rgba(0, 128, 178, .7), 0 1px 2px rgba(11, 26, 46, .08); }
.menu__ic--mark { border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0, 128, 178, .22)); }
.menu__gl { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; color: var(--blue-t); background: linear-gradient(180deg, #e9f5fb, #f6fafd); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .16); }
.menu__gl svg { width: 18px; height: 18px; }
.menu__gl--wide svg { width: 24px; height: 11.3px; }   /* the booth cloud (#i-pcloud, 2.12 : 1) */
.menu__more { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
.menu__links .menu__more a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.menu__more a svg { width: 13px; height: 13px; opacity: .6; }
.menu__more a[aria-current="page"], .menu__app[aria-current="page"] b { color: var(--blue-t); }

@media (prefers-reduced-motion: reduce) {
  .mm-bg, .hdr.is-mm .mm-bg { transition: opacity .2s; }
  .mm .mmt, .mm .mm__h, .mm .mm__col ul, .mm .mm__foot { transform: none; }
  .mm.is-on .mmt, .mm.is-on .mm__h, .mm.is-on .mm__col ul, .mm.is-on .mm__foot { transition: opacity .2s; }
  .mmt__pic, .mmt--lead .mmt__pic::after, .nav__tg svg, .menu__tg svg { transition: none; }
  .mmt__main:hover .mmt__pic, .mmt__main:focus-visible .mmt__pic { transform: none; }
  .mm-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__sub, .menu__it.is-open .menu__sub { transition: none; }
}

/* Touch screens at desktop widths (pointer: coarse > 1100 px: iPad landscape, Surface in tablet mode), WEB-147 regression
   QA: with the eighth item and the 30–32 px touch chevrons the bar was over-full (Get the app squeezed, its iPhone glyph 0 px).
   On touch the PostureCo Cloud item is a plain link (no chevron or panel), shown as its cloud glyph below 1400 px and as
   "Cloud" from 1400 px (the full name stays for screen readers); 1101–1149 px also tighten the spacing. Measured slack with
   .work/cloud/final-regress/tune.cjs (hasTouch): 1101 +2.6, 1112 +11, 1133 +32, 1180 +46, 1194 +59, 1280 +48, 1366 +128,
   1400 +57, 1440 +69 px; mouse widths unchanged. */
@media (min-width: 1101px) and (pointer: coarse) {
  .nav__it[data-nav="cloud"] .nav__tg { display: none; }
  .nav__it[data-nav="cloud"] .nav__a { padding-right: 9px; border-radius: 10px; }
}
@media (min-width: 1101px) and (max-width: 1399px) and (pointer: coarse) {
  .nav__a--ic .nav__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nav__a--ic { gap: 0; }
}
@media (min-width: 1400px) and (pointer: coarse) {
  .nav__pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1149px) and (pointer: coarse) {
  .hdr__in { gap: 8px; }
  .nav__a { padding: 0 3px; }
  .nav__it--mm .nav__a { padding-right: 0; }
  .nav__it[data-nav="cloud"] .nav__a { padding-right: 6px; }
  .nav__it.is-cur .nav__a::after { left: 3px; }
  .nav__it:not(.nav__it--mm).is-cur .nav__a::after { right: 3px; }
}