/* Site chrome shared by every page: the floating header and the footer.
 *
 * One file so the app, the landing pages and the policy pages cannot drift
 * apart again. Colours come from each page's own tokens (--paper, --panel,
 * --ink, --sub, --muted, --hair), which every stylesheet defines for both
 * themes. Load it after the page's stylesheet so these rules win. */

/* ── header ─────────────────────────────────────────────── */

/* A floating bar: inset from the edges, rounded, and sticky a little below the
   top of the window, with the page links centred between the logo and the
   account buttons. The same width on every page, so it never moves when you
   change page (owner, 2026-09-26). */
/* Liquid glass, like the buttons on the light (owner, 2026-09-29): clearer,
   so more of the page shows through, bending its colour a little richer, with
   a bright rim along the top, light pooled along the bottom edge and a soft
   sheen across the top. */
/* The glass is a layer behind the bar (::before), not the bar itself, so it
   can stretch down under the Resources menu when that opens (owner,
   2026-09-30: the bar stays glass as it slides down). A blur on the bar
   would have stopped the menu inside it from blurring anything: an element
   with a backdrop-filter is all its children can see through. */
.topbar {
  position: sticky; top: 12px; z-index: 40;
  width: min(1180px, calc(100% - 24px));
  margin: 12px auto 0;
  border-radius: 14px;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; bottom: 0; z-index: -1;
  border-radius: 14px; pointer-events: none;
  background:
    radial-gradient(120% 140% at 50% -60%, rgba(255, 255, 255, .5), transparent 60%),
    color-mix(in srgb, var(--panel) 52%, transparent);
  -webkit-backdrop-filter: saturate(1.9) blur(18px);
  backdrop-filter: saturate(1.9) blur(18px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -12px 18px -14px rgba(255, 255, 255, .6),
    0 1px 2px rgba(26, 28, 32, .05), 0 8px 24px rgba(26, 28, 32, .07);
  transition: bottom .3s cubic-bezier(.2, .8, .2, 1);
}
/* Open, the same glass reaches to the bottom of the menu (menu.js sets its height). */
.topbar.mega-open::before { bottom: calc(-1 * var(--mega-h, 0px)); }
[data-theme="dark"] .topbar::before {
  background:
    radial-gradient(120% 140% at 50% -60%, rgba(255, 255, 255, .07), transparent 60%),
    color-mix(in srgb, var(--panel) 60%, transparent);
  border-color: rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -12px 18px -14px rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

/* Equal outer columns keep the links on the page's centre line, whatever the
   logo and the buttons measure. */
.topbar .bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; min-height: 58px; padding: 0 12px 0 16px;
}
.topbar .brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
}
.topbar .navlinks { justify-self: center; display: flex; gap: 28px; }
.topbar .navlinks a {
  color: var(--sub); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.topbar .navlinks a:hover,
.topbar .navlinks a[aria-current="page"] { color: var(--ink); }
.topbar .authbtns {
  justify-self: end; display: flex; align-items: center; gap: 8px; margin: 0;
}
.topbar .btn { padding: 8px 14px; font-size: 14px; }

/* On a phone the links go behind a menu button (menu.js) at the end of the
   bar, and open in a panel under it; the logo and the buttons share the rest. */
.topbar .menubtn, .topbar .navmenu { display: none; }
@media (max-width: 760px) {
  .topbar .navlinks { display: none; }
  .topbar .bar { grid-template-columns: auto 1fr auto; gap: 6px; padding-left: 14px; padding-right: 6px; }
  /* Log in, Sign up and the menu button share about 200px on a small phone;
     tighter buttons keep each label on one line. */
  .topbar .authbtns { gap: 6px; }
  .topbar .authbtns .btn { padding: 7px 11px; white-space: nowrap; }
  .topbar .menubtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--ink); cursor: pointer;
  }
  .topbar .menubtn:hover { background: color-mix(in srgb, var(--hair) 45%, transparent); }
  .topbar .menubtn:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; }
  .topbar .menubtn svg path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .18s ease, opacity .18s ease; transform-origin: 10px 10px; }
  .topbar .menubtn[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
  .topbar .menubtn[aria-expanded="true"] .l2 { opacity: 0; }
  .topbar .menubtn[aria-expanded="true"] .l3 { transform: translateY(-4px) rotate(-45deg); }
  /* The panel hangs under the floating bar, in the same glass. It stops above
     the bottom of the screen and scrolls: with Product and Resources in it, it
     ran past the bottom of a phone with no way to reach the last links. */
  .topbar .navmenu:not([hidden]) {
    display: flex; flex-direction: column;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; border: 1px solid var(--hair); border-radius: 14px;
    /* Solid, not glass: the page's own headings showed through the links. */
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(26, 28, 32, .05), 0 12px 32px rgba(26, 28, 32, .12);
  }
  .topbar .navmenu a {
    display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500;
  }
  .topbar .navmenu a + a { border-top: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); }
  .topbar .navmenu a:hover, .topbar .navmenu a[aria-current="page"] { background: color-mix(in srgb, var(--hair) 40%, transparent); }
}
/* The smallest phones cannot fit the word beside Log in, Sign up and the menu
   button; the mark alone still says Nectabl, and its link still says so to a
   screen reader. */
@media (max-width: 360px) {
  .topbar .brand .wordmark { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .topbar .menubtn svg path { transition: none; }
}

/* ── footer ─────────────────────────────────────────────── */

.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--hair);
  background: color-mix(in srgb, var(--hair) 22%, var(--paper));
  color: var(--sub);
  font-size: 14px;
  line-height: 1.5;
}
.site-footer .inner {
  width: min(1180px, calc(100% - 48px)); margin: 0 auto;
  padding: 44px 0 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px;
}
.site-footer .about { grid-column: 1 / -1; }
.site-footer .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.site-footer .about p { margin: 12px 0 0; max-width: 34ch; color: var(--sub); }
.site-footer .fhead { margin: 0 0 12px; color: var(--ink); font-weight: 600; font-size: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer li { margin: 0; color: inherit; }
.site-footer a { color: var(--sub); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The strip under the rule: the two links people go looking for on purpose,
   and who owns the place. Not a column, because a column of two policies gives
   them the same weight as the product. */
.site-footer .legal {
  grid-column: 1 / -1; margin: 6px 0 0; padding-top: 18px;
  border-top: 1px solid var(--hair); color: var(--muted); font-size: 12.5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
.site-footer .legal .copy { margin-left: auto; }
@media (max-width: 600px) { .site-footer .legal .copy { margin-left: 0; width: 100%; } }

@media (min-width: 820px) {
  /* The blurb, then Product, Resources and Company. The policies appear twice on
     purpose: in Company for someone reading the footer, and in the strip along
     the bottom where people look for them by habit. */
  .site-footer .inner { grid-template-columns: 1.7fr 1fr 1.2fr .9fr; }
  .site-footer .about { grid-column: auto; }
}

/* The language choice in the footer, on every page that is translated. */
.langpick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.langpick select { font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--hair); background: var(--panel); color: var(--ink); }
/* Chinese. Neither Inter nor Nectabl Display has Chinese characters, so they
   come from the reader's system: PingFang on a Mac or iPhone, Microsoft YaHei
   on Windows, Noto Sans SC or Source Han Sans on Linux and Android. Each stack
   keeps our Latin face first, so "Nectabl", "Excel" and figures still match
   the English, and names the Chinese faces before the generic family. */
html:lang(zh-Hans) {
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC";
}
html:lang(zh-Hans) body { font-family: Inter, var(--cjk), system-ui, sans-serif; }
/* Headings named only Latin faces, so the browser chose a Chinese one on its
   own, and some Windows setups chose badly. They were also set for the English
   display face: letters pulled 2-3% together and lines nearly touching, which
   crams Chinese characters, whose square shapes already fill the em. Chinese
   takes normal tracking and more room between lines.
   The selectors reach past the pages' own heading rules (.hero h1,
   section.band h2, .benefit h3 are all weaker than body :is(...) here). */
html:lang(zh-Hans) body :is(h1:not(.lede), h2, h3, .brandline) {
  font-family: "Nectabl Display", Inter, var(--cjk), sans-serif;
  letter-spacing: normal;
}
html:lang(zh-Hans) body :is(h1:not(.lede), .brandline) { line-height: 1.25; }
/* The English headline gets relief from its small grey "from" and "to"; the
   Chinese one is thirteen solid bold characters, and Chinese bold is denser
   than Latin bold, so in full ink it outweighed the upload box it introduces.
   Softer ink keeps it the headline while the form keeps the eye (owner,
   2026-09-28). A lighter weight was tried and rejected: Microsoft YaHei has no
   weight between Regular and Bold, so on Windows it fell to Regular and read
   no stronger than the line beneath it. Smaller was tried too, and did not
   help. Mixed with the paper, so it holds in the dark theme as well. */
html:lang(zh-Hans) body .hero h1 { color: color-mix(in srgb, var(--ink) 90%, var(--paper)); }
html:lang(zh-Hans) body :is(h2, h3) { line-height: 1.35; }
html:lang(zh-Hans) body #tourCard h3 { font-family: "Nectabl Display", Inter, var(--cjk), system-ui, sans-serif; }

/* ── The signed-in header ─────────────────────────────────
   The page meter and the account menu, the same on every page. The app draws
   them itself; everywhere else nav.js draws the same markup. Moved here from
   the app so the two cannot drift apart. */
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.quota {
  font-size: 13.5px; color: var(--sub); padding: 6px 11px;
  border: 1px solid var(--hair); border-radius: 8px; background: var(--panel);
  white-space: nowrap;
}
.quota b { color: var(--ink); font-weight: 650; }
/* The pages chip gives way before the centred links would crowd the buttons;
   the Account page shows the same numbers. */
@media (max-width: 860px) { .quota { display: none; } }

/* The meter, in glyphs.
   "5565 of 6000 pages left + 1000000 credits" is 44 characters of header
   for two numbers, and it grew with the numbers: a million credits pushed
   the links off the centre line. An icon carries the noun, the title
   carries the sentence, and a compact count stops the width tracking the
   balance. */
.meter { display: inline-flex; align-items: center; gap: 12px; }
.meter .m { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.meter .m svg { flex: none; color: var(--muted); }
.meter .m b { font-weight: 650; color: var(--ink); }
.meter .m .of { color: var(--muted); }
.meter .m.owed b, .meter .m.owed svg { color: var(--warn); }

/* The account menu. */
.acct { position: relative; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hair); background: var(--panel); color: var(--sub);
}
.avatar:hover { color: var(--ink); border-color: var(--faint); }
.avatar[aria-expanded="true"] { color: var(--ink); border-color: var(--faint); background: var(--paper-2); }
/* The count of forwarded mail waiting, on the account page of the header panel. */
.mbadge {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px; text-align: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
}
/* Each card of a header panel drops in after the one before, in the manner of
   the columns in the opening animation (owner, 2026-09-26). */
@keyframes menu-row { from { opacity: 0; transform: translateY(-6px); } }

/* ── the Product and Resources menus (menu.js) ──────────── */

/* After firmus.co (owner, 2026-09-30): the bar grows downward into a panel of
   cards, on the same glass (.topbar::before stretches under it). The panel
   hangs from the bar's bottom edge rather than sitting inside it, so the page
   underneath never moves. Both menus share the one panel: moving from one to
   the other slides the cards across while the glass eases to the new height. */
.topbar .navdrop {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--sub);
}
.topbar .navdrop svg { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.topbar .navdrop:hover, .topbar .navdrop.here, .topbar .navdrop[aria-expanded="true"] { color: var(--ink); }
.topbar .navdrop[aria-expanded="true"] svg { transform: rotate(180deg); }
.topbar .navdrop:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 3px; border-radius: 4px; }

.megamenu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  display: grid; overflow: hidden; box-sizing: border-box;
  padding: 4px 12px 12px;
  transition: height .3s cubic-bezier(.2, .8, .2, 1);
}
.megamenu[hidden] { display: none; }
/* Both pages sit in the same cell, so one can slide out as the other slides in. */
.mega-page { grid-area: 1 / 1; align-self: start; }
.mega-page[hidden] { display: none; }
.mega-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
}
.mega-card {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--hair) 70%, transparent); border-radius: 10px;
  /* Frosted like the bar they sit in, a little more solid so the text holds. */
  background: color-mix(in srgb, var(--panel) 45%, transparent);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.mega-card:hover, .mega-card:focus-visible {
  transform: translateY(-2px); border-color: var(--faint);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.mega-card:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
.mega-card[aria-current="page"] { border-color: var(--accent); }
.mega-icon { color: var(--accent); margin-bottom: 5px; line-height: 0; }
.mega-title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.mega-desc { font-size: 13.5px; line-height: 1.4; color: var(--sub); }
/* The honey card, in the place of firmus's green Enquire card. */
.mega-cta {
  grid-column: 4; grid-row: 1 / span 2;
  background: linear-gradient(140deg, #fde0a6 0%, #fbc86a 38%, #f7a538 72%, #f38a26 100%);
  border-color: transparent; color: #1c1008; padding: 15px 16px;
}
.mega-cta:hover, .mega-cta:focus-visible { border-color: transparent; background: linear-gradient(140deg, #fde0a6 0%, #fbc86a 38%, #f7a538 72%, #f38a26 100%); }
.mega-cta .mega-title { font-size: 17px; }
.mega-cta .mega-desc { color: rgba(28, 16, 8, .78); font-size: 13.5px; }
.mega-cta .mega-go {
  margin-top: auto; align-self: flex-start;
  padding: 6px 12px; border: 1px solid rgba(28, 16, 8, .55); border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
}
/* Signed in, the invitation to try it has done its job. */
.topbar:has(.acct) .mega-cta.invite { display: none; }
.topbar:has(.acct) .mega-page.has-invite { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (prefers-reduced-motion: no-preference) {
  /* Opening: the panel grows from the bar's bottom edge, the cards drop in. */
  .megamenu.opening:not([hidden]) { animation: mega-grow .3s cubic-bezier(.2, .8, .2, 1) both; }
  .megamenu.opening .mega-card { animation: menu-row .34s cubic-bezier(.22, 1, .36, 1) both; }
  .megamenu.opening .mega-card:nth-child(2) { animation-delay: .03s; }
  .megamenu.opening .mega-card:nth-child(3) { animation-delay: .06s; }
  .megamenu.opening .mega-card:nth-child(4) { animation-delay: .09s; }
  .megamenu.opening .mega-card:nth-child(5) { animation-delay: .12s; }
  .megamenu.opening .mega-card:nth-child(6) { animation-delay: .15s; }
  .megamenu.opening .mega-card:nth-child(7) { animation-delay: .18s; }
  /* Switching: the cards slide across, away from the button you moved to. */
  /* Side by side, like a carousel: the page leaving moves fully out as the
     next moves fully in, at the same pace and without fading, so the two never
     overlap. Overlapping and fading, the frosted cards showed the other page
     through them as a blurred ghost (owner, 2026-09-30). */
  .mega-page.slide-in-r { animation: mega-in-r .42s cubic-bezier(.65, 0, .35, 1) both; }
  .mega-page.slide-in-l { animation: mega-in-l .42s cubic-bezier(.65, 0, .35, 1) both; }
  .mega-page.slide-out-l { animation: mega-out-l .42s cubic-bezier(.65, 0, .35, 1) both; pointer-events: none; }
  .mega-page.slide-out-r { animation: mega-out-r .42s cubic-bezier(.65, 0, .35, 1) both; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .megamenu, .topbar::before { transition: none; }
  .mega-page.slide-out-l, .mega-page.slide-out-r { display: none; }
}
@keyframes mega-grow { from { clip-path: inset(0 0 100% 0 round 0 0 14px 14px); } to { clip-path: inset(0 0 0 0 round 0 0 14px 14px); } }
/* A page plus the panel's side padding either way, so neither shows a sliver. */
@keyframes mega-in-r { from { transform: translateX(calc(100% + 24px)); } }
@keyframes mega-in-l { from { transform: translateX(calc(-100% - 24px)); } }
@keyframes mega-out-l { to { transform: translateX(calc(-100% - 24px)); } }
@keyframes mega-out-r { to { transform: translateX(calc(100% + 24px)); } }

/* The rest of the page, softly blurred and dimmed while a menu is open, as on
   firmus.co (owner, 2026-09-30). Under the bar, over everything else; a click
   on it closes the menu (menu.js). */
.mega-scrim {
  position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
  background: rgba(26, 28, 32, .06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity .3s ease;
}
.mega-scrim.on { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .mega-scrim { background: rgba(0, 0, 0, .22); }
@media (prefers-reduced-motion: reduce) { .mega-scrim { transition: none; } }

@media (max-width: 1000px) {
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1fr); }
  .mega-cta { grid-column: 3; grid-row: 1 / span 3; }
  .topbar:has(.acct) .mega-page.has-invite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone has the menu button instead; both menus are in its panel. */
@media (max-width: 760px) {
  .topbar .navdrop, .megamenu:not(.is-account) { display: none !important; }
  .topbar .navmenu .navmenu-head {
    margin: 6px 0 0; padding: 12px 14px 4px; border-top: 1px solid var(--hair);
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  }
  .topbar .navmenu .navmenu-head + a { border-top: 0; }
}

/* ── the account page of the same panel (menu.js) ─────────── */

/* Signed in, the avatar opens a third page of the panel (owner, 2026-09-30):
   the newest batches, what is waiting in forwarded mail, and the settings in
   two short columns. Every page is as tall as Resources (menu.js sets
   --page-h), so the lists show two rows each. */
.mega-page { height: var(--page-h, auto); }
.acct-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.mega-list { min-height: 0; overflow: hidden; gap: 2px; }
.mega-list:hover { transform: none; border-color: color-mix(in srgb, var(--hair) 70%, transparent); background: color-mix(in srgb, var(--panel) 45%, transparent); }
.ml-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mega-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mega-link:hover { text-decoration: underline; }
.mega-title .mbadge { margin-left: 6px; vertical-align: 1px; }
.mb-body { margin: 2px -8px 0; }
.mb-list { list-style: none; margin: 0; padding: 0; }
.mb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title state" "meta state";
  column-gap: 12px; align-items: center; padding: 5px 8px; border-radius: 8px;
  color: var(--ink); text-decoration: none; transition: background-color .15s ease;
}
.mb-row:hover, .mb-row:focus-visible { background: color-mix(in srgb, var(--panel) 75%, transparent); }
.mb-row:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; }
.mb-title { grid-area: title; font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-meta { grid-area: meta; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-state { grid-area: state; font-size: 12px; font-weight: 600; color: var(--ok, var(--sub)); white-space: nowrap; }
.mb-state.is-review, .mb-state.is-failed, .mb-state.is-waiting { color: var(--accent); }
.mb-state.is-reading { color: var(--muted); }
.mb-empty { margin: 4px 8px; font-size: 13.5px; line-height: 1.45; color: var(--sub); }

/* Two short columns (owner, 2026-10-01): who you are, the account and the
   language; then light or dark, the tour and signing out. */
.acct-side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 10px; min-height: 0; padding: 2px 0 0 4px; }
.as-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-who {
  padding: 8px 10px;
  font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 14px; text-align: left; color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.as-row svg { flex: none; color: var(--accent); }
a.as-row:hover, button.as-row:hover { background: color-mix(in srgb, var(--panel) 75%, transparent); }
.as-row:focus-visible, .ms-lang button:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; }
.as-lang { cursor: default; padding-block: 4px; }
.ms-lang { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: -4px; }
.ms-lang button {
  padding: 4px 7px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--sub); transition: background-color .15s ease, color .15s ease;
}
.ms-lang button:hover { background: color-mix(in srgb, var(--panel) 75%, transparent); color: var(--ink); }
.ms-lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--panel) 80%, transparent); }
.as-out { color: var(--sub); }

/* On a phone the account page is the one menu the panel still shows, stacked. */
@media (max-width: 760px) {
  .megamenu.is-account:not([hidden]) { display: grid !important; padding: 4px 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
  .mega-page { height: auto; }
  .acct-page { grid-template-columns: minmax(0, 1fr); }
  .acct-side { grid-template-columns: minmax(0, 1fr); }
  .mega-card { padding: 12px 13px; }
}