/* ==========================================================================
   Samedi Dimanche — site stylesheet
   --------------------------------------------------------------------------
   Palette, gradients and shadows are lifted from the live samedidimanche.com
   build so this static version matches it. White page that settles into a
   very light blue at the foot, near-black text, one vivid blue accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Self-hosted Inter (variable, 100-900)
   --------------------------------------------------------------------------
   Served from fonts/Inter/woff2/. One file per script subset covers every
   weight, so the 550/650 values used further down render as real weights
   rather than being snapped to the nearest static cut. The unicode-range on
   each face means the browser downloads latin-ext only if a page actually
   uses a character from it. Glyphs outside these ranges fall through to the
   system stack in --sd-font-sans.
   -------------------------------------------------------------------------- */

/* Inter normal, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Inter/woff2/inter-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter normal, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Inter/woff2/inter-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter italic, latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Inter/woff2/inter-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter italic, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Inter/woff2/inter-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Core palette */
  --sd-white:            hsl(0 0% 100%);
  --sd-page-top:         hsl(0 0% 100%);
  --sd-page-mid:         hsl(215 28% 97%);
  --sd-page-bottom:      hsl(200 65% 95%);

  --sd-ink:              hsl(220 15% 20%);   /* body text — reads as black */
  --sd-ink-strong:       hsl(220 20% 12%);   /* headings */
  --sd-ink-muted:        hsl(220 10% 40%);   /* secondary copy */
  --sd-ink-faint:        hsl(220 10% 55%);   /* meta, captions */

  --sd-primary:          hsl(220 100% 45%);
  --sd-primary-hover:    hsl(220 100% 39%);
  --sd-accent:           hsl(215 100% 50%);
  --sd-primary-tint:     hsl(215 100% 96%);

  --sd-card:             hsl(0 0% 100%);
  --sd-muted:            hsl(220 15% 96%);
  --sd-border:           hsl(220 15% 92%);
  --sd-border-strong:    hsl(220 15% 85%);

  /* Gradients */
  --sd-gradient-page:    linear-gradient(180deg,
                           var(--sd-page-top) 0%,
                           var(--sd-page-mid) 55%,
                           var(--sd-page-bottom) 100%);
  --sd-gradient-primary: linear-gradient(135deg, hsl(220 100% 45%), hsl(215 100% 50%));
  --sd-gradient-subtle:  linear-gradient(180deg, hsl(215 28% 97%), hsl(200 65% 95%));

  /* Elevation */
  --sd-shadow-soft:      0 2px 10px -2px hsl(220 15% 20% / .08);
  --sd-shadow-card:      0 4px 16px -6px hsl(220 15% 20% / .12);
  --sd-shadow-elegant:   0 4px 20px -4px hsl(220 100% 45% / .15);

  /* Shape + motion */
  --sd-radius:           .25rem;
  --sd-radius-md:        .5rem;
  --sd-radius-lg:        .875rem;
  --sd-transition:       all .3s cubic-bezier(.4, 0, .2, 1);

  /* Rhythm */
  --sd-measure:          1120px;
  --sd-gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --sd-section-gap:      clamp(3.5rem, 8vw, 6.5rem);

  --sd-font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sd-font-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas,
                         'Liberation Mono', monospace;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* clears the sticky header on anchor jumps */
  background: var(--sd-page-bottom);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sd-font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sd-ink);
  background: var(--sd-gradient-page);
  background-repeat: no-repeat;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a {
  color: var(--sd-primary);
  text-decoration: none;
  transition: var(--sd-transition);
}

a:hover { color: var(--sd-primary-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--sd-primary);
  outline-offset: 2px;
  border-radius: var(--sd-radius);
}

h1, h2, h3, h4 {
  color: var(--sd-ink-strong);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

strong { font-weight: 650; color: var(--sd-ink-strong); }

hr {
  border: 0;
  border-top: 1px solid var(--sd-border);
  margin: var(--sd-section-gap) 0;
}

code, kbd { font-family: var(--sd-font-mono); font-size: .9em; }

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */

.site-shell {
  width: 100%;
  max-width: var(--sd-measure);
  margin-inline: auto;
  padding-inline: var(--sd-gutter);
}

main { display: block; }

.section {
  padding-block: var(--sd-section-gap);
  scroll-margin-top: 5.5rem;
}

.section + .section { border-top: 1px solid var(--sd-border); }

.section-heading { margin-bottom: .5rem; }

/* Page title sitting directly under the nav: full space above, tighter below
   so the title reads as attached to the content that follows it. */
.page-header {
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.page-header > :last-child { margin-bottom: 0; }

.about-copy {
  max-width: 66ch;
  font-size: 1rem;
  color: var(--sd-ink-muted);
}

.about-copy p:first-of-type { font-size: 1.0625rem; color: var(--sd-ink); }

.section-intro {
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--sd-ink-muted);
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   4. Header and navigation
   -------------------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(0 0% 100% / .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sd-border);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--sd-measure);
  margin-inline: auto;
  padding: .85rem var(--sd-gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.015em;
  color: var(--sd-ink-strong);
}

.brand:hover { color: var(--sd-primary); text-decoration: none; }

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--sd-radius);
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.nav-links a {
  padding: .4rem .7rem;
  border-radius: var(--sd-radius);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--sd-ink-muted);
}

.nav-links a:hover {
  color: var(--sd-primary);
  background: var(--sd-primary-tint);
  text-decoration: none;
}

/* The CTA in the nav is a button first and a nav link second. */
.nav-links a.button-primary,
.nav-links a.button-primary:hover {
  color: var(--sd-white);
  background: var(--sd-gradient-primary);
  padding: .5rem 1rem;
  margin-left: .35rem;
}

.nav-links a.button-secondary,
.nav-links a.button-secondary:hover { padding: .5rem 1rem; margin-left: .35rem; }

/* --------------------------------------------------------------------------
   5. Typographic accents
   -------------------------------------------------------------------------- */

.eyebrow,
.panel-label,
.platform-label,
.demo-tag,
.pack-panel-label-spaced {
  display: inline-block;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sd-primary);
  margin-bottom: .75rem;
}

.pack-panel-label-spaced { letter-spacing: .2em; }

.demo-tag {
  margin-bottom: 0;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--sd-primary-tint);
  letter-spacing: .08em;
}

.lead {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--sd-ink-muted);
  max-width: 60ch;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.hero-meta li { margin-bottom: 0; position: relative; }

.hero-meta li + li::before {
  content: "\00b7";
  position: absolute;
  left: -.6rem;
  opacity: .6;
}

.microcopy,
.price-note,
.hero-meta,
.footer-meta,
.drum-pack-catalog-meta {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--sd-ink-faint);
}

.wordmark {
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--sd-ink-strong);
}

.wordmark-diodorus,
.wordmark-rexaltus {
  background: var(--sd-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sounds-like {
  font-style: italic;
  color: var(--sd-ink-muted);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.button,
.lemonsqueezy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--sd-radius-md);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: var(--sd-transition);
  text-decoration: none;
}

.button:hover,
.lemonsqueezy-button:hover { text-decoration: none; transform: translateY(-1px); }

.button:active { transform: translateY(0); }

.button-primary,
.lemonsqueezy-button {
  background: var(--sd-gradient-primary);
  color: var(--sd-white);
  box-shadow: var(--sd-shadow-elegant);
}

.button-primary:hover,
.lemonsqueezy-button:hover {
  color: var(--sd-white);
  box-shadow: 0 8px 26px -6px hsl(220 100% 45% / .35);
}

.button-secondary {
  background: var(--sd-white);
  color: var(--sd-ink-strong);
  border-color: var(--sd-border-strong);
  box-shadow: var(--sd-shadow-soft);
}

.button-secondary:hover {
  color: var(--sd-primary);
  border-color: var(--sd-primary);
  background: var(--sd-primary-tint);
}

.hero-actions,
.platform-actions,
.platform-buttons,
.drum-pack-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.hero-actions { margin-top: 1.75rem; }

.platform-group { margin-bottom: 1.25rem; }
.platform-group:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Cards and panels
   -------------------------------------------------------------------------- */

.card,
.feature-card,
.news-card,
.story-card,
.demo-card,
.drum-pack-catalog-card,
.newsletter-tile,
.hero-panel,
.demos-panel,
.panel-section {
  background: var(--sd-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--sd-shadow-soft);
  transition: var(--sd-transition);
}

.card:hover,
.feature-card:hover,
.news-card:hover,
.story-card:hover,
.demo-card:hover,
.drum-pack-catalog-card:hover {
  box-shadow: var(--sd-shadow-card);
  border-color: var(--sd-border-strong);
  transform: translateY(-2px);
}

.card > :last-child,
.feature-card > :last-child,
.news-card > :last-child { margin-bottom: 0; }

.card h3,
.feature-card h3,
.news-card h3,
.story-card h3 { margin-bottom: .5rem; }

.panel-section {
  box-shadow: none;
  background: var(--sd-muted);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   8. Grids
   -------------------------------------------------------------------------- */

.feature-grid,
.content-grid,
.demos-grid,
.drum-pack-grid,
.requirements-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.about-grid,
.hero-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.hero-stack { display: grid; gap: 1rem; }

.demos-compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.demos-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scroll-snap-type: x mandatory;
}

.demos-scroll > * {
  flex: 0 0 min(300px, 80%);
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero-copy { max-width: 60ch; }

.hero-title-display {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-bottom: .35em;
}

.hero-title-sub {
  display: block;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sd-ink-muted);
}

.hero-visual,
.hero-panel-video {
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
  box-shadow: var(--sd-shadow-elegant);
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 1.25rem;
}

.hero-release-summary {
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--sd-ink-muted);
}

.hero-dark {
  background: linear-gradient(150deg, hsl(222 45% 13%), hsl(220 60% 22%));
  color: hsl(210 30% 92%);
  border-radius: var(--sd-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--sd-shadow-elegant);
}

.hero-dark h1,
.hero-dark h2,
.hero-dark h3,
.hero-dark .wordmark { color: var(--sd-white); }

.hero-dark .lead,
.hero-dark p { color: hsl(210 25% 82%); }

.hero-dark .eyebrow { color: hsl(200 95% 72%); }

.hero-dark .button-secondary {
  background: hsl(0 0% 100% / .08);
  color: var(--sd-white);
  border-color: hsl(0 0% 100% / .28);
}

.hero-dark .button-secondary:hover {
  background: hsl(0 0% 100% / .16);
  color: var(--sd-white);
}

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */

.pricing-price,
.price-now {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--sd-ink-strong);
}

.price-was {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--sd-ink-faint);
  text-decoration: line-through;
}

.price-note { margin-top: .4rem; }

/* --------------------------------------------------------------------------
   11. Lists, specs and updates
   -------------------------------------------------------------------------- */

.spec-list,
.spec-list-compact,
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.15rem;
  display: grid;
  gap: .5rem;
}

.spec-list li,
.spec-list-compact li,
.detail-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0;
  font-size: .9375rem;
  color: var(--sd-ink-muted);
}

.spec-list li::before,
.spec-list-compact li::before,
.detail-list li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sd-primary);
}

.spec-list-compact { font-size: .875rem; }

.requirements-grid dt {
  font-weight: 650;
  color: var(--sd-ink-strong);
  font-size: .875rem;
}

.requirements-grid dd {
  margin: 0 0 .85rem;
  font-size: .9375rem;
  color: var(--sd-ink-muted);
}

.updates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.update-entry {
  margin-bottom: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--sd-border);
}

.update-entry:hover { border-left-color: var(--sd-primary); }

.update-date {
  display: block;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-ink-faint);
  margin-bottom: .3rem;
}

.update-body { font-size: .9375rem; color: var(--sd-ink-muted); }

/* --------------------------------------------------------------------------
   11b. Blog posts
   -------------------------------------------------------------------------- */

/* Index of posts */
.post-list {
  display: grid;
  gap: 0;
  max-width: 68ch;
  padding-bottom: var(--sd-section-gap);
}

.post-summary {
  padding-block: 2rem;
  border-top: 1px solid var(--sd-border);
}

.post-summary:first-child { border-top: 0; padding-top: 0; }

.post-summary-title {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.025em;
  margin: .4rem 0 .6rem;
}

.post-summary-title a { color: var(--sd-ink-strong); }
.post-summary-title a:hover { color: var(--sd-primary); text-decoration: none; }

.post-excerpt {
  color: var(--sd-ink-muted);
  margin-bottom: .85rem;
}

.post-readmore {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
}

.post-readmore a:hover { text-decoration: none; }

/* Individual post page */
.breadcrumb {
  margin: 0 0 1.5rem;
  padding-top: var(--sd-section-gap);
  font-size: .875rem;
  font-weight: 600;
}

.breadcrumb a { color: var(--sd-ink-muted); }
.breadcrumb a:hover { color: var(--sd-primary); text-decoration: none; }

.post { padding-bottom: var(--sd-section-gap); }

.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sd-border);
}

.post-title {
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: .5rem;
}

.post-date {
  margin: 0;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sd-ink-faint);
}

/* A measure of roughly 68 characters keeps long-form text readable. */
.post-body {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.post-body > .lead {
  max-width: none;
  color: var(--sd-ink);
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  margin-bottom: 1.5rem;
}

.post-body h3 {
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
}

.post-body ul,
.post-body ol {
  padding-left: 1.4rem;
  margin-bottom: 1.5rem;
}

.post-body li { margin-bottom: .65rem; padding-left: .2rem; }
.post-body li:last-child { margin-bottom: 0; }
.post-body li::marker { color: var(--sd-primary); }
.post-body ol li::marker { font-weight: 700; }

.post-body em { color: var(--sd-ink-strong); }

.post-outro {
  margin-top: 2.5rem;
  padding: 1.15rem 1.35rem;
  background: var(--sd-primary-tint);
  border-left: 3px solid var(--sd-primary);
  border-radius: var(--sd-radius-md);
}

/* --------------------------------------------------------------------------
   12. Newsletter
   -------------------------------------------------------------------------- */

.news-signup-hub { margin-block: var(--sd-section-gap); }

.newsletter-hub-wide {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}

.newsletter-tile {
  background: var(--sd-gradient-subtle);
  border-color: hsl(200 50% 88%);
}

.newsletter-tile-secondary { background: var(--sd-muted); }

.newsletter-copy { max-width: 52ch; }

.newsletter-inline-form,
.newsletter-embed {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.newsletter-inline-form input[type="email"],
.newsletter-inline-form input[type="text"],
input[type="email"],
input[type="text"] {
  flex: 1 1 220px;
  padding: .68rem .9rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--sd-ink);
  background: var(--sd-white);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  transition: var(--sd-transition);
}

input[type="email"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--sd-primary);
  box-shadow: 0 0 0 3px hsl(220 100% 45% / .14);
}

label { font-size: .875rem; font-weight: 550; color: var(--sd-ink-strong); }

/* --------------------------------------------------------------------------
   13. Notices
   -------------------------------------------------------------------------- */

.install-notice,
.junk-notice {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  margin-block: 1.5rem;
  font-size: .9375rem;
  line-height: 1.55;
  background: var(--sd-primary-tint);
  border: 1px solid hsl(215 80% 88%);
  border-left: 3px solid var(--sd-primary);
  border-radius: var(--sd-radius-md);
  color: var(--sd-ink);
}

.install-notice-icon,
.junk-notice-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--sd-primary);
}

/* --------------------------------------------------------------------------
   14. Media
   -------------------------------------------------------------------------- */

.product-artwork,
.product-video,
.video-embed {
  width: 100%;
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
  background: var(--sd-muted);
  box-shadow: var(--sd-shadow-soft);
}

.video-embed { position: relative; aspect-ratio: 16 / 9; }

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.drum-pack-catalog-artwork {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sd-radius-md);
  margin-bottom: 1rem;
  background: var(--sd-muted);
}

.drum-pack-catalog-artwork--contain { object-fit: contain; padding: .75rem; }

.drum-pack-catalog-header { margin-bottom: .5rem; }
.drum-pack-catalog-copy,
.drum-pack-catalog-summary { font-size: .9375rem; color: var(--sd-ink-muted); }
.drum-pack-catalog-actions { margin-top: 1.15rem; }

.drum-pack-catalog-link {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--sd-primary);
}

.drum-pack-catalog-link:hover { color: var(--sd-primary-hover); }

.drum-pack-card-status {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--sd-muted);
  color: var(--sd-ink-muted);
}

.demo-copy { font-size: .9375rem; color: var(--sd-ink-muted); }
.demos-feature { margin-bottom: 1.5rem; }

audio {
  width: 100%;
  margin-block: .75rem;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sd-section-gap);
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--sd-border);
  font-size: .875rem;
  color: var(--sd-ink-muted);
}

.footer-brand {
  font-weight: 700;
  color: var(--sd-ink-strong);
  margin-bottom: .5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin-bottom: 1.25rem;
}

.footer-links a,
.support-link { color: var(--sd-ink-muted); }
.footer-links a:hover,
.support-link:hover { color: var(--sd-primary); }

.footer-legal,
.footer-meta { font-size: .8125rem; color: var(--sd-ink-faint); }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

/* Visible only once focused, so keyboard users can jump the nav. */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -3.5rem;
  z-index: 100;
  padding: .6rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sd-white);
  background: var(--sd-primary);
  border-radius: var(--sd-radius-md);
  transition: top .2s ease;
}

.skip-link:focus { top: .5rem; text-decoration: none; color: var(--sd-white); }

.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;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .topbar { gap: .75rem; }
  .nav-links { gap: 0; width: 100%; }
  .nav-links a { padding: .35rem .5rem; font-size: .875rem; }
  .hero-actions .button,
  .platform-buttons .button { flex: 1 1 100%; }
  .section + .section { padding-top: calc(var(--sd-section-gap) * .8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover,
  .feature-card:hover,
  .button:hover { transform: none; }
}

@media print {
  header, .nav-links, .hero-actions, .newsletter-inline-form { display: none; }
  body { background: #fff; color: #000; }
}