/* The site nav's panels and the phone sheet: how they open and what is in
   them. Split out of site.css (which every page inlines) because none of it
   is seen until a visitor reaches for the menu: the closed bar, the hidden
   panels and the hidden sheet stay inline there, so nothing flashes, and
   this file arrives as a cached, stamped stylesheet: preloaded in the head
   (src/site/layout.js NAV_CSS_HEAD) and applied by site.js, which holds a
   burger tap until it has loaded, with a <noscript> link (NAV_CSS_TAG) for
   visitors without scripts. It loads after site.css, so a rule
   here wins a tie with one there; the reduced-motion overrides that apply
   to these rules are therefore here too, at the end. */

/* ── panels ─────────────────────────────────────────────────────────── */
.np-product{--pw:880px}
.np-resources{--pw:860px}
/* The gap between trigger and panel, bridged, so a pointer travelling down
   to the panel never crosses dead space. site.js adds a short grace on
   leave for the diagonal path as well. */
.navpanel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.navitem.open .navpanel{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%);
  transition:opacity .18s var(--ease-out),transform .2s var(--ease-out),visibility 0s}
html:not(.js) .navitem:hover .navpanel,
html:not(.js) .navitem:focus-within .navpanel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}


html.js #nav.panel-open .navbg{opacity:1;visibility:visible;
  transition:opacity .18s var(--ease-out),transform .26s var(--ease-out),visibility 0s}
html.js .navpanel{left:0;z-index:62;background:none;border-color:transparent;box-shadow:none;
  transform-origin:0 0;transform:translate(calc(var(--px,0px) + var(--dx,0px)),-4px);
  transition:opacity .12s var(--ease-out),transform .2s var(--ease-out),visibility 0s .12s}
html.js .navitem.open .navpanel{transform:translate(var(--px,0px),0);
  transition:opacity .2s var(--ease-out) .03s,transform .26s var(--ease-out),visibility 0s}
/* set without travelling: a panel being placed before it opens */
html.js #nav .np-prep{transition:none!important}

.npin{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px 12px;padding:12px;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.npfoot{flex:none}
/* Product: Free, then Pro and its screen as one tinted region, so the paid
   side reads as one thing with its price at the top. */
.np-product .npin{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 216px;column-gap:0}
.np-product .npcol:first-child{margin-right:12px}
.np-resources .npin{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.npcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.npcol.pro,.np-product .npaside{background:linear-gradient(180deg,rgba(2,95,253,.075),rgba(2,95,253,.03))}
.npcol.pro{border-radius:14px 0 0 14px;padding:0 4px 6px}
.nptitle{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);padding:8px 10px 6px}

/* A column's head: what the plan is called and what it costs. */
.nphead{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 10px 8px}
.nphead b{display:block;font:700 17px/1.2 var(--disp);letter-spacing:-.022em;color:var(--ink)}
.nphead em{display:block;margin-top:3px;font:500 12.5px/1.3 var(--body);font-style:normal;letter-spacing:-.003em;
  color:var(--ink3);font-variant-numeric:tabular-nums}
.nphead.pro b{color:var(--blue)}
.nphead.pro em{color:var(--blue-dk)}
.npart{flex:none;width:40px;height:40px}
.npart .mmart{transform:scale(.6452);transform-origin:0 0}

.nrow{position:relative;display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:12px;
  text-decoration:none;color:var(--ink);transition:transform .16s var(--ease-out)}
.nrow::before,.npcol.compact a::before,.npfoot a::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:rgba(2,95,253,.06);opacity:0;transition:opacity .15s var(--ease-out)}
.npcol.pro .nrow::before{background:rgba(2,95,253,.09)}
.nrow:hover::before,.npcol.compact a:hover::before,.npfoot a:hover::before{opacity:1}
.nrow:active,.npcol.compact a:active,.npfoot a:active{transform:scale(.98)}
.nrow:focus-visible,.npcol.compact a:focus-visible,.npfoot a:focus-visible,.npaside:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.nrow,.npcol.compact a,.npfoot a{isolation:isolate}
.ni{flex:none;width:36px;height:36px;padding:8px;border-radius:10px;
  background:rgba(2,95,253,.08);color:var(--blue)}
.npcol.pro .ni{background:#fff;box-shadow:0 1px 2px rgba(6,20,54,.08)}
.nrt{min-width:0;padding-top:1px}
.nrow.bare{align-items:center;padding:7px 10px}
.nrow.bare .ni{width:32px;height:32px;padding:6px;border-radius:9px}
.nrow.bare .nrt{padding-top:0}
.nrt b{display:flex;align-items:center;gap:8px;font:500 14.5px/1.3 var(--body);letter-spacing:-.005em}
.nrt>span{display:block;margin-top:3px;font-size:13px;line-height:1.42;color:var(--ink3)}
.nrow:hover b,.nrow[aria-current] b{color:var(--blue)}

.npcol.compact a{position:relative;display:flex;align-items:center;min-height:38px;padding:0 10px;
  border-radius:9px;font-size:14px;color:var(--ink2);text-decoration:none;transition:transform .16s var(--ease-out)}
.npcol.compact a:hover,.npcol.compact a[aria-current]{color:var(--ink)}

/* The real draft screen, the end of the Pro region: what Pro makes, cropped
   to its top. Real UI, never a mock-up (PRODUCT.md). */
.npaside{display:flex;flex-direction:column;padding:12px;border-radius:0 14px 14px 0;text-decoration:none;
  color:var(--ink);transition:transform .16s var(--ease-out)}
.npaside:active{transform:scale(.98)}
.npshot{display:block;height:188px;overflow:hidden;border-radius:10px;background:#fff;
  box-shadow:0 10px 24px -14px rgba(6,20,54,.35),0 0 0 1px rgba(11,13,17,.06);margin-bottom:12px}
.npshot img{width:100%;height:auto;transition:transform .5s var(--ease-out)}
/* fetched by site.js on first reach (data-src): with no script there is no
   picture to show, so the frame goes rather than printing its alt text */
html:not(.js) .npshot{display:none}
/* a tap on a touch screen leaves :hover stuck: lift only under a real pointer */
@media (hover:hover) and (pointer:fine){.npaside:hover .npshot img{transform:translateY(-8px)}}
.npaside b{font:700 15px/1.25 var(--disp);letter-spacing:-.02em;padding:0 2px;text-wrap:balance}
.npmore{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0 2px;
  font:600 13.5px/1.2 var(--body);color:var(--blue)}
.npaside:hover .npmore{color:var(--blue-dk)}

.npfoot{display:flex;gap:4px;padding:8px 12px 10px;border-top:1px solid var(--hair2)}
.npfoot a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;
  border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;
  transition:transform .16s var(--ease-out)}

/* ── the phone sheet ────────────────────────────────────────────────── */
.mobmenu.open{visibility:visible;transition:none}
.mobmenu::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ground);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .3s var(--ease-drawer) .05s}
.mobmenu.open::before{transform:none;transition:transform .42s var(--ease-drawer)}
.mobmenu a{text-decoration:none;-webkit-tap-highlight-color:transparent}

/* Only the destinations scroll. The action has its own row, so it can never
   cover a destination or a focused link on a short screen. */
.mmlinks{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;padding:10px 12px 28px;margin-inline:-12px;scroll-padding-block:16px;
  /* the list places itself when a group opens (site.js); the browser's own
     anchoring, moving it again as the panel above closes, fights that */
  overflow-anchor:none}
/* (the 12px either side is the room the rows' press tint runs into, inside
   the list's own box, so the list never scrolls sideways) */
/* While more of the list is below the action row (site.js sets .more), its
   foot fades over a full row's height: whatever row is cut reads as a row
   going on, never a hard-edged sliver, and a row hidden entirely still has
   the one above it fading as the hint. At the end of the list, no fade. */
.mmlinks.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fe,0px) - 76px),rgba(0,0,0,.12) calc(100% - var(--fe,0px) - 8px),transparent calc(100% - var(--fe,0px)));
          mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fe,0px) - 76px),rgba(0,0,0,.12) calc(100% - var(--fe,0px) - 8px),transparent calc(100% - var(--fe,0px)))}
/* Rows arrive in order, 40ms apart, travelling the way the ground did. */
.mmlinks>*{flex:none;opacity:0;transform:translateY(-14px);
  transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)}
.mobmenu.open .mmlinks>*{opacity:1;transform:none;
  transition:opacity .32s var(--ease-drawer),transform .32s var(--ease-drawer);
  transition-delay:calc(70ms + var(--i,0) * 40ms)}

/* Every row: a tint that lands on the press and fades on release, and the
   words give a little under the thumb. The tint runs into the gutter so the
   text stays on the grid. */
.mmproduct,.mmnavlink,.mmtoggle,.mmrow,.mmsublink{position:relative;isolation:isolate;
  display:flex;align-items:center;width:100%;color:var(--ink);text-align:left;
  border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mmproduct::before,.mmnavlink::before,.mmtoggle::before,.mmrow::before,.mmsublink::before{
  content:"";position:absolute;inset:0 -12px;z-index:-1;border-radius:14px;
  background:rgba(2,95,253,.07);opacity:0;transition:opacity .22s var(--ease-out)}
@media(hover:hover){
  .mmproduct:hover::before,.mmnavlink:hover::before,.mmtoggle:hover::before,.mmrow:hover::before,.mmsublink:hover::before{opacity:1}
}
.mmproduct:active::before,.mmnavlink:active::before,.mmtoggle:active::before,.mmrow:active::before,.mmsublink:active::before{opacity:1;transition-duration:0s}
.mmproduct .mmpt,.mmnavlink b,.mmtoggle b,.mmrow b,.mmsublink span{transform-origin:0 50%;transition:transform .2s var(--ease-out)}
.mmproduct:active .mmpt,.mmnavlink:active b,.mmtoggle:active b,.mmrow:active b{transform:scale(.97);transition-duration:.08s}
.mmproduct:focus-visible,.mmnavlink:focus-visible,.mmtoggle:focus-visible,.mmrow:focus-visible,.mmsublink:focus-visible,
.mmmore a:focus-visible,.mmquiet:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:12px}

/* 1. What there is to buy, one compact row each: the tile, the name, the
   price. */
.mmproduct{gap:12px;min-height:52px;padding:4px 0}
.mmpt{flex:1;display:flex;flex-direction:column;min-width:0}
.mmpt b{font:700 16.5px/1.2 var(--disp);letter-spacing:-.02em}
.mmpt em{margin-top:1px;font:500 13px/1.3 var(--body);font-style:normal;letter-spacing:-.004em;
  font-variant-numeric:tabular-nums;color:var(--blue-dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmproduct>.na{flex:none;width:16px;height:16px;color:var(--ink3)}
/* the tile, drawn at 62px and set at 36px: a static scale, not a motion */
.mmproduct .mmart{width:62px;height:62px;margin:-13px;transform:scale(.58)}
.mmproduct+.mmproduct{margin-top:2px}
.mmproduct[aria-current] b{color:var(--blue)}
.mmart{position:relative;flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 18px -10px rgba(6,20,54,.5),inset 0 0 0 .5px rgba(11,13,17,.08)}
/* Pro: a follow-up being written, on the brand blue. */
.mmart-pro{background:linear-gradient(160deg,var(--blue-hi),var(--blue) 55%,var(--blue-dk))}
.mmart-pro>span{display:flex;flex-direction:column;gap:3.5px;width:38px;padding:6px 6px 6px;border-radius:6px;
  background:#fff;transform:translateY(5px) rotate(-6deg);box-shadow:0 6px 12px -4px rgba(1,30,90,.55)}
.mmart-pro i{display:block;height:2.5px;border-radius:2px;background:rgba(11,13,17,.22)}
.mmart-pro i.c{width:60%;height:5px;border-radius:3px;background:rgba(2,95,253,.18)}
.mmart-pro i.s{width:70%}
.mmart-pro i.b{height:6px;margin-top:2px;border-radius:2px;background:var(--blue)}
/* Metal: the real gold card, on ink. */
.mmart-metal{background:radial-gradient(120% 90% at 30% 15%,#2a2c31,#0b0d11 70%)}
.mmart-metal img{width:50px;height:auto;border-radius:3px;transform:rotate(-9deg);
  box-shadow:0 7px 12px -5px rgba(0,0,0,.8),0 0 0 .5px rgba(255,255,255,.12)}
/* Teams: three of one company's passes, fanned. */
.mmart-teams{background:linear-gradient(160deg,#EEF3FB,#DCE5F3)}
.mmart-teams i{position:absolute;left:50%;top:50%;width:26px;height:36px;margin:-18px 0 0 -13px;border-radius:4px;
  background:linear-gradient(#fff,#fff) 5px 6px/6px 6px no-repeat,
    linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)) 5px 22px/15px 2.5px no-repeat,
    linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 5px 27px/11px 2px no-repeat,#13223F;
  box-shadow:0 5px 10px -4px rgba(6,20,54,.6)}
.mmart-teams i:nth-child(-n+2){background-color:#3A4A68}
.mmart-teams i:nth-child(1){transform:translate(-11px,2px) rotate(-14deg)}
.mmart-teams i:nth-child(2){transform:translate(11px,2px) rotate(14deg)}
.mmart-teams i:nth-child(3){transform:translateY(-1px)}

/* 0. What Free already gives: one quiet line, so Pro reads as the step up
   rather than the price of the card. */
.mmfree{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:8px;
  font:500 13.5px/1.35 var(--body);letter-spacing:-.004em;color:var(--ink2)}
.mmcheck{flex:none;width:16px;height:16px;color:var(--ink3)}

/* Pro, the hero row: the paid thing first, on its own blue-washed ground. */
.mmhero{min-height:56px;margin:0 0 4px;padding:6px 12px 6px 10px;border-radius:14px;
  background:linear-gradient(160deg,rgba(2,95,253,.1),rgba(2,95,253,.035));box-shadow:inset 0 0 0 1px rgba(2,95,253,.14)}
.mmhero::before{inset:0;border-radius:inherit;background:rgba(2,95,253,.08)}
.mmhero .mmpt b{font-size:17px;color:var(--blue)}
.mmhero>.na{color:var(--blue)}
.mmhero:active>.na{transform:translateX(2px)}

/* A page link or a group's toggle: the shared shape. The grid's cells
   (below, so they win the tie) set their own size and ground. */
.mmnavlink,.mmtoggle{gap:16px;min-height:52px;padding:6px 0}
.mmtoggle b,.mmnavlink b{flex:1;min-width:0}
.mmtoggle i{flex:none;width:9px;height:9px;margin:0 6px 4px 0;border-right:1.75px solid var(--ink3);
  border-bottom:1.75px solid var(--ink3);transform:rotate(45deg);transition:transform .32s var(--ease-drawer)}
.mmtoggle[aria-expanded=true] i{transform:translateY(5px) rotate(225deg)}
.mmnavlink[aria-current] b,.mmtoggle[aria-current] b{color:var(--blue)}

/* 2. Everything else: a two-column grid, one tap each; a group opens its
   panel full width directly under its toggle's row. The closed sheet fits
   320x568 and up without scrolling. */
.mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.mmcell{justify-content:space-between;min-height:48px;padding:6px 12px;border-radius:12px;background:rgba(10,12,16,.035)}
.mmcell::before{inset:0;border-radius:inherit}
.mmcell b{font:600 16px/1.2 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.mmcell[aria-expanded=true]{background:rgba(2,95,253,.08)}
.mmcell[aria-expanded=true] b,.mmcell[aria-current] b{color:var(--blue)}
/* a group's panel: full width, directly under its toggle's row */
.mmgrid>.mmcontent{grid-column:1/-1}

/* A group, opened in place. Its rows follow each other down; site.js moves
   the rest of the sheet aside with transforms rather than letting it jump. */
.mmcontent{padding:2px 0 14px}
.mmcontent[hidden]{display:none}
.mmcontent>*{opacity:0;transform:translateY(-8px)}
.mmcontent.in>*{opacity:1;transform:none;
  transition:opacity .28s var(--ease-drawer),transform .28s var(--ease-drawer);
  transition-delay:calc(var(--j,0) * 22ms)}
.mmrow{gap:12px;min-height:48px;padding:4px 0}
.mmrow .ni{width:32px;height:32px;padding:6px;border-radius:9px}
.mmrow b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:500 16.5px/1.3 var(--body);letter-spacing:-.01em}
.mmrow[aria-current] b,.mmsublink[aria-current]{color:var(--blue)}
.mmsubtitle{margin:12px 0 2px;font:500 13px/1.4 var(--body);color:var(--ink3)}
.mmsubtitle.pro{color:var(--blue)}
.mmsublink{min-height:44px;padding:8px 0;font:400 16px/1.35 var(--body)}
.mmmore{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.mmmore a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 15px/1.3 var(--body);color:var(--blue);
  transition:transform .16s var(--ease-out)}
.mmmore a:active{transform:scale(.97);transition-duration:.08s}
@media(hover:hover){ .mmmore a:hover{color:var(--blue-dk)} }

/* The two ways on, pinned in the thumb zone over the bottom safe area: the
   free card, and Sign in as a real button beside it rather than a word in
   the small print, so a returning holder finds the way back where their
   thumb already is. Signed in, Sign in goes and the one button becomes
   Open dashboard (site.js). */
.mmfoot{flex:none;padding:10px 0 calc(env(safe-area-inset-bottom) + 6px);
  opacity:0;transform:translateY(18px);
  transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)}
.mobmenu.open .mmfoot{opacity:1;transform:none;
  transition:opacity .38s var(--ease-drawer) .2s,transform .38s var(--ease-drawer) .2s}
.mmacts{display:flex;gap:8px}
.mmfoot .btn{min-height:56px;padding-top:0;padding-bottom:0}
.mmfoot .mmcta{flex:1;min-width:0}
.mmsignin{flex:none;padding:0 22px}
.mmfoot .mmdash{gap:10px}
.mmdash .navme-i{width:30px;height:30px;background:#fff;color:var(--blue);font-size:12px}
.mmsignin.mmdash{padding:0 18px 0 12px}
.mmsignin.mmdash .navme-i{background:var(--blue);color:#fff}
.mmfine{display:flex;align-items:center;gap:4px 10px;min-height:44px;margin-top:2px}
.mmnote{flex:1;min-width:0;font:400 13.5px/1.35 var(--body);color:var(--ink3)}
.mmquiet{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px;
  margin-left:auto;margin-right:-4px;font:500 15px/1 var(--body);color:var(--ink2);transition:transform .16s var(--ease-out)}
@media(hover:hover){ .mmquiet:hover{color:var(--ink)} }
.mmquiet:active{transform:scale(.95);transition-duration:.08s}
/* The narrowest phones keep the two side by side, in tighter type: stacked,
   they cost a 640px-tall screen a whole row of the list. */
@media(max-width:359px){
  .mmfoot .btn{font-size:15px;padding-left:14px;padding-right:14px}
  .mmacts{gap:6px}
  .mmfree{font-size:12.5px;gap:6px;letter-spacing:-.01em}
  /* the price keeps its one line: the arrows step out first */
  .mmproduct>.na{display:none}
}

/* Short phones (under 600px tall, 320x568): the same sheet, closer set, so
   it still fits without scrolling. Every target stays at 44px or more. */
@media(max-width:991px) and (max-height:599px) and (orientation:portrait){
  .mmlinks{padding-top:6px;padding-bottom:12px}
  .mmfree{min-height:26px;margin-bottom:4px}
  .mmhero{min-height:52px;margin-bottom:2px}
  .mmgrid{gap:4px 8px;margin-top:8px;padding-top:8px}
  .mmcell{min-height:46px}
}

/* Tall phones (390x844 and up) have the room the 640px screen did not. The
   tiles come up to 44px, where the gold card reads as the real one; the
   rows and cells grow with the screen (--tall: how far past 780px it is,
   up to 160px); and what is left goes between the products and the grid,
   so the free line stays attached to the Pro row it sets up and the grid
   sits down in the thumb's reach, over the actions. With a group open the
   list overflows, there is nothing left over, and the rows glide up to
   make room (site.js). */
@media(max-width:991px) and (min-height:780px) and (orientation:portrait){
  .mmlinks{--tall:clamp(0px,100svh - 780px,160px)}
  .mmproduct{gap:14px;min-height:calc(62px + var(--tall) * .12)}
  .mmproduct .mmart{margin:-9px;transform:scale(.71)}
  .mmpt b{font-size:17.5px}
  .mmpt em{margin-top:2px;font-size:13.5px}
  .mmhero{min-height:calc(68px + var(--tall) * .12);margin:0 0 6px;padding:8px 14px 8px 12px;border-radius:16px}
  .mmhero .mmpt b{font-size:18px}
  [data-menu-product=teams]{margin-bottom:16px}
  .mmgrid{gap:calc(8px + var(--tall) * .04) 10px;margin-top:auto;padding-top:16px}
  .mmcell{min-height:calc(54px + var(--tall) * .08)}
}

/* Landscape on a phone: the rows on the left, the action on the right, both
   in view at once. The sheet's own column gap is --mm-gap, and the grid
   below reads it too, so the two can never drift apart. Under 360px of
   height (568x320) there is no room to pin the six cells beside the list
   and still clear the action, so it stays the plain two-column sheet: the
   list scrolls, the cells and panels in it, the action on the right. */
@media(max-width:991px) and (max-height:500px) and (orientation:landscape){
  .mobmenu{--mm-gap:clamp(24px,5vw,56px);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,36%);grid-template-rows:minmax(0,1fr);
    column-gap:var(--mm-gap)}
  .mmlinks{grid-row:1;padding-bottom:20px}
  .mmfoot{align-self:end;padding-bottom:calc(env(safe-area-inset-bottom) + 14px)}
  .mmproduct{min-height:52px}
}

/* From 360px of height the list spans the whole sheet as a grid of its own
   with the same two columns: the products on the left, then the free line
   under them; the six cells in the right-hand column, paired row for row
   with the three products, above the action, which sits over the foot of
   that column. .mmgrid itself steps aside (display:contents) so a group's
   panel can open in the left column, under the products, while every cell
   stays where it is: each is sticky at its own row's place, so all six stay
   in view and in reach however far the panel is scrolled. In flow
   throughout: the cells' width is the track's own, and nothing depends on
   the safe-area insets to fit. */
@media(max-width:991px) and (min-height:360px) and (max-height:500px) and (orientation:landscape){
  /* the right-hand pair is the sheet's own right column, split in two:
     2 x (18% - 5px) + the 10px gap = 36%, 2 x 135px + 10px = 280px; the
     spacer track makes up the sheet's column gap less the two 10px gaps */
  .mmlinks{grid-column:1/-1;display:grid;align-content:start;column-gap:10px;
    grid-template-columns:minmax(0,1fr) calc(var(--mm-gap) - 20px) minmax(135px,calc(18% - 5px)) minmax(135px,calc(18% - 5px));
    grid-template-rows:repeat(3,52px)}
  .mmfoot{grid-column:2;grid-row:1;position:relative;z-index:1;padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
  .mmfoot .btn{min-height:52px}
  .mmlinks>.mmproduct{grid-column:1;margin:0}
  [data-menu-product=metal]{grid-row:2}
  [data-menu-product=teams]{grid-row:3}
  .mmfree{grid-column:1;grid-row:4;margin:6px 0 0}
  .mmgrid{display:contents}
  .mmgrid>.mmcell{grid-column:3;min-height:46px;margin:3px 0;gap:8px;padding:6px 10px;position:sticky}
  .mmgrid>.mmcell+.mmcell{grid-column:4}
  .mmcell b{font-size:15px}
  /* sticky where each row sits unscrolled: the list's 10px, then 52px rows */
  .mmcell[data-row="1"]{grid-row:1;top:13px}
  .mmcell[data-row="2"]{grid-row:2;top:65px}
  .mmcell[data-row="3"]{grid-row:3;top:117px}
  .mmgrid>.mmcontent{grid-column:1;grid-row:5;padding-top:8px}
  /* the cells arrive with the rows (the grid that staggered them is gone) */
  .mmgrid>.mmcell{opacity:0;transform:translateY(-14px);
    transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)}
  .mobmenu.open .mmgrid>.mmcell{opacity:1;transform:none;
    transition:opacity .32s var(--ease-drawer),transform .32s var(--ease-drawer);
    transition-delay:calc(110ms + var(--i,0) * 40ms)}
}

/* Reduced motion keeps the fades, which say that something opened, and drops
   every movement. */
@media(prefers-reduced-motion:reduce){
  /* the shared surface and its contents appear in place: no glide, no slip */
  html.js .navpanel,html.js .navitem.open .navpanel{transform:translate(var(--px,0px),0)!important}
  html.js #nav.panel-open .navbg{transition:opacity .18s var(--ease-out),visibility 0s}
  /* The sheet cross-fades as one piece: nothing unrolls, slides or staggers,
     and an opened group is simply there. */
  .mobmenu.open{opacity:1;transition:opacity .16s var(--ease-out)!important}
  .mobmenu::before,.mmlinks>*,.mmgrid>.mmcell,.mmfoot,.mmcontent>*{transform:none!important;transition:none!important}
  .mmlinks>*,.mmgrid>.mmcell,.mmfoot,.mmcontent>*{opacity:1!important}
  .mmtoggle i{transition:none!important}
  .npaside:hover .npshot img,.mmhero:active .na{transform:none}
}