/* PedalStock site: the app's own design system. Dark only, like the app.
   Layout: a single centered column (max 1080px) of alternating text and app-screen panels on a perfboard-dotted ground. */
:root {
  --background: #16161a;
  --surface: #232326;
  --card-border: #333336;
  --primary-accent: #ff8c42;
  --secondary-accent: #4ecdc4;
  --warning: #ea604c;
  --text-primary: #ededed;
  --text-secondary: #9a9a9e;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-card: 14px;
  --radius-phone: 44px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font: 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--secondary-accent); text-underline-offset: 3px; }
a:focus-visible, .cta:focus-visible { outline: 3px solid var(--primary-accent); outline-offset: 3px; border-radius: 6px; }
img, svg { max-width: 100%; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Header */
.site-header { padding-block: 20px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: 19px; }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a { color: var(--text-secondary); text-decoration: none; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-primary); }

/* Perfboard ground: the stripboard and perfboard pedals are built on */
.perfboard {
  background-image: radial-gradient(circle, rgba(237, 237, 237, 0.07) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

/* Hero */
.hero { padding-block: 40px 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.eyebrow { font: 600 13px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-accent); margin: 0 0 16px; }
h1 { font: 700 clamp(38px, 6vw, 60px)/1.04 var(--font-display); letter-spacing: -0.025em; margin: 0 0 20px; text-wrap: balance; }
.lede { font-size: 20px; line-height: 1.5; color: var(--text-secondary); max-width: 34ch; margin: 0 0 28px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary-accent); color: var(--background);
  font-weight: 600; font-size: 17px; text-decoration: none;
  padding: 13px 22px; border-radius: 999px;
}
.cta-note { font: 13px/1.4 var(--font-mono); color: var(--text-secondary); }

/* Phone and app-screen mocks, built from the app's components */
.phone {
  width: 100%; max-width: 330px; margin-inline: auto;
  background: var(--background);
  border: 10px solid #2c2c30; border-radius: var(--radius-phone);
  padding: 18px 14px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.screen-title { font: 700 26px/1.1 var(--font-display); margin: 6px 4px 14px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: 9px; padding: 2px; margin-bottom: 12px; font-size: 12px; text-align: center; }
.segmented span { padding: 5px 4px; border-radius: 7px; color: var(--text-secondary); }
.segmented .on { background: #3a3a3e; color: var(--text-primary); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 12px;
}
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-text { flex: 1; min-width: 0; }
.row-title { font-size: 15px; line-height: 1.3; }
.row-sub { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.qty { font: 600 15px/1 var(--font-mono); }
.short { color: var(--warning); }
.info { color: var(--secondary-accent); }
.accent { color: var(--primary-accent); }
.chev { color: var(--text-secondary); font-size: 14px; }
.cat-header { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 600; font-size: 14px; padding: 4px 2px; }
.cat-header .count { margin-left: auto; font: 12px var(--font-mono); }
.tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-secondary); flex: none; }
.tick.done { background: var(--primary-accent); border-color: var(--primary-accent); }
.struck { text-decoration: line-through; color: var(--text-secondary); }
.bar { height: 4px; border-radius: 2px; background: var(--card-border); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--primary-accent); }

/* Features */
.features { padding-block: 24px 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 56px; border-top: 1px solid var(--card-border); }
.feature:nth-child(even) .feature-text { order: 2; }
.feature h2 { font: 700 clamp(28px, 3.6vw, 38px)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance; }
.feature p { color: var(--text-secondary); margin: 0 0 16px; max-width: 46ch; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.points li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--primary-accent); }
.panel { max-width: 400px; width: 100%; margin-inline: auto; }
.bom {
  font: 13px/1.7 var(--font-mono); color: var(--text-primary);
  background: #0f0f12; border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: 14px 16px; margin: 0; white-space: pre; overflow-x: auto;
}
.arrow { text-align: center; color: var(--primary-accent); font-size: 22px; line-height: 1; padding: 8px 0; }

/* Privacy band */
.band { padding-block: 64px; border-top: 1px solid var(--card-border); }
.band .wrap { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band h2 { grid-column: 1 / -1; font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--font-display); margin: 0 0 4px; }
.band h3 { font-size: 17px; margin: 0 0 6px; }
.band p { margin: 0; color: var(--text-secondary); font-size: 15px; }

/* Text pages (privacy, support) */
.page { padding-block: 32px 72px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(34px, 5vw, 46px); }
.page h2 { font: 700 22px/1.3 var(--font-display); margin: 40px 0 10px; }
.page p, .page li { color: var(--text-secondary); }
.page strong { color: var(--text-primary); }
.page code { font-family: var(--font-mono); font-size: 0.88em; color: var(--text-primary); background: var(--surface); padding: 1px 6px; border-radius: 5px; }
.updated { font: 13px var(--font-mono); color: var(--text-secondary); }
.contact { font-family: var(--font-mono); color: var(--text-primary); user-select: all; }

/* Footer */
.site-footer { padding-block: 28px 40px; border-top: 1px solid var(--card-border); color: var(--text-secondary); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--text-secondary); }

@media (max-width: 820px) {
  .hero .wrap, .feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature:nth-child(even) .feature-text { order: 0; }
  .band .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .cta { transition: transform 0.15s ease; }
  .cta:hover { transform: translateY(-1px); }
}