/* The marketing and policy pages' own additions to the Paste-up chrome
   (web/paste). Shared by every public page; page shapes live in
   site/<page>.css. */

[hidden] { display: none !important; }
.brand svg { flex: none; }
.mnav a .ico { width: 18px; height: 18px; color: var(--ink3); flex: none; }
.foot .brand svg { width: 24px; height: 24px; }
.foot nav ul { margin: 0; }

/* A link to one place, opened without the app (landing.js). */
.landing { position: fixed; left: 50%; bottom: 18px; z-index: 120; width: min(420px, calc(100vw - 24px)); transform: translateX(-50%); padding: 20px 20px 18px; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-lift); animation: landing-in 420ms var(--ease-out) both; }
.landing-lead { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.landing-name { margin-top: 6px; padding-right: 36px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.landing-hint { margin-top: 8px; color: var(--ink2); font-size: 14.5px; }
.landing-go { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 16px; border-radius: 99px; background: var(--ink); color: var(--ground); font-weight: 700; font-size: 15px; }
.landing-close { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--well); color: var(--ink2); font-size: 20px; line-height: 1; }
@keyframes landing-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.mnav a.btn { justify-content: center; }

/* Selected is an underline, never a fill: the nav's current page and the
   theme switch. The line draws in from the centre with a short eased scale. */
.navl a { position: relative; }
.navl a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.navl a[aria-current] { background: none; color: var(--ink); }
.navl a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .navl a:hover { background: none; } .navl a:hover::after { transform: scaleX(1); opacity: .45; } .navl a[aria-current]:hover::after { opacity: 1; } }
.mnav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; }
.theme { background: none; box-shadow: inset 0 0 0 1px var(--rule2); }
.theme button { position: relative; }
.theme button[aria-pressed="true"] { background: none; box-shadow: none; color: var(--ink); }
.theme button::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 200ms var(--ease-out); }
.theme button[aria-pressed="true"]::after { transform: scaleX(1); }

/* Sign up sits beside Sign in (Nov 2026), and the row no longer fits on one
   line below about 1240px: "The app", "Sign in" and "Sign up" each wrapped
   onto two. Between there and the phone breakpoint the nav folds into the
   menu, as on a phone (paste/components.css, max-width 980px). */
.navl a, .nav .signin { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1429px) {
  .navl, .nav .signin, .nav .end .btn { display: none; }
  .menu-btn { display: grid; }
  .mnav { display: block; position: fixed; inset: 68px 0 auto 0; z-index: 49; padding: 10px var(--gut) 22px; background: var(--ground); box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, transform 260ms var(--ease-out), visibility 0s 260ms; }
  .mnav.open { transform: none; opacity: 1; visibility: visible; transition: opacity 200ms ease, transform 260ms var(--ease-out); }
  .mnav a { display: flex; align-items: center; justify-content: space-between; height: 52px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
  .mnav .btn { margin-top: 12px; width: 100%; }
}

/* The wordmark sits in the middle of the bar, links to its left and the
   account actions to its right, like a masthead. */
.nav .in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.nav .in > .navl { grid-column: 1; grid-row: 1; margin-left: 0; justify-self: start; }
.nav .in > .brand { grid-column: 2; grid-row: 1; justify-self: center; font-size: 20px; letter-spacing: .1em; }
.nav .in > .end { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
.nav .navl a { padding: 0 11px; }
.nav .navl a::after { left: 11px; right: 11px; }
/* Folded (phone and mid widths), the theme switch and menu take the right,
   so the wordmark goes back to the left edge where it has room. */
@media (max-width: 1429px) {
  .nav .in { display: flex; }
  .nav .in > .end { margin-left: auto; }
}
/* "Sign in / Sign up", one pair. */
.nav .end .ss { margin: 0 -13px; color: var(--ink3); font-weight: 500; font-size: 14.5px; }
@media (max-width: 1429px) { .nav .end .ss { display: none; } }