/* Jaybird Digital — marketing page.
   Aesthetic: minimal, matte, metallic. Cool graphite neutrals, hairline
   bevels, low soft shadows, generous whitespace, one restrained accent.
   The token block is shared verbatim with portal.css so the whole product
   reads as one surface. An editorial serif carries the display type; the
   product itself stays in the system sans. */

:root {
  color-scheme: light;

  /* Cool blue-tinted neutrals, matched to the Jaybird brand navy */
  --bg: #e9edf1;
  --bg-top: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eff2f6;

  --ink: #17202b;
  --ink-2: #39434f;
  --muted: #6d7683;

  --line: rgba(20, 32, 50, 0.10);
  --line-2: rgba(20, 32, 50, 0.16);
  --sheen: rgba(255, 255, 255, 0.85);

  /* Jaybird brand navy — the single point of colour */
  --metal: #144570;
  --metal-hi: #1f5885;
  --metal-lo: #0d3352;
  --metal-ink: #f2f7fb;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(18, 28, 42, 0.05);
  --shadow: 0 12px 34px rgba(18, 28, 42, 0.07);
  --shadow-lg: 0 40px 90px rgba(18, 28, 42, 0.16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --shell: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: min(100% - 40px, var(--shell));
  margin: 0 auto;
}

/* ---- Navigation -------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(241, 242, 244, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  width: min(100% - 40px, var(--shell));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}

.wordmark {
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.02rem;
}

/* The brand logo replaces the text wordmark in the nav and footer. The image
   is a transparent PNG served from the marketing bucket; the width/height
   attributes come from the file (1230x669) so there is no layout shift. */
.logo-mark {
  display: inline-block;
  height: 30px;
  width: auto;
  text-decoration: none;
}
.logo-mark img {
  display: block;
  height: 100%;
  width: auto;
}
.footer .logo-mark { height: 26px; }

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: 14px;
  flex: 1;
}

.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.93rem;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ---- Buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.14s ease, background 0.14s ease;
  white-space: nowrap;
}

.button-lg { padding: 14px 26px; font-size: 1rem; }
.button-block { width: 100%; }

.button-primary {
  color: var(--metal-ink);
  background: linear-gradient(180deg, var(--metal-hi), var(--metal));
  border-color: var(--metal-lo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(18, 28, 42, 0.16);
}
.button-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 26px rgba(20,23,28,0.22); }

.button-secondary {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-sm);
}
.button-secondary:hover { transform: translateY(-1px); }

.button-ghost { color: var(--ink-2); background: transparent; }
.button-ghost:hover { color: var(--ink); background: rgba(20, 32, 50, 0.05); }

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 0;
  text-align: center;
  background:
    radial-gradient(1100px 460px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--bg-top), var(--bg));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3f8f6b;
  box-shadow: 0 0 0 3px rgba(63, 143, 107, 0.16);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.7rem, 7.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--ink);
}
.display em { font-style: italic; color: var(--metal); }
.display-sm { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 12px; }

.lede {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-2);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.hero-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 clamp(44px, 6vw, 66px); }
.hero-note strong { color: var(--ink); font-weight: 600; }

/* ---- Product showcase --------------------------------------------------- */

.showcase { position: relative; padding-bottom: clamp(40px, 7vw, 80px); }

.showcase-glow {
  position: absolute;
  inset: auto 8% 8%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(20, 69, 112, 0.22), transparent);
  filter: blur(38px);
  z-index: 0;
}

.window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border-bottom: 1px solid var(--line);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.window-url {
  margin-left: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.74rem;
}

/* The screenshot of a real generated site — the strongest proof we have. */
.window-shot {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--line);
}

.showcase-caption {
  margin: 16px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---- Sections ----------------------------------------------------------- */

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-alt { background: linear-gradient(180deg, var(--surface-2), var(--bg)); border-block: 1px solid var(--line); }

.section-label {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

/* Value props */
.props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.prop-num {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--metal);
  opacity: 0.55;
  margin-bottom: 8px;
}
.prop h3 { margin: 0 0 8px; font-size: 1.06rem; letter-spacing: -0.01em; }
.prop p { margin: 0; color: var(--ink-2); font-size: 0.96rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-sm);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--metal-hi), var(--metal));
  color: var(--metal-ink);
  font-size: 0.88rem;
  font-weight: 600;
}
.step h3 { margin: 0 0 8px; font-size: 1.04rem; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

/* ---- Pricing ------------------------------------------------------------ */

.pricing { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 26px; align-items: start; }

.price-card {
  padding: 32px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow);
}

.price-eyebrow {
  margin: 0 0 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-row { display: flex; align-items: baseline; gap: 8px; }
.price-amount {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.price-unit { color: var(--muted); font-size: 1rem; }
.price-sub { margin: 8px 0 20px; color: var(--ink-2); }
.price-sub strong { color: var(--ink); }

.price-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.price-list li {
  position: relative;
  padding-left: 27px;
  color: var(--ink-2);
  font-size: 0.96rem;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 8px;
  border-left: 2px solid var(--metal);
  border-bottom: 2px solid var(--metal);
  transform: rotate(-45deg);
}

.price-foot { margin: 14px 0 0; color: var(--muted); font-size: 0.86rem; text-align: center; }

.price-note {
  padding: 30px 28px;
  border: 1px dashed var(--line-2);
  border-radius: 18px;
  background: var(--surface-3);
}
.price-note h3 { margin: 0 0 10px; font-size: 1.06rem; letter-spacing: -0.01em; }
.price-note p { margin: 0 0 12px; color: var(--ink-2); font-size: 0.96rem; }
.price-note-foot { color: var(--muted); font-size: 0.9rem; margin: 0; }

.price-email-line { font-size: 1rem; }
.price-email-line strong { color: var(--ink); }

/* ---- Closing CTA -------------------------------------------------------- */

.cta {
  text-align: center;
  padding: clamp(44px, 6vw, 68px) 28px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,0.9), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-3));
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow);
}
.cta p { margin: 0 0 22px; color: var(--ink-2); }

/* ---- Footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding: 26px 0 40px; background: var(--bg); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-meta { color: var(--muted); font-size: 0.86rem; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .props, .steps { grid-template-columns: 1fr; gap: 18px; }
  .pricing { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-actions .button-ghost { display: none; }
  .hero-actions .button { width: 100%; }
  .display { font-size: clamp(2.3rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq { display: grid; gap: 10px; max-width: 780px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-sm);
  overflow: hidden;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 52px 17px 20px;
  position: relative;
  font-weight: 550;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }

/* Chevron that rotates when the answer opens. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-2);
  font-size: 0.96rem;
}

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 0.88rem; }
.footer-links a:hover { color: var(--ink); }