/* ============================================================
   Saltado Sessions — shared polish layer (every page links this
   before its inline <style>). Display typography, selection,
   focus, micro-interactions. Inline page styles win ties, so
   anything that must beat them uses a higher-specificity selector.
   ============================================================ */

/* Space Grotesk (variable, latin subset, self-hosted — OFL license).
   One file serves every weight 300–700. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root { --font-display: 'Space Grotesk', 'Helvetica Neue', 'Arial Nova', Arial, 'Segoe UI', system-ui, sans-serif; }

/* One typeface throughout: the display grotesk also sets the body, so running
   copy stops falling back to generic system Arial next to the headings. Slightly
   looser tracking keeps Space Grotesk comfortable at paragraph size. html body
   beats each page's inline body{font-family}. */
html body { font-family: var(--font-display); letter-spacing: 0.002em; }

/* Headlines and marks wear the display face. Weight is capped at 700
   (the face's max) so browsers never synthesize a faux 800. */
body h1, body h2, body h3,
body .sec-head h2,
body .feat-row h3, body .use-card h3, body .step h3,
body .feat-group h2,
body .price {
  font-family: var(--font-display);
  font-weight: 700;
}
body h1 { letter-spacing: -0.02em; }
/* Stacked house-mark lockup: SALTADO is a small kicker sitting over SESSIONS
   (the product, the star), with the icon spanning both lines. A grid lays the
   three existing siblings out with NO markup change: a.brand beats each page's
   inline .brand{display:flex}, and .brand span.NAME beats the inline .wordmark
   rule. The full ownable "Saltado Sessions" stays in the DOM for trademark+SEO,
   but it reads the way people say it — Sessions. */
a.brand {
  display: grid;
  grid-template-columns: auto auto;
  /* 7px, not 11: the folders SVG carries a few px of its own right-edge padding,
     so a smaller column gap makes the mark and the wordmark read as one lockup. */
  column-gap: 7px; row-gap: 0;
  align-items: center;
  /* justify-content: start (not the default stretch) so the auto icon column
     stays icon-width. In the footer the brand link stretches to the wide column,
     and the default stretch would blow the icon column open and push the wordmark
     ~78px right; the topbar (a content-width flex item) never showed it. */
  justify-content: start;
}
a.brand .logo-mark { grid-row: 1 / span 2; align-self: center; }
.brand span.wordmark {
  grid-column: 2; grid-row: 1; align-self: end;
  font-family: var(--font-display);
  font-size: 9px; font-weight: 600; line-height: 1;
  color: var(--muted); letter-spacing: 0.3em; margin-bottom: 2px;
}
.brand span.product {
  grid-column: 2; grid-row: 2; align-self: start;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; line-height: 0.85;
  color: var(--text); letter-spacing: 0.06em;
}
a.btn, button.btn { font-family: var(--font-display); font-weight: 500; }

/* text selection in the brand amber */
::selection { background: rgba(217, 145, 70, 0.4); color: #fff; }

/* keyboard focus */
:focus-visible { outline: 2px solid #d99146; outline-offset: 2px; }

/* buttons: quiet lift on hover, settle on press */
a.btn, button.btn {
  transition: background 0.12s, border-color 0.12s, transform 0.1s ease, box-shadow 0.14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* quiet neutral lift on hover — no colored glow (flat/Linear register) */
.btn.primary:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }

/* Topbar stays flat and solid (its inline --sidebar color), no glass blur:
   the register is flat, precise and quiet, so no glassmorphism. */

/* cards respond to the cursor — restrained */
.use-card, .feat-group {
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.use-card:hover, .feat-group:hover { transform: translateY(-2px); border-color: #6a6a6a; }

/* the DAW table's Beta badges: honest, but fine print — not a headline */
span.beta { color: #8c8c8c; border-color: #4d4d4d; }

/* scroll reveal — classes are added by script, so no-JS never hides content */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .rv.in { opacity: 1; transform: none; }
}