:root {
  --color-primary: #1B6E72;
  --color-bg: #F8F6F2;
  --color-accent: #C45C3A;
  --color-text: #2C2C2C;
  --color-secondary: #6E6E6E;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --font-base: 'Inter', system-ui, sans-serif;
  --scale-sm: 0.8rem;
  --scale-base: 1rem;
  --scale-md: 1.25rem;
  --scale-lg: 1.563rem;
  --scale-xl: 1.953rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-base); font-size: var(--scale-base); line-height: 1.6; background: var(--color-bg); color: var(--color-text); }

/* Layout */
.layout {
  display: flex;
  gap: var(--space-4);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

.category-nav { display: none; }
@media (min-width: 768px) {
  .category-nav {
    display: block;
    width: 180px;
    flex-shrink: 0;
    position: sticky;
    top: 60px;
    align-self: flex-start;
    font-size: var(--scale-sm);
  }
  .category-nav ul { list-style: none; }
  .category-nav a { color: var(--color-primary); text-decoration: none; line-height: 2; }
  .category-nav a:hover { text-decoration: underline; }
}

.checklist { flex: 1; min-width: 0; }

/* Site header */
.site-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  padding-top: calc(36px + var(--space-4));
}
.site-header__title { font-size: var(--scale-xl); font-weight: 600; color: var(--color-primary); }
.site-header__sub { font-size: var(--scale-base); color: var(--color-secondary); margin-top: var(--space-1); }

/* Progress bar */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 36px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex; align-items: center; padding: 0 var(--space-3);
}
.progress-bar__fill-track {
  flex: 1; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; margin-right: var(--space-3);
}
.progress-bar__fill {
  height: 4px; width: 0%; background: var(--color-primary);
  transition: width 300ms ease-out; border-radius: 2px;
}
.progress-bar__label { font-size: var(--scale-sm); color: var(--color-secondary); white-space: nowrap; }

/* Category sections */
.category { margin-bottom: var(--space-5); }
.category__header {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; text-align: left;
}
.category__header h2 { font-size: var(--scale-md); font-weight: 600; flex: 1; }
.category__count { font-size: var(--scale-sm); color: var(--color-secondary); }
.category__chevron::after { content: '▾'; font-size: var(--scale-sm); transition: transform 200ms; display: inline-block; }
.category__header[aria-expanded="false"] .category__chevron::after { transform: rotate(-90deg); }
.category__body { padding-top: var(--space-2); }
.category__body[hidden] { display: none; }

@media (min-width: 768px) {
  .category__header { cursor: default; }
  .category__chevron { display: none; }
  .category__body { display: block !important; }
}

/* Step cards */
.step {
  padding: var(--space-3) 0;
  border-bottom: 1px solid #e8e8e8;
}
.step:last-child { border-bottom: none; }

.step__check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.step__check input[type="checkbox"] {
  margin-top: 4px; flex-shrink: 0;
  width: 18px; height: 18px; accent-color: var(--color-primary);
}
.step__title { font-weight: 600; font-size: var(--scale-base); flex: 1; }
.step__summary { margin-top: var(--space-1); font-size: var(--scale-base); color: var(--color-secondary); }
.step__detail { margin-top: var(--space-1); font-size: var(--scale-base); }
.step__detail a { color: var(--color-primary); }

/* Checked step: fade title */
.step__check input:checked + .step__title { color: var(--color-secondary); text-decoration: line-through; }

/* Buttons */
.btn {
  display: inline-block; padding: var(--space-2) var(--space-3);
  border-radius: 6px; font-weight: 600; text-decoration: none;
  font-size: var(--scale-base); cursor: pointer; border: none;
}
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { opacity: 0.9; }
.btn--sm { font-size: var(--scale-sm); padding: var(--space-1) var(--space-2); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Upsell sidebar content spacing */
.upsell-sidebar__count { font-size: var(--scale-sm); color: var(--color-secondary); margin-bottom: var(--space-2); }
.upsell-sidebar__social { font-size: var(--scale-sm); color: var(--color-secondary); margin-top: var(--space-2); }
.upsell-bar__count { font-size: var(--scale-sm); color: var(--color-secondary); }

/* Premium step badge */
.step__badge {
  background: var(--color-accent); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  align-self: flex-start; margin-left: var(--space-2);
}

/* Inline upsell CTA */
.step__cta { margin-top: var(--space-1); font-size: var(--scale-sm); }
.upsell-link { color: var(--color-accent); }
.upsell-link:hover { text-decoration: underline; }

/* Sticky mobile bottom bar */
.upsell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-2) var(--space-3);
  background: #fff;
  border-top: 1px solid #e0e0e0;
  z-index: 100;
}
@media (min-width: 768px) { .upsell-bar { display: none; } }

/* Desktop right sidebar */
.upsell-sidebar { display: none; }
@media (min-width: 768px) {
  .upsell-sidebar {
    display: block;
    position: sticky;
    top: 60px;
    width: 220px;
    flex-shrink: 0;
    padding: var(--space-3);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
  }
}