/* Kill double-tap-to-zoom globally while keeping pinch-zoom for
   accessibility. Every tap on a button / link / video theater /
   stepper used to trigger ios zoom on a rapid second tap. manipulation
   allows scroll + pinch-zoom but disables the double-tap gesture. */
html, body { touch-action: manipulation; }

/* elements.dev brand voice: sky/cornflower accent, mono as the default UI font.
   @elements/style ships customer-voice defaults; we only override what changes. */

:root {
  --accent:       var(--sky);
  --accent-deep:  var(--sky-deep);
  --accent-soft:  var(--sky-soft);
  --accent-dot:   var(--sky-dot);
  --accent-wash:  var(--sky-wash);

  --font-ui:    var(--font-mono);
  --font-body:  var(--font-mono);

  --input-border-focus: var(--accent-deep);
}

/* Mobile h1 size — one place for every page-level heading so we don't
   whack-a-mole them individually. Keep desktop sizes per-page (hero is
   bigger than a plain page header, auth cards use a compact heading,
   etc.); below 700px everything collapses to the same 2.375rem / 38px
   with a snug line-height so a wrapped heading doesn't tower.

   `html` prefix lifts specificity to (0,1,1) so this wins over the
   unconditional `.hero-title`/`.install-title` rules in each page's
   style.css — those get imported first and would otherwise come later
   in source order. */
/* Shared page hero — h1 + paragraph subtitle, one rule used by every
   top-level page (install, pricing, etc.) so the opening of each
   page looks identical. Page-specific CSS only tweaks margins/width
   around this; size and weight of the h1 itself come from here.
   NOTE: use margin-bottom (not the shorthand) so this can be composed
   onto a .shell-* wrapper whose `margin: 0 auto` centering we must
   preserve. */
.page-hero { margin-bottom: var(--space-6); }

.page-hero-title {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: 2.375rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 var(--gap-head-sub);
  color: var(--ink);
}

.page-hero-sub {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 36rem;
}
.page-hero-sub code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-panel);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-xs);
  color: var(--ink);
}

@media (max-width: 700px) {
  html .install-title,
  html .auth-title,
  html .account-title,
  html .learn-title,
  html .page-hero-title,
  html .purchase-main .page-head h1 {
    font-size:   2.2em;
    line-height: 1.1;
  }

  /* Home hero is the one exception — display type that should feel
     larger than a page header, even on mobile. */
  html .hero-title {
    font-size:   3.2em;
    line-height: 1.05;
  }

  /* Uniform 1.5rem horizontal gutter across every page on mobile. Upstream
     @elements/style ships these shells with 2rem (var(--space-8)); we tighten
     them slightly so content isn't pushed needlessly inward on phones. Pages
     that own their own container (purchase, signin, dashboard) set the same
     1.5rem directly. */
  .shell-narrow,
  .shell-prose,
  .shell-marketing,
  .shell-wide {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }
}