:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-accent: #ff4444; /* High contrast red for accents */
  --color-accent-hover: #ff6666;
  --color-focus: #ffffff;
  --color-nav-bg: #111111;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --line-height: 1.6;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-accent);
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

p, ul, ol {
  margin-bottom: 1rem;
}

p {
  max-width: 70ch; /* Sensible line lengths */
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-accent-hover);
}

/* Focus Styles for Accessibility */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: var(--color-text);
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
}

/* Header & Navigation */
.site-header {
  background-color: var(--color-nav-bg);
  padding: 1rem;
  border-bottom: 2px solid var(--color-accent);
}

.site-header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

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

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.main-nav a {
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
}

.main-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Main Content Area */
.site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  min-height: calc(100vh - 160px);
}

/* Sections */
section {
  margin-bottom: 4rem;
}

/* Buttons */
.btn {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-bg); /* Use dark text on red bg if needed, or white. Black on red is very high contrast. Let's stick to white if it's #ff4444. Actually #000 is 6.5:1. Let's use white text with darker red or just white text for better look. #ffffff on #ff4444 is 3.2:1 (fails WCAG AA for normal text, passes for large). Let's make button text white but background darker red, or button text black. I'll use black for the button text for guaranteed contrast. */
  color: var(--color-bg); 
  font-weight: bold;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  border: 2px solid var(--color-accent);
  transition: all 0.2s;
}

.btn:hover {
  background-color: transparent;
  color: var(--color-accent);
}

/* Layout Grid for Pricing etc. */
.grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Pricing Card Placeholder */
.pricing-card {
  border: 1px solid #333;
  padding: 2rem;
  border-radius: 8px;
  background-color: #0a0a0a;
}

.pricing-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.price {
  font-size: 2rem;
  color: var(--color-accent);
  font-weight: bold;
  margin-bottom: 1rem;
}

.pricing-card ul {
  list-style: none;
  margin-bottom: 2rem;
}

.pricing-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #222;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--color-nav-bg);
  border-top: 1px solid #333;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive adjustments */
@media (max-width: 375px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .main-nav ul { gap: 1rem; }
}

/* Logo styles */
.header-logo {
  max-width: 100%;
  height: auto;
  max-height: 50px;
  display: block;
}

@media (max-width: 375px) {
  .header-logo {
    max-height: 40px;
  }
}

/* Feature Checklist */
.feature-checklist-section {
  padding: 2rem 0;
}

.feature-checklist {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .feature-checklist {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.feature-checklist li {
  background-color: #0a0a0a;
  border-top: 4px solid var(--color-accent);
  padding: 1.5rem;
  border-radius: 4px;
}

.feature-checklist h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--color-text);
}

.feature-checklist p {
  margin-bottom: 0;
  color: #dddddd;
}

/* Specific Section Adjustments */
.everybody-section {
  background-color: #0a0a0a;
  padding: 2rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-accent);
}

/* Buttons */
.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-right {
  text-align: right;
}

/* Pricing Regions */
.region-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .region-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.region-card {
  border-top: 4px solid var(--color-accent);
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.pricing-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #222;
  font-size: 1.1rem;
}

/* Pricing Table */
.table-container {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.pricing-table th, .pricing-table td {
  padding: 1rem;
  border-bottom: 1px solid #333;
  text-align: left;
}

.pricing-table th.text-right, .pricing-table td.text-right {
  text-align: right;
}

.pricing-table th {
  color: var(--color-accent);
  font-size: 1.2rem;
  border-bottom: 2px solid var(--color-accent);
}

.base-row {
  background-color: rgba(255, 68, 68, 0.1);
}

/* Callouts */
.callout {
  background-color: #0a0a0a;
  border-left: 4px solid #444;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.callout h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.callout-accent {
  border-left-color: var(--color-accent);
  background-color: #111;
}

/* CTA Section */
.cta-section {
  text-align: center;
  margin-top: 4rem;
  padding: 3rem 1rem;
  background-color: #0a0a0a;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cta-section p {
  margin: 0 auto 1.5rem auto;
}

/* How-To Page Styles */
.process-steps {
  list-style: none;
  counter-reset: step-counter;
  margin: 0;
  padding: 0;
}

.process-steps > li {
  position: relative;
  margin-bottom: 4rem;
  background-color: #0a0a0a;
  border-radius: 8px;
  border: 1px solid #222;
  border-top: 4px solid var(--color-accent);
  padding: 2rem;
}

.process-steps > li > h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.process-steps > li > h2::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  background-color: var(--color-accent);
  color: var(--color-bg);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  flex-shrink: 0;
}

.guide-content-wrapper {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .guide-content-wrapper {
    grid-template-columns: 3fr 2fr;
  }
}

.guide-text-content {
  /* Ensure readable line lengths within grid */
}

/* Future Video Placeholder Design */
.video-area-placeholder {
  background-color: #111;
  border: 2px dashed #333;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  text-align: center;
  min-height: 200px;
}

.video-status-msg {
  color: #aaa;
  font-style: italic;
  font-size: 0.95rem;
}

.video-future-meta {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.sub-step {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #222;
}

.sub-step h3 {
  color: #ddd;
}

.feature-guides-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .feature-guides-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-guide-card {
  background-color: #0a0a0a;
  border-left: 4px solid var(--color-accent);
  padding: 1.5rem;
}