/* =============================================================================
   styles.css - the site stylesheet.

   Two layers: the design system the home page is built on (tokens, header,
   hero, feature rows, pricing, FAQ, footer), then the page-specific blocks
   underneath it - help, checkout and the shortcuts table. Those came from the
   previous stylesheet and were retuned onto the tokens below; a few legacy
   names they still use are kept in :root for them.
   Measurements follow notion.com at a 1440px viewport.
   ========================================================================== */

:root {
  --ink:        rgba(0, 0, 0, 0.95);   /* headings          */
  --body:       rgba(0, 0, 0, 0.898);  /* body copy         */
  --muted:      rgba(0, 0, 0, 0.55);
  --line:       rgba(0, 0, 0, 0.08);
  --bg:         #ffffff;
  --surface:    #f9f9f8;               /* bento header band */
  --blue:       #0075de;
  --blue-ink:   #005bab;
  --blue-soft:  #e6f3fe;
  --mark-ink:   150, 203, 255;         /* highlighter, a tint of --blue */
  --radius:     12px;
  --container:  1216px;

  /* still named by the help, checkout and shortcuts blocks further down */
  --line-soft:  rgba(0, 0, 0, 0.06);
  --green:      #1d8a53;
  --radius-lg:  14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* the header is sticky and 57px tall, so an in-page jump has to stop short of
   it or the section heading lands underneath */
:target { scroll-margin-top: 72px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #0065c0; }

.btn-soft { background: var(--blue-soft); color: var(--blue-ink); }
.btn-soft:hover { background: #d7ebfd; }

.btn-lg { height: 38px; padding: 0 16px; font-size: 14px; }

/* Stands in for the Download / Buy calls to action until the release is
   hosted. Same metrics as .btn so it drops straight into the nav, the hero
   actions and the price card without disturbing their layout. */
.btn-soon {
  background: var(--blue-soft);
  color: var(--blue-ink);
  cursor: default;
}

/* ------------------------------------------------------------------- header */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}

.logo .bolt { width: 14px; height: 20px; fill: var(--ink); }

.nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: center;
}

.nav-center a,
.nav-link {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--body);
  transition: background-color .15s ease;
}

.nav-center a:hover,
.nav-link:hover { background: rgba(0, 0, 0, .04); }

/* the page you are on, so Help and Shortcuts read as current */
.nav-center a.is-active { background: var(--surface); color: var(--ink); font-weight: 500; }


.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

/* --------------------------------------------------------------------- hero */

.hero { padding: 58px 0 0; text-align: center; }

.hero-title {
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* felt-tip highlighter, carried over from styles.css but inked in the theme
   blue: a soft, angled stroke, thin where the nib touches down on the left and
   building to full ink across, multiplied over the paper so the letterforms
   stay black */
.mark {
  background-image: linear-gradient(
    104deg,
    rgba(var(--mark-ink), 0)     0.5%,
    rgba(var(--mark-ink), .50)  12%,
    rgba(var(--mark-ink), .76)  32%,
    rgba(var(--mark-ink), .92)  60%,
    rgba(var(--mark-ink), .86)  90%,
    rgba(var(--mark-ink), 0)    99%
  );
  background-repeat: no-repeat;
  background-size: 100% 78%;
  background-position: 0 62%;
  padding: 0 .38em 0 .18em;
  margin: 0 -.32em 0 -.12em;
  border-radius: .1em .35em .18em .28em;
  mix-blend-mode: multiply;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-sub {
  margin: 16px auto 16px;
  max-width: 512px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -.1px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-note {
  margin: 11px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.hero-visual { margin-top: 38px; }

.frame {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 50px -20px rgba(0, 0, 0, .18);
}

.frame video { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------- bentos */

.bentos { padding: 64px 0 76px; }

.section-head { margin-bottom: 26px; }

.section-head h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink);
}

.section-sub {
  margin: 10px 0 0;
  max-width: 512px;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

.bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.bento {
  background: #fff;
  border-radius: var(--radius);
}

/* one card per row, read left to right: the copy, then its animation. Four of
   them across a screen was too much at once - stacked, you meet one at a time
   and the artwork stays near the 524px it was authored at */
.bento-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* the whole card is one click target */
.bento-anchor { position: absolute; inset: 0; z-index: 2; }

.bento-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  background: var(--surface);
}

.bento-eyebrow { font-size: 14px; line-height: 20px; color: var(--body); }

.bento-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -.02em;
  color: var(--ink);
}

.bento-title .nobreak { white-space: nowrap; }

.bento-media {
  padding: 20px 20px 20px 0;
  min-height: 0;
  display: flex;
}

/* an animation fills the slot on the 524 x 328 ratio it was authored at, so
   it scales with the card instead of stretching */
.anim-frame {
  flex: 1;
  align-self: center;
  display: flex;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.anim-frame iframe {
  display: block;
  flex: 1;
  height: auto;
  aspect-ratio: 524 / 328;
  border: 0;
  /* the frame unpacks its own runtime before it paints, so hold it back and
     fade it in once it has settled (index.html decides when): an empty card
     beats a half-drawn one. Opacity only - nothing may move during the fade */
  opacity: 0;
  transition: opacity .5s ease-out;
  will-change: opacity;
}

.anim-frame.is-ready iframe { opacity: 1; }

/* ------------------------------------------------------------------ pricing */

.pricing { padding: 6px 0 76px; }

/* one plan, so the card spans the container rather than floating alone in it:
   the terms on the left, what you get on the right */
.price-card {
  display: grid;
  grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.price-main { padding: 26px; }

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.price-amount .num {
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
}

.price-amount .per { font-size: 18px; color: var(--muted); }

.price-billed { margin: 10px 0 22px; font-size: 15px; color: var(--muted); }


.price-side {
  padding: 26px;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.price-side-head {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.price-list { margin: 0; padding: 0; list-style: none; }

.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 16px;
  color: var(--body);
}

.price-list .tick {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------- faq */

.faq { padding: 0 0 83px; }

.faq-list { max-width: 864px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-ink); }

/* a plus that becomes a minus: two rules, one of them rotated away when open */
.faq-icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--muted);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }

.faq-body { padding: 0 4px 18px; max-width: 720px; }

.faq-body p { margin: 0 0 10px; color: var(--muted); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { color: var(--blue-ink); text-decoration: underline; }

/* ----------------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .nav-center { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; }
  .hero { padding-top: 48px; }
  .hero-title { max-width: none; }
  .bento-inner { grid-template-columns: 1fr; }
  .bento-header { padding: 20px; }
  .bento-media { padding: 0 20px 20px; }
  .price-card { grid-template-columns: 1fr; }
  .price-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------- shared page furniture */
/* The home page builds its own sections; help, buy and shortcuts still lean on
   these, which the previous stylesheet kept up with the home-page chrome. */

.section { padding: 88px 0; }
.section + .section { padding-top: 0; }

.section-head .lede { margin-top: 12px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.lede { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }

/* the wordmark, in the footer here and in the shortcuts toolbar */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
}

.brand .bolt { width: auto; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line-soft); padding: 52px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 32ch; }
.footer-col h4 { font-size: 12px; font-weight: 600; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--muted); font-size: 13px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}

/* ------------------------------------------------------- help / doc page */
/* the setup guide: one narrow column, numbered steps, hairline bands */

.doc-h1 { font-size: clamp(30px, 3.8vw, 40px); line-height: 1.1; }

.doc-h2 { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; }
.doc-lede { margin-top: 12px; max-width: 58ch; }
.doc-h2-sub { margin-top: 56px; font-size: clamp(20px, 2.2vw, 24px); }
.doc-p { margin: 14px 0 0; max-width: 66ch; font-size: 14.5px; line-height: 1.62; color: var(--body); }
.doc-p a { text-decoration: underline; text-underline-offset: 2px; }
.doc-p a:hover { color: var(--muted); }

/* the numbered walkthrough: a counter in a ring, the step beside it */
.steps { counter-reset: step; list-style: none; margin: 32px 0 0; padding: 0; max-width: 66ch; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 28px 52px; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
/* the rule that threads the steps together */
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px;
  width: 1px; background: var(--line);
}
.steps h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.steps p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--body); }

.path {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 13px;
  color: var(--ink);
}
p.path { margin: 10px 0 0; }

.shot { margin: 14px 0 0; }
.shot-box {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 28px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.doc-list { margin: 24px 0 0; padding: 0; list-style: none; max-width: 66ch; display: grid; gap: 14px; }
.doc-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.62; color: var(--body); }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

.note { margin: 8px 0 0; max-width: 66ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .nav-links { gap: 20px; font-size: 13.5px; }
  .cells, .cells.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 64px 0; }
  .pricing { padding: 64px 0; }
  .stage-wrap { padding: 40px 0 68px; }
}

/* below this the single line would be too small to read, so let it wrap */
@media (max-width: 760px) {
  .hero h1 { white-space: normal; font-size: clamp(28px, 6.4vw, 36px); max-width: 22ch; text-wrap: balance; }
}

@media (max-width: 620px) {
  .nav { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; row-gap: 10px; }
  .nav-links { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 12px; }
  .nav-actions { margin-left: auto; }
  .hero { padding-top: 48px; }
  .stage { padding: 4px; border-radius: 7px; }
  .stage-inner { border-radius: 5px; }
  .cells, .cells.cols-3 { grid-template-columns: 1fr; }
  .feature-tabs { grid-template-columns: repeat(2, 1fr); font-size: 13px; row-gap: 4px; }
  .cell { padding: 20px; }
  .price-card { padding: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 620px) {
  .steps > li { padding-left: 42px; }
}


/* ----------------------------------------------------------- checkout */
/* Polar's checkout, framed inline on buy.html instead of in its overlay.
   The frame cannot resize itself cross-origin, so it is given a height that
   fits the whole form, down to the Subscribe button and the terms under it.
   Too short and the buyer gets a scrollbar inside the frame. */

.checkout {
  position: relative;
  max-width: 480px;
  margin: 40px auto 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.checkout iframe {
  display: block;
  width: 100%;
  height: 1120px;
  border: 0;
}
/* Covers the frame until the checkout says it is ready to be used. */
.checkout-loader {
  position: absolute;
  inset: 0;
  z-index: 1;            /* the frame composites on its own layer */
  display: grid;
  /* the frame is taller than most viewports, so keep the spinner near the top
     where it is actually on screen rather than centred out of sight */
  place-items: start center;
  padding-top: 160px;
  background: var(--bg);
  transition: opacity 0.25s ease;
}
.checkout.is-ready .checkout-loader { opacity: 0; visibility: hidden; }

.checkout-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: checkout-spin 0.7s linear infinite;
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .checkout-spinner { animation-duration: 2s; }
}

.checkout-fallback { max-width: 480px; margin: 24px auto 0; text-align: center; font-size: 14px; }

@media (max-width: 560px) {
  .checkout iframe { height: 1320px; }
}

/* ------------------------------------------------------ shortcuts page */
/* One long reference: a hero, a sticky toolbar with the app toggle and the
   search, then a section rail beside the list. Rows are hairline-ruled like
   the FAQ, with the keys set as chips on the right. */

.sc-hero { padding: 56px 0 28px; text-align: center; }
.sc-hero h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.sc-hero .lede { margin: 16px auto 0; max-width: 60ch; }

.sc-legend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; font-size: 12.5px; color: var(--muted); }
.sc-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.sc-legend-hint { position: relative; cursor: help; }
.sc-legend-hint > span { text-decoration: underline dotted currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sc-legend-hint:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

/* the hint itself - a styled bubble rather than the browser's own title
   tooltip, which never showed up on some machines. The bubble hangs off the
   legend, not off the ⌥ chip, so it stays inside the page on a phone; only the
   little arrow is anchored to the chip. */
.sc-legend { position: relative; }
.sc-legend::after {
  content: attr(data-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 20;
  width: max-content;
  max-width: min(340px, 100%);
  padding: 9px 11px;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.sc-legend-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 21;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 2px 0;
}
.sc-legend::after,
.sc-legend-hint::after { opacity: 0; visibility: hidden; transition: opacity .12s ease; }
.sc-legend:has(.sc-legend-hint:hover)::after,
.sc-legend:has(.sc-legend-hint:focus-visible)::after,
.sc-legend-hint:hover::after,
.sc-legend-hint:focus-visible::after { opacity: 1; visibility: visible; }

/* the key chip — the one element the whole page is made of */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-color: #cfccc6;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(69, 63, 57, .06);
    font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
kbd.wide { font-size: 11px; letter-spacing: .01em; }

/* ---------------------------------------------------------- the toolbar */

.sc-bar {
  position: sticky;
  top: 57px;                 /* under the header, hairlines overlapping */
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.sc-bar-inner { display: flex; align-items: center; justify-content: center; padding-top: 12px; padding-bottom: 12px; }

[data-app="excel"] { --app: #1f7a4d; --app-line: rgba(31, 122, 77, .38); }
[data-app="word"] { --app: #2f5597; --app-line: rgba(47, 85, 151, .38); }
[data-app="powerpoint"] { --app: #c0532c; --app-line: rgba(192, 83, 44, .38); }

.sc-seg { display: flex; gap: 4px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sc-seg button {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 12px;
  font: inherit;
  line-height: 1.2;
  color: var(--body);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sc-seg button::before {
  content: "";
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--app);
  opacity: .4;
  transition: opacity .15s ease;
}
.sc-seg button:hover { color: var(--ink); }
.sc-seg button:hover::before { opacity: .7; }
.sc-seg button.is-active { background: var(--bg); border-color: var(--app-line); color: var(--ink); box-shadow: 0 1px 2px -1px rgba(69, 63, 57, .12); }
.sc-seg button.is-active::before { opacity: 1; }
.sc-seg-app { font-size: 13.5px; font-weight: 500; }
.sc-seg-kind { font-size: 11px; color: var(--muted); }
.sc-seg button.is-active .sc-seg-kind { color: var(--body); }
.sc-seg-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.sc-search { position: relative; width: min(420px, 100%); margin: 26px auto 0; display: flex; align-items: center; }
.sc-search svg { position: absolute; left: 11px; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sc-search input {
  width: 100%;
  padding: 8px 34px 8px 33px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-search input::placeholder { color: var(--muted); }
.sc-search input:focus { outline: none; border-color: #b9b4ac; box-shadow: 0 0 0 3px rgba(69, 63, 57, .07); }
.sc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sc-slash { position: absolute; right: 8px; min-width: 20px; height: 20px; font-size: 11px; color: var(--muted); pointer-events: none; }
.sc-search input:focus + .sc-slash { opacity: 0; }

/* ------------------------------------------------------------ the layout */

.sc-body { padding: 40px 0 88px; }
.sc-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; }

.sc-rail { position: sticky; top: 129px; }   /* 57px header + the 64px toolbar + hairlines */
.sc-rail-list .label { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.sc-rail-list .label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--app); }
.sc-rail-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sc-rail-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.sc-rail-list a span { font-size: 11px; color: #a8a29b; font-variant-numeric: tabular-nums; }
.sc-rail-list a:hover { background: var(--surface); color: var(--ink); }
.sc-rail-list a.is-current { background: var(--surface); color: var(--ink); font-weight: 500; }
.sc-rail-list li[hidden] { display: none; }

/* ------------------------------------------------------------- the lists */


.sc-group { scroll-margin-top: 132px; }
.sc-group + .sc-group { margin-top: 44px; }
.sc-group[hidden] { display: none; }
.sc-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--app, var(--ink)); }
.sc-group-head h3 { font-size: 22px; letter-spacing: -0.01em; }
.sc-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 8px 8px 2px;
  margin: 0 -8px 0 -2px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 5px;
  transition: background .12s ease;
}
.sc-row[hidden] { display: none; }
.sc-row:hover { background: var(--surface); }
.sc-name { font-size: 14px; line-height: 1.45; color: var(--ink); }
.sc-crumb { color: var(--muted); }
.sc-name a { color: inherit; text-decoration: none; }
.sc-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sc-keys { display: flex; gap: 3px; flex: none; }
.sc-tag { margin-left: 8px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #a8a29b; }
.sc-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.sc-empty { margin: 0 0 24px; font-size: 14.5px; color: var(--body); }
.sc-empty button { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* -------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .sc-layout { grid-template-columns: 1fr; gap: 0; }
  .sc-rail { display: none; }
  .sc-seg { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 620px) {
  /* the header wraps to two rows here, so the toolbar stops sticking rather
     than trying to guess where the bottom of it is */
  .sc-bar { position: static; }
  .sc-hero { padding-top: 36px; }
  .sc-seg button { padding: 6px 9px; }
  .sc-seg-count { display: none; }
  .sc-row { flex-wrap: wrap; gap: 6px; padding: 10px 8px; }
  .sc-name { flex: 1 1 100%; }
  .sc-group { scroll-margin-top: 24px; }
}

@media print {
  .site-header, .sc-bar, .sc-rail, .cta, .site-footer { display: none; }
  .sc-panel[hidden] { display: block; }
  .sc-layout { grid-template-columns: 1fr; }
  .sc-row { break-inside: avoid; }
}

/* ---------------------------------------------------------- guide pages */
/* one page per shortcut: web/shortcuts/<app>/<alt-h-o-i>.html */

.guide { padding: 64px 0 88px; }
.guide .doc-h2 { margin-top: 48px; }
.guide .steps { margin-top: 20px; }
.guide .steps > li { padding-bottom: 20px; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 22px;
  font-size: 13px; color: var(--muted);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.guide-keys { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 0; }
.guide-key { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide-key kbd {
  min-width: 56px; height: 56px; padding: 0 14px;
  font-size: 24px; font-weight: 600; border-radius: 12px;
  box-shadow: 0 1px 0 var(--line), 0 6px 14px -8px rgba(0, 0, 0, .35);
}
.guide-key span { font-size: 12px; color: var(--muted); white-space: nowrap; }

.guide-cta {
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between;
  margin: 64px 0 0; padding: 36px 40px; border-radius: var(--radius); background: var(--blue-soft);
}
.guide-cta h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.guide-cta p { margin: 10px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.guide-cta-actions { display: grid; gap: 10px; justify-items: center; }
.guide-cta-actions .hero-note { margin: 0; }

/* sibling shortcuts on a menu page, and the Mac route table below it */
.guide-links { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 66ch; }
.guide-links a {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--body); text-decoration: none;
}
.guide-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }


/* ---------------------------------------------------------- legal pages */
.legal .doc-h2 { margin-top: 40px; }
.legal .doc-p, .legal .doc-list { max-width: 72ch; }
.legal .doc-list { margin-top: 14px; }
.legal .doc-p a { color: var(--blue-ink); }
.legal .doc-h3 { margin: 28px 0 0; font-size: 16px; font-weight: 600; }
.legal-table {
  width: 100%; max-width: 72ch; margin: 14px 0 0; border-collapse: collapse;
  font-size: 14px; line-height: 1.5; color: var(--body);
}
.legal-table th {
  text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table a { color: var(--blue-ink); }
@media (max-width: 600px) {
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal-table td { display: block; padding: 2px 0; border: 0; }
  .legal-table td:first-child { font-weight: 600; color: var(--ink); }
}

/* ------------------------------------------------------------- 404 page */
/* Centred like the home hero, but on its own section so it sits away from the
   header without a hero's visual underneath it. */
.notfound { text-align: center; padding: 120px 0 136px; }
.notfound .hero-title { max-width: 20ch; margin-bottom: 26px; }

.nf-code {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-ink);
}

@media (max-width: 620px) {
  .notfound { padding: 72px 0 88px; }
}