/* ================================
   LaunchKit Landing Page Styles
   Exact replication of Evil Martians' LaunchKit template
   Navy theme: hue=255, saturation=0.2, contrast=0.8
   ================================ */

/* Variables on :root so nav/footer outside .lk can access them */
:root {
  scroll-behavior: smooth;
  --lk-font-size-s: 13.75px;
  --lk-font-size-m: 16.5px;
  --lk-font-size-l: 22px;
  --lk-font-size-xl: 44px;
  --lk-font-size-xxl: 66px;
  --lk-line-height-paragraph-s: 20px;
  --lk-line-height-paragraph-m: 24px;
  --lk-line-height-paragraph-l: 28px;
  --lk-letter-spacing-paragraph-l: -0.4px;
  --lk-line-height-paragraph-xl: 52px;
  --lk-letter-spacing-paragraph-xl: -1px;
  --lk-line-height-h1: 70px;
  --lk-letter-spacing-h1: -2px;
  --lk-line-height-h2: 48px;
  --lk-letter-spacing-h2: -1.5px;
  --lk-line-height-h3: 24px;
  --lk-letter-spacing-h3: -0.75px;
  --lk-space-default: 12px;
  --lk-space-section: 60px;
  --lk-space-card-m: 24px;
  --lk-radius-s: 8px;
  --lk-radius-m: 12px;
  --lk-radius-l: 16px;
  --lk-header-font-weight: 600;
  --lk-ui-button-font-weight: 500;

  /* Light theme navy colors */
  --lk-color-accent: oklch(0.64 0.21 255);
  --lk-color-background: oklch(94% 0.015 255);
  --lk-color-background-blur: oklch(94% 0.015 255 / 0.8);
  --lk-color-text-primary: oklch(22% 0.02 255);
  --lk-color-text-secondary: oklch(22% 0.02 255 / 0.7);
  --lk-color-text-tertiary: oklch(22% 0.02 255 / 0.42);
  --lk-color-accent-hover: oklch(0.59 0.21 255);
  --lk-color-accent-b: oklch(0.64 0.21 255 / 0.16);
  --lk-color-accent-b-hover: oklch(0.54 0.21 255 / 0.16);
  --lk-color-surface: oklch(22% 0.02 255 / 0.04);
  --lk-color-on-accent: white;
  --lk-color-border-level-2: oklch(22% 0.02 255 / 0.08);
  --lk-color-border-level-3: oklch(22% 0.02 255 / 0.16);
  --lk-color-gradient-bg-start: oklch(0.64 0.09 255 / 0.3);
  --lk-color-gradient-bg-end: oklch(0.64 0.09 255 / 0);
  --lk-color-gradient-promo-start: oklch(30% 0.08 255);
  --lk-color-gradient-promo-end: oklch(22% 0.12 280);
}

.lk {
  font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lk-color-text-primary);
}

/* ================================
   Background Gradient
   ================================ */
.lk-background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(180deg, var(--lk-color-gradient-bg-start), var(--lk-color-gradient-bg-end));
  height: 80vh;
  z-index: -10;
  pointer-events: none;
}

/* ================================
   Page Container
   ================================ */
.lk-page {
  max-width: 1008px;
  margin: 0 auto;
  position: relative;
}

/* ================================
   Section
   ================================ */
.lk-section {
  padding: var(--lk-space-section) 0;
  scroll-margin-top: 100px;
}

/* ================================
   Typography
   ================================ */
.lk h1 {
  font-size: var(--lk-font-size-xxl);
  line-height: var(--lk-line-height-h1);
  letter-spacing: var(--lk-letter-spacing-h1);
  font-weight: var(--lk-header-font-weight);
  color: var(--lk-color-text-primary);
  margin: var(--lk-space-default) 0;
}

.lk h2 {
  font-size: var(--lk-font-size-xl);
  line-height: var(--lk-line-height-h2);
  letter-spacing: var(--lk-letter-spacing-h2);
  font-weight: var(--lk-header-font-weight);
  color: var(--lk-color-text-primary);
  margin: var(--lk-space-default) 0;
}

.lk h3 {
  font-size: var(--lk-font-size-l);
  line-height: var(--lk-line-height-h3);
  letter-spacing: var(--lk-letter-spacing-h3);
  font-weight: var(--lk-header-font-weight);
  color: var(--lk-color-text-primary);
  margin: var(--lk-space-default) 0;
}

.lk-feature-heading h3 {
  color: var(--lk-color-accent);
}

@layer base {
  .lk p {
    font-size: var(--lk-font-size-m);
    line-height: var(--lk-line-height-paragraph-m);
    color: var(--lk-color-text-secondary);
  }
}

.lk-paragraph-s {
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  color: var(--lk-color-text-secondary);
}

.lk-paragraph-m {
  font-size: var(--lk-font-size-m);
  line-height: var(--lk-line-height-paragraph-m);
  color: var(--lk-color-text-secondary);
}

.lk-paragraph-l {
  font-size: var(--lk-font-size-l);
  line-height: var(--lk-line-height-paragraph-l);
  letter-spacing: var(--lk-letter-spacing-paragraph-l);
  color: var(--lk-color-text-secondary);
}

.lk-text-bold {
  font-weight: 600;
  color: var(--lk-color-text-primary);
}

.lk-text-centered {
  text-align: center;
}

.lk-balanced {
  text-wrap: balance;
}

.lk-no-top-margin {
  margin-top: 0;
}

/* ================================
   Eyebrow (pill badge)
   ================================ */
.lk-eyebrow {
  display: inline-flex;
  margin-bottom: var(--lk-space-default);
  border: 1px solid var(--lk-color-border-level-3);
  border-radius: var(--lk-radius-l);
  background-color: var(--lk-color-surface);
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-s);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  padding: 2px 12px;
  text-decoration: none;
}

.lk-eyebrow:hover {
  color: var(--lk-color-text-primary);
}

/* ================================
   Heading Block
   ================================ */
.lk-heading {
  margin-bottom: var(--lk-space-default);
  flex-direction: column;
  max-width: 672px;
  display: flex;
}

.lk-heading.lk-hero {
  max-width: 800px;
  padding-bottom: 36px;
}

.lk-button.lk-button-with-sublabel {
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px;
}

.lk-button-sublabel {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
  line-height: 1;
}

.lk-hero .lk-button-group .lk-button {
  min-height: 52px;
}

.lk-heading.lk-centered {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.lk-heading.lk-heading-wide {
  max-width: 800px;
}

/* ================================
   Buttons
   ================================ */
.lk-button {
  display: inline-flex;
  gap: 8px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background: transparent;
  padding: 12px 24px;
  font-size: var(--lk-font-size-m);
  line-height: 22px;
  font-weight: var(--lk-ui-button-font-weight);
  text-align: center;
  border-radius: var(--lk-radius-m);
  justify-content: center;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.lk-button.lk-primary {
  background-color: var(--lk-color-accent);
  color: var(--lk-color-on-accent);
}

.lk-button.lk-primary:hover {
  background-color: var(--lk-color-accent-hover);
  color: var(--lk-color-on-accent);
  transform: translateY(-1px);
}

.lk-button.lk-tertiary {
  box-shadow: inset 0 0 0 1px var(--lk-color-border-level-3);
  color: var(--lk-color-text-secondary);
}

.lk-button.lk-tertiary:hover {
  background-color: var(--lk-color-surface);
  color: var(--lk-color-text-primary);
}

.lk-button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.lk-button-group.lk-margin-paragraph {
  margin: var(--lk-space-default) 0;
}

.lk-button-group.lk-centered {
  justify-content: center;
}

/* ================================
   Grids
   ================================ */
.lk-grid {
  display: grid;
  margin: var(--lk-space-default) 0;
  gap: 12px;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
}

.lk-grid.lk-gap-xl {
  gap: 60px;
}

.lk-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lk-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ================================
   Feature Cards
   ================================ */
.lk-feature-card {
  padding: var(--lk-space-card-m);
  background-color: var(--lk-color-surface);
  border-radius: var(--lk-radius-l);
  display: flex;
  gap: 16px;
  flex-direction: column;
  align-items: flex-start;
}

.lk-feature-heading {
  max-width: 672px;
}

/* ================================
   Cards with Icons
   ================================ */
.lk-cards-with-icons {
  gap: 36px;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 24px 0;
  display: grid;
}

.lk-card-with-icon {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.lk-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lk-color-accent);
}

.lk-card-icon svg {
  width: 32px;
  height: 32px;
}

/* ================================
   Comparison Table
   ================================ */
.lk-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lk-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  margin: var(--lk-space-default) 0;
  border-radius: var(--lk-radius-l);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--lk-color-border-level-2), 0 2px 8px oklch(22% 0.02 255 / 0.06);
}

.lk-comparison-table th {
  background-color: var(--lk-color-surface);
  color: var(--lk-color-text-secondary);
  font-weight: 600;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--lk-color-border-level-3);
}

.lk-comparison-table th.lk-highlight {
  color: var(--lk-color-accent);
  background-color: oklch(0.64 0.21 255 / 0.06);
}

.lk-comparison-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--lk-color-border-level-2);
  color: var(--lk-color-text-primary);
  transition: background-color 0.1s ease;
}

.lk-comparison-table td:first-child {
  font-weight: 500;
  color: var(--lk-color-text-secondary);
}

.lk-comparison-table td.lk-highlight {
  background-color: oklch(0.64 0.21 255 / 0.03);
}

.lk-comparison-table tbody tr:nth-child(even) td {
  background-color: oklch(22% 0.02 255 / 0.015);
}

.lk-comparison-table tbody tr:nth-child(even) td.lk-highlight {
  background-color: oklch(0.64 0.21 255 / 0.05);
}

.lk-comparison-table tbody tr:hover td {
  background-color: oklch(22% 0.02 255 / 0.04);
}

.lk-comparison-table tbody tr:hover td.lk-highlight {
  background-color: oklch(0.64 0.21 255 / 0.07);
}

.lk-comparison-table tr:last-child td {
  border-bottom: none;
}

.lk-comparison-table .lk-check {
  color: oklch(0.65 0.2 145);
  font-weight: 600;
}

.lk-comparison-table .lk-cross {
  color: var(--lk-color-text-tertiary);
}

.lk-comparison-table .lk-cell-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lk-comparison-table .lk-cell-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.lk-comparison-table .lk-check .lk-cell-icon {
  color: oklch(0.65 0.2 145);
}

.lk-comparison-table .lk-cross .lk-cell-icon {
  color: var(--lk-color-text-tertiary);
  opacity: 0.6;
}

/* ================================
   Stats / Numbers
   ================================ */
.lk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
}

.lk-stat {
  text-align: center;
}

.lk-stat-number {
  font-size: var(--lk-font-size-xl);
  line-height: var(--lk-line-height-paragraph-xl);
  letter-spacing: var(--lk-letter-spacing-paragraph-xl);
  font-weight: 700;
  color: var(--lk-color-accent);
}

.lk-stat-label {
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  color: var(--lk-color-text-secondary);
  margin-top: 4px;
  max-width: 19ch;
  margin-inline: auto;
}

/* ================================
   FAQ / Accordion
   ================================ */
.lk-accordion {
  border-top: 1px solid var(--lk-color-border-level-2);
  display: flex;
  flex-direction: column;
}

.lk-accordion-item {
  border-bottom: 1px solid var(--lk-color-border-level-2);
  width: 100%;
  overflow: hidden;
}

.lk-accordion-toggle {
  padding: var(--lk-space-card-m);
  align-items: center;
  display: flex;
  cursor: pointer;
  list-style: none;
}

.lk-accordion-toggle::-webkit-details-marker {
  display: none;
}

.lk-accordion-toggle:hover {
  color: var(--lk-color-text-secondary);
}

.lk-accordion-toggle p {
  font-size: var(--lk-font-size-m);
  line-height: var(--lk-line-height-paragraph-m);
  font-weight: 600;
  margin: 0;
}

.lk-accordion-chevron {
  margin-left: auto;
  color: var(--lk-color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

[open] .lk-accordion-chevron {
  transform: rotate(180deg);
}

.lk-accordion-content {
  padding: 0 var(--lk-space-card-m) var(--lk-space-card-m);
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-m);
  line-height: var(--lk-line-height-paragraph-m);
}

.lk-accordion-content p {
  margin: 8px 0;
}

/* ================================
   Promo CTA Block
   ================================ */
.lk-promo-cta {
  background-image: linear-gradient(135deg, var(--lk-color-gradient-promo-start), var(--lk-color-gradient-promo-end));
  border-radius: var(--lk-radius-l);
  padding: var(--lk-space-section);
  margin-bottom: var(--lk-space-section);
}

.lk-promo-cta h2 {
  color: oklch(96% 0.01 255);
}

.lk-promo-cta .lk-paragraph-m {
  color: oklch(85% 0.02 255);
}

.lk-promo-cta .lk-button.lk-primary {
  background-color: white;
  color: oklch(25% 0.08 255);
}

.lk-promo-cta .lk-button.lk-primary:hover {
  background-color: oklch(95% 0.01 255);
}

.lk-promo-cta .lk-button.lk-tertiary {
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.3);
  color: oklch(90% 0.01 255);
}

.lk-promo-cta .lk-button.lk-tertiary:hover {
  background-color: oklch(100% 0 0 / 0.1);
  color: white;
}

/* ================================
   Pricing highlight
   ================================ */
.lk-pricing-highlight {
  border-radius: var(--lk-radius-l);
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.lk-pricing-highlight p {
  margin: 0;
}

.lk-pricing-highlight .lk-pricing-label {
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Marketplace card (loss) */
.lk-pricing-loss {
  background-color: oklch(0.6 0.05 25 / 0.04);
  border: 1px solid oklch(0.6 0.12 25 / 0.15);
}

.lk-pricing-loss .lk-pricing-label {
  color: oklch(0.6 0.12 25 / 0.7);
}

.lk-pricing-loss .lk-pricing-context {
  color: var(--lk-color-text-tertiary);
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
}

/* Sailing+ card (win) */
.lk-pricing-win {
  background-color: oklch(0.64 0.21 255 / 0.05);
  border: 1px solid oklch(0.64 0.21 255 / 0.15);
  box-shadow: 0 4px 16px oklch(0.64 0.21 255 / 0.08);
}

.lk-pricing-win .lk-pricing-label {
  color: var(--lk-color-accent);
}

.lk-pricing-win .lk-pricing-context {
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
}

.lk-pricing-amount {
  font-size: var(--lk-font-size-xl);
  font-weight: 700;
  color: var(--lk-color-accent);
  line-height: 1.2;
}

.lk-pricing-versus {
  font-size: var(--lk-font-size-xl);
  font-weight: 700;
  color: oklch(0.6 0.18 25);
  line-height: 1.2;
  position: relative;
}

.lk-pricing-versus::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 2px;
  background: oklch(0.6 0.18 25 / 0.6);
  transform: translateY(-50%);
}

.lk-pricing-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}

.lk-pricing-loss .lk-pricing-icon {
  color: oklch(0.6 0.12 25 / 0.5);
}

.lk-pricing-win .lk-pricing-icon {
  color: var(--lk-color-accent);
}

.lk-pricing-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.lk-pricing-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lk-pricing-line-amount {
  font-size: var(--lk-font-size-xl);
  font-weight: 700;
  color: var(--lk-color-accent);
  line-height: 1;
}

.lk-pricing-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lk-color-accent);
  background: oklch(0.64 0.21 255 / 0.1);
  border: 1px solid oklch(0.64 0.21 255 / 0.2);
  border-radius: var(--lk-radius-l);
  white-space: nowrap;
}

/* ================================
   Plan Pricing Cards
   ================================ */
.lk-plan-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.lk-plan-toggle > div,
.lk-plan-toggle > span {
  display: inline-flex;
}

.lk .lk-plan-toggle-button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px 20px;
  font-size: var(--lk-font-size-s);
  font-weight: 500;
  border-radius: var(--lk-radius-s);
  color: var(--lk-color-text-tertiary);
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: center;
}

.lk .lk-plan-toggle-button.lk-plan-toggle-yearly {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lk .lk-plan-toggle-button .lk-plan-toggle-save {
  font-size: 10px;
  font-weight: 500;
  color: oklch(0.65 0.2 145);
  line-height: 1;
}

/* Active state: the Stimulus controller adds bg-accent-600 to the active button */
.lk .lk-plan-toggle-button.bg-accent-600 {
  background-color: var(--lk-color-accent);
  color: white;
}

.lk .lk-plan-toggle-button.bg-accent-600 .lk-plan-toggle-save {
  color: white;
}

.lk-plan-card {
  padding: 32px;
  background-color: var(--lk-color-surface);
  border: 1px solid var(--lk-color-border-level-2);
  border-radius: var(--lk-radius-l);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lk-plan-header {
  margin-bottom: 8px;
}

.lk-plan-header h3 {
  color: var(--lk-color-accent);
}

.lk-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.lk-plan-price.hidden {
  display: none;
}

.lk-plan-amount {
  font-size: var(--lk-font-size-xl);
  font-weight: 700;
  color: var(--lk-color-text-primary);
  line-height: 1.2;
}

.lk-plan-interval {
  font-size: var(--lk-font-size-m);
  color: var(--lk-color-text-tertiary);
}

.lk-plan-features {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.lk-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  color: var(--lk-color-text-secondary);
}

.lk-plan-feature-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: oklch(0.65 0.2 145);
}

.lk-plan-cta {
  width: 100%;
  margin-top: auto;
}

.lk-plan-status {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lk-plan-status.hidden {
  display: none;
}

.lk-plan-status-text {
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  color: var(--lk-color-text-secondary);
}

.lk-plan-status-warning {
  color: oklch(0.7 0.15 55);
}

/* ================================
   Image wide (extends beyond container)
   ================================ */
.lk-image-wide {
  margin: var(--lk-space-default) 0;
  width: 116%;
  max-width: none;
  margin-left: -8%;
}

.lk-image-wide img {
  width: 100%;
  border-radius: var(--lk-radius-l);
  box-shadow: 0 8px 40px oklch(22% 0.02 255 / 0.15);
}

/* ================================
   Sign-in link at bottom
   ================================ */
.lk-signin-link {
  text-align: center;
  padding: 24px 0;
  border-top: 1px solid var(--lk-color-border-level-2);
  color: var(--lk-color-text-tertiary);
  font-size: var(--lk-font-size-s);
}

.lk-signin-link a {
  color: var(--lk-color-accent);
  text-decoration: underline;
  text-decoration-color: var(--lk-color-accent-b);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.lk-signin-link a:hover {
  color: var(--lk-color-accent-hover);
}

/* ================================
   Navigation (floating pill)
   Exact match of LaunchKit nav-container
   ================================ */
.lk-nav-container {
  position: sticky;
  inset: 24px 0% auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48px);
  max-width: calc(80rem - 4rem);
  margin: 24px auto 0;
  padding: 12px 12px 12px 16px;
  background-color: var(--lk-color-background-blur);
  box-shadow: 0 0 0 1px var(--lk-color-border-level-2);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: var(--lk-radius-l);
  font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lk-color-text-primary);
  box-sizing: border-box;
}

body:has(.lk-page) .lk-nav-container {
  max-width: 1008px;
}

.lk-nav-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--lk-color-text-primary);
  font-weight: 800;
  font-size: 18px;
}

.lk-nav-brand:hover {
  opacity: 0.8;
}

.lk-nav-brand img {
  width: 36px;
  height: 36px;
}

.lk-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lk-nav-link {
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-m);
  line-height: 22px;
  font-weight: var(--lk-ui-button-font-weight);
  padding: 8px 16px;
  border-radius: var(--lk-radius-s);
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s;
}

.lk-nav-link:hover {
  color: var(--lk-color-text-primary);
}

.lk-nav-link:active {
  color: var(--lk-color-text-tertiary);
}

.lk-page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lk-page-nav-link {
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-m);
  font-weight: var(--lk-ui-button-font-weight);
  padding: 8px 16px;
  border-radius: var(--lk-radius-s);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}

.lk-page-nav-link:hover {
  color: var(--lk-color-text-primary);
}

.lk-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lk-button.lk-compact {
  padding: 8px 16px;
  border-radius: var(--lk-radius-s);
}

.lk-hide-on-mobile {
  display: inline-flex;
}

.lk-mobile-only {
  display: none;
}

.lk-nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--lk-radius-s);
  color: var(--lk-color-text-primary);
  transition: background-color 0.15s;
}

.lk-nav-hamburger:hover {
  background-color: var(--lk-color-background-level-1);
}

.lk-nav-hamburger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lk-nav-hamburger-close {
  display: none;
}

.lk-nav-mobile-menu {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--lk-color-border-level-2);
  margin-top: 4px;
}

.lk-nav-mobile-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--lk-radius-s);
  color: var(--lk-color-text-secondary);
  font-size: var(--lk-font-size-m);
  font-weight: var(--lk-ui-button-font-weight);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.lk-nav-mobile-link:hover {
  background-color: var(--lk-color-background-level-1);
  color: var(--lk-color-text-primary);
}

.lk-nav-mobile-link.lk-button {
  text-align: center;
}

.lk-nav-container.lk-nav-open {
  flex-wrap: wrap;
}

.lk-nav-container.lk-nav-open .lk-nav-mobile-menu {
  display: flex;
}

.lk-nav-container.lk-nav-open .lk-nav-hamburger-open {
  display: none;
}

.lk-nav-container.lk-nav-open .lk-nav-hamburger-close {
  display: flex;
}

/* ================================
   Footer (exact LaunchKit style)
   ================================ */
.lk-footer {
  border-top: 1px solid var(--lk-color-border-level-2);
  margin-top: auto;
  padding-top: 60px;
  padding-bottom: 24px;
  font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lk-color-text-primary);
}

.lk-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
}

body:has(.lk-page) .lk-footer-inner {
  max-width: 1008px;
}

.lk-footer-menu {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  margin-bottom: 24px;
}

.lk-footer-brand {
  font-size: var(--lk-font-size-s);
  line-height: var(--lk-line-height-paragraph-s);
  color: var(--lk-color-text-tertiary);
}

.lk-footer-brand a {
  color: var(--lk-color-accent);
  text-decoration: none;
}

.lk-footer-brand a:hover {
  color: var(--lk-color-accent-hover);
}

.lk-footer-link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 12px;
}

.lk-footer-link-list a {
  font-size: var(--lk-font-size-s);
  font-weight: var(--lk-ui-button-font-weight);
  color: var(--lk-color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.lk-footer-link-list a:hover {
  color: var(--lk-color-text-primary);
}

.lk-footer-legal {
  display: flex;
  gap: 24px;
}

.lk-footer-legal a {
  font-size: var(--lk-font-size-s);
  font-weight: var(--lk-ui-button-font-weight);
  color: var(--lk-color-text-tertiary);
  text-decoration: none;
  transition: color 0.15s;
}

.lk-footer-legal a:hover {
  color: var(--lk-color-text-secondary);
}

/* ================================
   Responsive: Tablet (≤1056px)
   Exact match of LaunchKit tablet.css
   ================================ */
@media screen and (max-width: 1056px) {
  .lk-page {
    max-width: 728px;
    padding: 0 24px;
  }

  .lk-image-wide {
    width: 100%;
    margin-left: 0;
  }

  .lk-nav-container {
    width: auto;
    margin: 16px 24px 0;
    max-width: none;
  }

  .lk-nav-link {
    padding: 16px;
    display: inline-flex;
  }

  .lk-nav-menu {
    display: none;
  }

  .lk-nav-actions {
    flex-shrink: 0;
  }
}

/* ================================
   Responsive: Mobile (≤767px)
   Exact match of LaunchKit mobile.css
   ================================ */
@media screen and (max-width: 767px) {
  .lk {
    --lk-font-size-l: 19.25px;
    --lk-font-size-xl: 33px;
    --lk-font-size-xxl: 44px;
    --lk-line-height-paragraph-l: 24px;
    --lk-letter-spacing-paragraph-l: -0.2px;
    --lk-line-height-paragraph-xl: 40px;
    --lk-letter-spacing-paragraph-xl: -0.5px;
    --lk-line-height-h1: 48px;
    --lk-letter-spacing-h1: -1.5px;
    --lk-line-height-h2: 36px;
    --lk-letter-spacing-h2: -1px;
    --lk-line-height-h3: 22px;
    --lk-letter-spacing-h3: -0.75px;
    --lk-space-section: 24px;
    --lk-space-card-m: 12px;
    --lk-radius-m: 8px;
    --lk-radius-l: 12px;
  }

  .lk-page {
    padding: 0 16px;
    max-width: none;
  }

  .lk-columns-2,
  .lk-columns-3,
  .lk-cards-with-icons {
    grid-template-columns: 1fr;
  }

  .lk-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .lk-button-group {
    flex-direction: column;
    width: 100%;
  }

  .lk-button-group .lk-button {
    width: 100%;
  }

  .lk-promo-cta {
    padding: var(--lk-space-section) var(--lk-space-card-m);
  }

  .lk-nav-container {
    width: auto;
    margin: 12px 16px 0;
    padding: 8px 8px 8px 12px;
    inset: 12px auto auto auto;
  }

  .lk-nav-actions {
    gap: 8px;
  }

  .lk-footer {
    margin: 24px 0;
  }

  .lk-footer-menu {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lk-footer-legal {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .lk-hide-on-mobile {
    display: none;
  }

  .lk-mobile-only {
    display: flex;
  }

  .lk-nav-hamburger {
    display: flex;
  }

  .lk-table-scroll {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    padding-left: 16px;
    padding-right: 0;
  }

  .lk-table-scroll .lk-comparison-table {
    margin-right: 16px;
  }
}

/* ================================
   Responsive: Small mobile (≤479px)
   Exact match of LaunchKit mobile.css
   ================================ */
@media screen and (max-width: 479px) {
  .lk-page {
    padding: 0 16px;
  }

  .lk-footer-menu {
    grid-template-columns: 1fr;
  }
}