/* Shared by the local source and live site. Keep after the generated theme. */
:root { --site-gutter: clamp(1rem, 3vw, 2rem); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; min-inline-size: 0; }
#root { min-inline-size: 0; }
#root *, .sf-checkout * { box-sizing: border-box; }
#root main, #root footer, #root main .grid > *, #root main .flex > * { min-inline-size: 0; }
#root :is(h1, h2, h3, p, blockquote, label), .sf-checkout :is(h2, h3, p, label) { overflow-wrap: anywhere; }
#root main :is(h1, h2, h3) { text-wrap: balance; }
#root main h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 4.5rem); }
#root main h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
/* The hero subtitle has deliberately smaller type than section headings. */
#root #hero h2 { font-size: clamp(.875rem, .7rem + .6vw, 1.25rem); letter-spacing: clamp(.08em, .35vw, .22em); }
#root :is(main, footer) [class~="max-w-7xl"] { inline-size: 100%; padding-inline: var(--site-gutter); }
#root main > [class~="max-w-7xl"] { inline-size: 100%; }
#root main .grid { gap: clamp(1rem, 2.5vw, 2rem); }
#root main [class~="lg:grid-cols-4"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
#root main [class~="md:grid-cols-3"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
#root main [class~="sm:p-12"] { padding: clamp(1rem, 4vw, 3rem); }
#root main [class~="sm:p-10"] { padding: clamp(1rem, 3.5vw, 2.5rem); }
#root main [class~="p-8"]:not([class~="sm:p-12"]) { padding: clamp(1rem, 3vw, 2rem); }
#root main :is([class~="mb-20"], [class~="mb-16"]) { margin-block-end: clamp(2.5rem, 6vw, 5rem); }
#root main [class~="my-20"] { margin-block: clamp(2.5rem, 6vw, 5rem); }
#root main [class~="py-20"] { padding-block: clamp(2.5rem, 6vw, 5rem); }
#root main [class~="gap-12"], #root main [class~="lg:gap-16"] { gap: clamp(1.5rem, 4vw, 4rem); }
#root img { max-inline-size: 100%; }
#root main article img { object-fit: contain; }
#root main article { min-inline-size: 0; }
#root main article :is(button, a) { flex-shrink: 0; }
#root main button, #root footer button { white-space: normal; }
#root main form :is(input, select, textarea) { min-inline-size: 0; max-inline-size: 100%; }
#root main form textarea { resize: vertical; }
#root main form .grid:has(> button) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem; }
#root main form button { line-height: 1.5; }

/* Keep the wordmark, navigation and actions within the available header width. */
#root header > div:first-child {
  inline-size: 100%; block-size: auto; min-block-size: 4.5rem;
  padding: .75rem var(--site-gutter); gap: clamp(.5rem, 1.5vw, 1.25rem);
}
#root header a[href="#home"] { min-inline-size: 0; flex: 0 1 auto; white-space: normal; }
#root header a[href="#home"] > svg { flex-shrink: 0; }
#root header a[href="#home"] > span { font-size: clamp(.875rem, .6rem + 1vw, 1.2rem); line-height: 1.4; letter-spacing: .035em; }
#root header nav { flex-shrink: 0; gap: clamp(.75rem, 1.4vw, 1.25rem); }
#root header nav button { min-block-size: 2.75rem; }
#root header > div:first-child > div:last-child { flex-shrink: 0; gap: .375rem; }
#root header button[aria-label] { min-inline-size: 2.75rem; min-block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
@media (width < 80rem) {
  #root header nav { display: none; }
  #root header button[aria-label="Toggle menu"] { display: inline-flex; }
  #root header > div:first-child > div:last-child > .gold-button,
  #root header button[title="Download full source code & live server deployment package"] { display: none; }
  #root header > div:not(:first-child) {
    display: block; max-block-size: calc(100svh - 5rem); max-block-size: calc(100dvh - 5rem);
    overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--site-gutter);
  }
  #root header > div:not(:first-child) > button { min-block-size: 2.75rem; }
  #root footer > div > div:first-child { flex-direction: column; text-align: center; }
  #root footer nav { flex-wrap: wrap; gap: .5rem 1.25rem; }
  #root footer nav button { min-block-size: 2.75rem; }
}
@media (width >= 80rem) {
  #root header button[aria-label="Toggle menu"], #root header > div:not(:first-child) { display: none; }
}

/* Overlays scroll from the top when their content exceeds the viewport. */
#root .fixed.inset-0.z-50 {
  overflow-y: auto; overscroll-behavior: contain; align-items: safe center;
  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
}
#root .fixed.inset-0.z-50 > div {
  min-inline-size: 0; max-inline-size: 100%; flex-shrink: 0;
  margin-block: auto; padding: clamp(1rem, 3vw, 2rem);
}
#root .fixed.inset-0.z-50.flex-col { justify-content: flex-start; padding-block-start: clamp(1rem, 5vh, 4rem); }
#root .fixed.inset-0.z-50.flex-col > div { margin-block: 0; }
#root .fixed.inset-0.z-50 [class~="max-h-[85vh]"] { max-block-size: calc(100dvh - 2rem); }
#root .fixed.inset-0.z-50 [class~="max-h-[90vh]"] { max-block-size: calc(100dvh - 2rem); }
#root .fixed.inset-0.z-50 .overflow-y-auto { min-block-size: 0; overscroll-behavior: contain; }
#root .fixed.inset-0.z-50 [class~="overflow-x-auto"] { min-inline-size: 0; max-inline-size: 100%; }
#root .fixed.inset-0.z-50 h3 { padding-inline-end: 1.5rem; font-size: clamp(1.5rem, 1rem + 1.8vw, 2rem); }

@media (width < 40rem) {
  #root main form :is(input, select, textarea), #root .fixed input, .sf-panel :is(input, select) { font-size: 1rem; }
  #root main :is(.gold-button, .gold-outline-button), #root main form button { min-block-size: 2.75rem; }
  #root main [class~="tracking-[0.25em]"] { letter-spacing: .15em; }
  #root main nav { flex-wrap: wrap; }
  #root footer [class~="text-lg"] { font-size: clamp(.875rem, 3.5vw, 1.125rem); }
  #root .fixed.inset-0.z-50 > div { border-radius: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #root *, .sf-checkout * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}