/* ==========================================================================
   Home Automation Cookbook Stylesheet
   Consolidated and optimized CSS with CSS custom properties
   ========================================================================== */

/* CSS Custom Properties (Variables)
   ========================================================================== */

:root {
  /* Color scheme hint for browser UI */
  color-scheme: light dark;

  /* Text colors */
  --color-text: #1a1a1a;
  --color-text-heading: #000;
  --color-text-secondary: #666;
  --color-text-tertiary: #555;
  --color-text-muted: #999;

  /* Link colors */
  --color-link: #2c3e50;
  --color-link-hover: #1a252f;

  /* Background colors */
  --color-bg: #fff;
  --color-bg-page: #fff;
  --color-bg-subtle: #fafafa;
  --color-bg-muted: #f8f9fa;
  --color-bg-inset: #f5f5f5;
  --color-bg-elevated: #fff;
  --color-bg-code-block: #1a1a1a;

  /* Border colors */
  --color-border: #e0e0e0;
  --color-border-muted: #d0d0d0;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgb(44 62 80 / 8%);
  --shadow-md: 0 4px 16px rgb(44 62 80 / 8%);
  --shadow-lg: 0 4px 20px rgb(44 62 80 / 8%);
  --shadow-dropdown: 0 4px 16px rgb(0 0 0 / 10%);

  /* Code colors */
  --color-code-bg: #f5f5f5;
  --color-code-text: #e83e8c;
  --color-code-block-text: #f5f5f5;

  /* Info box colors */
  --color-info-bg: #fff3cd;
  --color-info-border: #ffc107;

  /* Getting started box colors */
  --color-cta-box-bg-start: #f0f7ff;
  --color-cta-box-bg-end: #e6f2ff;
  --color-cta-box-border: #cce5ff;
  --color-cta-box-text: #333;

  /* Hero gradient */
  --color-hero-bg-start: #f8f9fa;
  --color-hero-bg-end: #fff;

  /* Button colors */
  --color-btn-primary-bg: #2c3e50;
  --color-btn-primary-text: #fff;
  --color-btn-primary-hover-bg: #1a252f;
  --color-btn-secondary-text: #2c3e50;
  --color-btn-secondary-border: #d0d0d0;
  --color-btn-secondary-hover-bg: #f8f9fa;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    /* Text colors */
    --color-text: #e0e0e0;
    --color-text-heading: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary: #a0a0a0;
    --color-text-muted: #888;

    /* Link colors */
    --color-link: #7a9ab8;
    --color-link-hover: #9bb8d4;

    /* Background colors */
    --color-bg: #1a1a1a;
    --color-bg-page: #1a1a1a;
    --color-bg-subtle: #242424;
    --color-bg-muted: #242424;
    --color-bg-inset: #2a2a2a;
    --color-bg-elevated: #242424;
    --color-bg-code-block: #1a1a1a;

    /* Border colors */
    --color-border: #3a3a3a;
    --color-border-muted: #4a4a4a;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgb(122 154 184 / 8%);
    --shadow-md: 0 4px 16px rgb(122 154 184 / 10%);
    --shadow-lg: 0 4px 20px rgb(122 154 184 / 10%);
    --shadow-dropdown: 0 4px 16px rgb(0 0 0 / 30%);

    /* Code colors */
    --color-code-bg: #2a2a2a;
    --color-code-text: #f0a0c0;
    --color-code-block-text: #f5f5f5;

    /* Info box colors */
    --color-info-bg: #3d3520;
    --color-info-border: #b8860b;

    /* Getting started box colors */
    --color-cta-box-bg-start: #1e2a35;
    --color-cta-box-bg-end: #1a252f;
    --color-cta-box-border: #3a5a7a;
    --color-cta-box-text: #c0c0c0;

    /* Hero gradient */
    --color-hero-bg-start: #242424;
    --color-hero-bg-end: #1a1a1a;

    /* Button colors */
    --color-btn-primary-bg: #7a9ab8;
    --color-btn-primary-text: #1a1a1a;
    --color-btn-primary-hover-bg: #9bb8d4;
    --color-btn-secondary-text: #7a9ab8;
    --color-btn-secondary-border: #4a4a4a;
    --color-btn-secondary-hover-bg: #2a2a2a;
  }
}

/* Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Skip to main content link for accessibility */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.main-content {
  min-height: calc(100vh - 150px);
}


/* Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 3rem 0 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
}

h1 {
  margin: 0 0 2rem;
  font-size: 2.2rem;
}

h2 {
  margin-top: 4rem;
  font-size: 2rem;
}

h3 {
  margin-top: 2.5rem;
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-border);
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

hr {
  margin: 4rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}


/* Links
   ========================================================================== */

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* Lists
   ========================================================================== */

ul, ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  line-height: 1.8;
}

ul {
  list-style-type: none;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: 0.75rem;
}

ul ul, ol ul, ul ol, ol ol {
  margin: 0.75rem 0 0.5rem;
}

/* Code
   ========================================================================== */

code {
  padding: 0.2rem 0.5rem;
  background: var(--color-code-bg);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-code-text);
}

pre {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-bg-code-block);
  border-radius: 8px;
  overflow-x: auto;
  color: var(--color-code-block-text);
  line-height: 1.6;
}

pre code {
  padding: 0;
  background: none;
  font-weight: 400;
  color: inherit;
}

/* Tables
   ========================================================================== */

table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
}

th, td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  background: var(--color-bg-subtle);
  font-weight: 600;
  color: var(--color-text-heading);
}

/* Navigation
   ========================================================================== */

.main-navigation {
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.site-title {
  color: var(--color-text-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  padding: 1.25rem 0 1.25rem 60px;
  display: inline-block;
  letter-spacing: -0.01em;
  background: url(/assets/img/icon-48x48.png) no-repeat left center;
}

.site-title:hover {
  color: var(--color-link);
}

.nav-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.nav-toggle {
  display: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-heading);
  margin: 5px 0;
  transition: 0.3s;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
  position: relative;
  top: 8px;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 1.25rem 1rem;
  display: block;
  transition: color 0.2s;
  font-size: 0.95rem;
}

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

.dropdown-arrow {
  margin-left: 0.25rem;
  font-size: 0.8em;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg-page);
  min-width: 220px;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  box-shadow: var(--shadow-dropdown);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-item {
  margin: 0;
  position: relative;
}

.dropdown-item a {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  display: block;
  transition: background 0.2s, color 0.2s;
  font-size: 0.95rem;
}

.dropdown-item a:hover {
  background: var(--color-bg-inset);
  color: var(--color-link);
}

.flyout-arrow {
  float: right;
  margin-left: 0.5rem;
  font-size: 0.9em;
}

.flyout-menu {
  display: none;
  position: absolute;
  top: 0;
  right: auto;
  background: var(--color-bg-page);
  min-width: 240px;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  box-shadow: var(--shadow-dropdown);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  z-index: 1001;
}

/* Default: flyout on the right */
@media (min-width: 769px) {
  .flyout-menu {
    left: 100%;
  }
}

/* On smaller screens or when dropdown is on right side, show flyout on left */
@media (max-width: 768px) {
  .flyout-menu {
    left: auto;
    right: 100%;
  }
  
  .flyout-arrow {
    transform: rotate(180deg);
  }
}

/* Flip flyout to left side when it would overflow (for larger screens) */
.flyout-menu.flyout-left {
  left: auto;
  right: 100%;
}

.dropdown-item.has-flyout:hover .flyout-menu,
.dropdown-item.has-flyout:focus-within .flyout-menu {
  display: block;
}

/* Flip arrow direction when flyout is on the left */
.dropdown-item.has-flyout:has(.flyout-menu.flyout-left) .flyout-arrow {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.flyout-item {
  margin: 0;
}

.flyout-item a {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  display: block;
  transition: background 0.2s, color 0.2s;
  font-size: 0.9rem;
}

.flyout-item a:hover {
  background: var(--color-bg-inset);
  color: var(--color-link);
}

.breadcrumb {
  padding: 1rem 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.breadcrumb a {
  color: var(--color-link);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-link-hover);
}

.breadcrumb span {
  color: var(--color-text-muted);
  margin: 0 0.5rem;
}


/* Card Components
   ========================================================================== */

/* Shared utility classes for consistent styling */
.card-base {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.card-base:hover:is(a, .card-hover) {
  border-color: var(--color-link);
  box-shadow: var(--shadow-lg);
}

.card-padding-lg { padding: 2rem; }
.card-padding-md { padding: 1.75rem; }
.card-padding-sm { padding: 1.5rem; }

/* Shared grid layouts - use custom properties for flexibility */
.grid-cards {
  display: grid;
  gap: 2rem;
  margin: 3rem 0;
}

.grid-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Apply base styles to card components */
.automation-card,
.planning-card,
.device-starter-card,
.featured-card,
.category-card,
.platform-option,
.principle-card,
.community-link,
.use-case-card,
.platform-card,
.feature-card,
.placement-card,
.best-practice-card,
.tip-card,
.philosophy-card,
.platform-detail-card,
.resource-category {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

/* Hover effects for interactive cards */
a.featured-card:hover,
a.category-card:hover,
a.community-link:hover,
.tip-card:hover,
.philosophy-card:hover,
.platform-detail-card:hover {
  border-color: var(--color-link);
  box-shadow: var(--shadow-lg);
}

.automation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

/* Automation card specific styles */
.automation-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Shared card heading styles */
.automation-card :is(h3, h4),
.use-case-card h4,
.feature-card h3,
.placement-card h3,
.best-practice-card h3 {
  margin-block: 0 1rem;
  color: var(--color-text-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.automation-card :is(h3, h4) a {
  color: inherit;
  text-decoration: none;
}

.automation-card :is(h3, h4) a:hover {
  color: var(--color-link);
}

.automation-card p {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.7;
  font-size: 0.95rem;
}

.automation-card p:last-child {
  margin-block: auto 0;
}

.card-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  display: block;
}

.card-link {
  display: inline-block;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.card-link:hover {
  color: var(--color-link-hover);
}

.category-intro {
  background: var(--color-bg-subtle);
  padding: 2rem;
  margin-bottom: 3rem;
  border-radius: 8px;
}

.category-intro h2 {
  margin-top: 0;
  color: var(--color-text-heading);
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.category-intro p {
  margin-bottom: 1rem;
  line-height: 1.7;
  max-width: none;
  display: flex;
  gap: 1rem;
}

.category-intro p strong {
  color: var(--color-text-heading);
  font-weight: 600;
  flex: 0 0 220px;
}

.category-intro ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.category-intro li {
  margin-bottom: 1rem;
  line-height: 1.7;
  padding-left: 0;
}

.section-heading {
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

.page-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  gap: 1rem;
}

.page-navigation a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.page-navigation a:hover {
  color: var(--color-link-hover);
}

/* Article meta section (share button + last updated) */
.article-meta {
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  /*width: 100%;*/
  /*clear: both;*/
}

.article-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.2s ease;
    float: right;
}

.article-share-btn:hover {
  color: var(--color-link);
}

.article-share-btn:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.article-share-btn .share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-share-btn .share-icon svg {
  width: 16px;
  height: 16px;
}

.article-share-btn .share-text {
  font-weight: 500;
  float:right;
}

.last-updated-inline {
  color: var(--color-text-muted);  
}

.last-updated p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Automation Components
   ========================================================================== */

.automation-step {
  margin: 2.5rem 0 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--color-bg-muted);
  border-left: 4px solid var(--color-text-heading);
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

.automation-example {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-code-block);
  border-radius: 8px;
  color: var(--color-code-block-text);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.95em;
  line-height: 1.6;
  white-space: pre-wrap;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.use-case-card {
  padding: 1.75rem;
}

/* Shared heading with bottom border */
.use-case-card h4,
.feature-card h3,
.placement-card h3,
.best-practice-card h3 {
  font-size: 1.15rem;
  color: var(--color-link);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

/* Shared bullet list styles */
.use-case-card ul,
.feature-card ul,
.placement-card ul,
.best-practice-card ul,
.info-box ul,
.issue-solutions ul,
.highlight-section ul,
.tip-section ul,
.philosophy-section ul {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  font-size: 0.95rem;
}

.use-case-card li,
.feature-card li,
.placement-card li,
.info-box li,
.issue-solutions li,
.benefit-item,
.checklist-item {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  padding-inline-start: 1.25rem;
  position: relative;
}

/* Shared bullet point styling */
.use-case-card li::before,
.feature-card li::before,
.placement-card li::before,
.info-box li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-link);
  font-weight: bold;
}

.use-case-card li:last-child,
.feature-card li:last-child,
.placement-card li:last-child {
  margin-bottom: 0;
}

.product-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

.product-section h4 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--color-text-heading);
}

.product-list {
  margin: 1rem 0;
}

.product-item {
  margin-bottom: 1.25rem;
}

.product-item strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text-heading);
  font-size: 1.05rem;
}

.product-details {
  padding-left: 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--color-text-tertiary);
}

.info-box {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-info-bg);
  border-left: 4px solid var(--color-info-border);
  border-radius: 6px;
}

.info-box strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-text-heading);
  font-size: 1.05rem;
}

.info-box ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.info-box li {
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}

.info-box li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-text-heading);
  font-weight: bold;
}

.setup-steps {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.tip-card .setup-steps {
  padding: 1.5rem 2rem;
  margin: 0;
}

.setup-steps h3 {
  margin: 0 0 1.5rem;
  font-size: 1.2rem;
  color: var(--color-text-heading);
}

.setup-step {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
}

.setup-step:last-child {
  margin-bottom: 0;
}

.setup-step h4 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--color-text-heading);
}

.setup-step p {
  margin: 0;
  line-height: 1.6;
}

.setup-step strong {
  font-weight: 600;
  color: var(--color-text-heading);
}

.setup-step ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  list-style: none;
}

.setup-step li {
  margin-bottom: 0.5rem;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.platform-card {
  padding: 1.5rem;
}

/* Shared card header with logo and title */
.platform-card-header,
.platform-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

.platform-card-header img,
.platform-detail-header img {
  block-size: 28px;
  inline-size: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.platform-detail-header img {
  block-size: 48px;
  inline-size: 48px;
}

.platform-card-header h4,
.platform-card h4 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--color-text-heading);
  line-height: 1.2;
}

.platform-card-header h4 {
  margin-bottom: 0;
}

.platform-card ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 0.95rem;
}

.platform-card li {
  margin-bottom: 0.5rem;
}

/* Platform step components for improved visual flow */
.platform-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.platform-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.875rem 1rem;
  background: var(--color-bg-muted);
  border-radius: 6px;
  border-left: 3px solid var(--color-link);
}

.step-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-link);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.step-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
}

.platform-step-variant {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.step-variant {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.step-variant strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

.platform-note {
  padding: 0.75rem 1rem;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-border);
}

/* Advanced Features Section
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  padding: 1.75rem;
}

.feature-card p {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* Brightness schedule display */
.brightness-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.brightness-item {
  display: grid;
  grid-template-columns: 120px 60px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--color-bg-muted);
  border-radius: 6px;
  border-left: 3px solid var(--color-link);
}

.time-badge {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
}

.brightness-level {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-link);
  text-align: center;
}

.brightness-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Troubleshooting Section
   ========================================================================== */

.troubleshooting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.issue-card {
  background: var(--color-bg-elevated);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.issue-header {
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-muted);
  border-bottom: 2px solid var(--color-border);
}

.issue-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-heading);
  font-weight: 600;
}

.issue-problem {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.issue-problem strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

.issue-solutions {
  padding: 1.25rem 1.5rem;
}

.issue-solutions strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-text-heading);
  font-weight: 600;
}

.issue-solutions ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.issue-solutions li {
  margin-bottom: 0.65rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
  font-size: 0.95rem;
}

.issue-solutions li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: bold;
  font-size: 1.1em;
}

.issue-solutions li:last-child {
  margin-bottom: 0;
}

/* Placement Best Practices Section
   ========================================================================== */

.placement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.placement-card {
  padding: 1.5rem;
}

.placement-card h3 {
  font-size: 1.1rem;
}

.placement-card li {
  font-size: 0.95rem;
}

/* Best practice card with numbered steps */
.best-practice-card {
  padding: 1.75rem;
  margin: 2rem 0;
}

.best-practice-card h3 {
  margin-bottom: 1.25rem;
}

.best-practice-card ol {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: practice-counter;
}

.best-practice-card li {
  margin-bottom: 0.875rem;
  padding-inline-start: 2.5rem;
  position: relative;
  line-height: 1.6;
  font-size: 0.95rem;
  counter-increment: practice-counter;
}

.best-practice-card li::before {
  content: counter(practice-counter);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  background: var(--color-link);
  color: var(--color-bg-elevated);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.best-practice-card li:last-child {
  margin-bottom: 0;
}

/* Warning card */
.warning-card {
  padding: 1.75rem;
  background: #fef3c7;
  border-radius: 12px;
  border: 2px solid #f59e0b;
  margin: 2rem 0;
}

.warning-card h3 {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  color: #dc2626;
  font-weight: 600;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f59e0b;
}

.warning-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.warning-card li {
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
  position: relative;
  line-height: 1.6;
  font-size: 0.95rem;
}

.warning-card li::before {
  content: '\2717';
  position: absolute;
  left: 0;
  color: #dc2626;
  font-weight: bold;
  font-size: 1.2em;
}

.warning-card li:last-child {
  margin-bottom: 0;
}

.warning-card strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* Dark mode warning card */
@media (prefers-color-scheme: dark) {
  .warning-card {
    background: #3d3520;
    border-color: #b8860b;
  }
  
  .warning-card h3 {
    color: #f87171;
    border-bottom-color: #b8860b;
  }
  
  .warning-card li::before {
    color: #f87171;
  }
  
  .warning-card strong {
    color: #f0f0f0;
  }
}

/* Footer
   ========================================================================== */

.site-footer {
  margin-top: 4rem;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
}

.site-footer .container {
  padding: 0 2rem;
}

.footer-copyright {
  margin: 0 auto 0.75rem;
  font-size: 0.875rem;
  max-width: none;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-link);
}

/* Homepage Components
   ========================================================================== */

/* Shared vertical card grids for detail pages */
.tips-grid,
.philosophy-grid,
.resources-grid,
.platform-comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 3rem 0;
}

.platform-comparison-grid {
  gap: 2.5rem;
}

/* Shared card container styles */
.tip-card,
.philosophy-card,
.platform-detail-card,
.resource-category {
  overflow: hidden;
}

/* Shared card headers with consistent styling */
.tip-header,
.philosophy-header,
.platform-detail-header,
.resource-category-header {
  padding: 2rem;
  background: var(--color-bg-muted);
  border-bottom: 2px solid var(--color-border);
}

.resource-category-header {
  padding: 1.5rem 2rem;
}

.tip-header,
.philosophy-header,
.platform-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Shared icon styles */
.tip-icon,
.philosophy-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Shared heading styles within card headers */
:is(.tip-header, .philosophy-header, .resource-category-header) h2 {
  margin: 0;
  color: var(--color-text-heading);
}

.tip-header h2,
.philosophy-header h2 {
  font-size: 1.6rem;
}

.resource-category-header h2 {
  font-size: 1.5rem;
}

.platform-detail-header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  color: var(--color-text-heading);
}

/* Shared intro/description sections */
.tip-intro,
.philosophy-intro {
  padding: 1.5rem 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

/* Shared section styles */
.tip-section,
.philosophy-section {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.tip-section:last-child,
.philosophy-section:last-child {
  border-bottom: none;
}

/* Shared section heading styles */
:is(.tip-section, .philosophy-section, .setup-steps, .philosophy-checklist) h3 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  color: var(--color-text-heading);
}

.setup-steps h3 {
  margin-bottom: 1.5rem;
}

/* Shared paragraph styles within sections */
:is(.tip-section, .philosophy-section) p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

:is(.tip-section, .philosophy-section) p:last-child {
  margin-bottom: 0;
}

:is(.tip-section, .philosophy-section) ul {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.5rem;
}

:is(.tip-section, .philosophy-section) li {
  margin-bottom: 0.5rem;
}

/* Subscription examples */
.subscription-examples,
.status-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.subscription-examples {
  gap: 1rem;
}

.subscription-item,
.status-category {
  padding: 1.25rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.subscription-item {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.subscription-item strong,
.status-category strong {
  color: var(--color-text-heading);
  font-size: 1rem;
}

.status-category strong {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.subscription-item span {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.status-category ul {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 0.9rem;
}

.status-category li {
  margin-bottom: 0.5rem;
}

/* Benefits section and checklist items */
.tip-benefits,
.philosophy-checklist {
  padding: 2rem;
}

.tip-benefits {
  background: var(--color-bg-subtle);
  padding: 1.5rem 2rem;
}

.philosophy-checklist {
  background: var(--color-bg-muted);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  line-height: 1.6;
}

.benefit-item:not(:last-child) {
  margin-bottom: 0.75rem;
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  line-height: 1.6;
}

/* Shared icon styles for benefits/checklist */
.benefit-icon,
.checklist-icon,
.reason-icon {
  color: #16a34a;
  font-weight: bold;
  font-size: 1.2em;
  flex-shrink: 0;
}

.checklist-icon {
  font-size: 1.3em;
  line-height: 1;
}

/* Requirements and implementation sections */
.tip-requirements,
.tip-implementation {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.tip-requirements {
  background: var(--color-bg-muted);
}

.tip-requirements ul {
  margin: 0;
  padding-inline-start: 1.5rem;
}

.implementation-flow {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.flow-step {
  display: grid;
  grid-template-columns: 2fr auto 3fr;
  gap: 1rem;
  align-items: center;
}

.flow-trigger {
  padding: 1rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-text-heading);
}

.flow-arrow {
  font-size: 1.5rem;
  color: var(--color-link);
  font-weight: bold;
}

.flow-action {
  padding: 1rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* Example scenario and pattern sections */
.example-scenario,
.pattern-example {
  padding: 1.5rem 2rem;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.scenario-steps,
.pattern-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scenario-step,
.pattern-reason {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.pattern-reason {
  padding: 0.75rem;
  border-radius: 6px;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  background: var(--color-link);
  color: var(--color-bg-elevated);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Comparison section */
.comparison-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

.comparison-column {
  padding: 1.5rem 2rem;
}

.comparison-column:first-child {
  border-inline-end: 1px solid var(--color-border);
}

.comparison-column h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.comparison-bad h3 {
  color: #dc2626;
}

.comparison-good h3 {
  color: #16a34a;
}

.comparison-column ul {
  margin: 0;
  padding-inline-start: 1.5rem;
}

.comparison-column li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Implementation tips and pattern ideas */
.implementation-tips,
.pattern-ideas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.implementation-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.tip-subsection,
.pattern-idea {
  padding: 1.25rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

:is(.tip-subsection, .pattern-idea) :is(h4, strong) {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--color-text-heading);
}

.pattern-idea strong {
  display: block;
  font-size: 1.05rem;
}

:is(.tip-subsection, .pattern-idea) p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Philosophy page styles */

.philosophy-example,
.philosophy-fix,
.philosophy-takeaway {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.philosophy-example {
  background: var(--color-bg-muted);
}

.philosophy-fix {
  background: var(--color-bg-subtle);
}

.philosophy-takeaway {
  background: var(--color-info-bg);
}

.philosophy-example h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--color-text-heading);
  font-style: italic;
}

.philosophy-fix h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: #16a34a;
  font-weight: 600;
}

:is(.philosophy-example, .philosophy-fix) p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

:is(.philosophy-example, .philosophy-fix) p:last-child {
  margin-bottom: 0;
}

.philosophy-takeaway strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text-heading);
  font-size: 1rem;
}

.philosophy-takeaway p {
  margin: 0;
  line-height: 1.7;
}

/* Pyramid visualization */
.pyramid-container {
  padding: 2rem;
  background: var(--color-bg-subtle);
}

.pyramid-level {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 2px solid var(--color-border);
}

.pyramid-level:last-child {
  margin-bottom: 0;
}

.pyramid-level h3 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  color: var(--color-text-heading);
}

.pyramid-level p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

.pyramid-level ul {
  margin: 0.5rem 0 0;
  padding-left: 1.5rem;
}

.pyramid-level li {
  margin-bottom: 0.5rem;
}

.pyramid-requirement {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-elevated);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

/* Pyramid level colors */
.pyramid-level-1 {
  background: #dcfce7;
  border-color: #16a34a;
}

.pyramid-level-2 {
  background: #dbeafe;
  border-color: #2563eb;
}

.pyramid-level-3 {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* Dark mode pyramid colors */
@media (prefers-color-scheme: dark) {
  .pyramid-level-1 {
    background: #1a3d26;
  }
  
  .pyramid-level-2 {
    background: #1e3a5f;
    border-color: #3b82f6;
  }
  
  .pyramid-level-3 {
    background: #3d3520;
  }
}

/* Checklist section */

/* Removed - consolidated above with benefit-item styles */

/* Resources page styles */

/* Removed - consolidated above with other card styles */

.resource-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.resource-item {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s ease;
}

.resource-item:last-child {
  border-bottom: none;
}

.resource-item:hover {
  background: var(--color-bg-subtle);
}

.resource-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.resource-item h3 a {
  color: var(--color-link);
  text-decoration: none;
}

.resource-item h3 a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.resource-description {
  margin: 0.75rem 0 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.resource-tag {
  padding: 0.25rem 0.75rem;
  background: var(--color-bg-muted);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.resource-highlights {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.95rem;
}

.resource-highlights li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
  color: var(--color-text);
}

.resource-subitems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.resource-subitem {
  padding: 1rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.resource-subitem strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-text-heading);
  font-size: 1rem;
}

.resource-subitem a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
}

.resource-subitem a:hover {
  text-decoration: underline;
}

.resource-subitem p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.resource-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.resource-link-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.resource-link-item::before {
  content: '→';
  color: var(--color-link);
  font-weight: bold;
}

.resource-link-item a {
  color: var(--color-link);
  text-decoration: none;
}

.resource-link-item a:hover {
  text-decoration: underline;
}

/* Platform comparison page styles */

/* Removed - consolidated above with other card styles */

.platform-detail-header img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.platform-tagline {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.platform-description {
  padding: 1.5rem 2rem;
  line-height: 1.7;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.platform-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.highlight-section {
  padding: 1.5rem 2rem;
}

.highlight-section:first-child {
  border-right: 1px solid var(--color-border);
}

.highlight-section h4 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.highlight-pros h4 {
  color: #16a34a;
}

.highlight-cons h4 {
  color: #ea580c;
}

.highlight-section ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.highlight-section li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
  font-size: 0.95rem;
}

.highlight-section li:last-child {
  margin-bottom: 0;
}

.highlight-pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: bold;
  font-size: 1.1em;
}

.highlight-cons li::before {
  content: '△';
  position: absolute;
  left: 0;
  color: #ea580c;
  font-weight: bold;
  font-size: 1.1em;
}

.platform-quickstart {
  padding: 1.5rem 2rem;
  background: var(--color-bg-subtle);
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
}

.platform-quickstart strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

.planning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0 3rem;
}

.planning-card {
  padding: 2rem;
  background: var(--color-bg-muted);
}

.planning-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.planning-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: var(--color-text-heading);
}

.planning-card > p {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* Shared list styles for planning/device cards */
:is(.planning-card, .requirement-content) ul {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.planning-card li {
  margin-bottom: 0.5rem;
  padding-inline-start: 1.25rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
}

.planning-card li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-link);
  font-weight: bold;
}

.device-starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}

.device-starter-card {
  padding: 1.5rem;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  text-align: center;
}

.device-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.device-starter-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--color-text-heading);
}

.device-starter-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.network-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}

.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.requirement-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.requirement-content {
  flex: 1;
}

.requirement-content strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text-heading);
  font-size: 1rem;
  font-weight: 600;
}

.requirement-content p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.platform-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.platform-logo {
  height: 32px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.platform-logo:hover {
  opacity: 1;
}

.platform-logo-large {
  height: 48px;
  width: auto;
  margin-bottom: 1rem;
}

.platform-compatibility {
  text-align: center;
  padding: 1.5rem;
  background: var(--color-bg-muted);
  border-radius: 8px;
  margin: 2rem 0;
}

.platform-compatibility p {
  margin: 0 0 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.platform-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.platform-option {
  padding: 2rem;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  text-align: center;
}

.platform-option h4 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  color: var(--color-text-heading);
}

.platform-option p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.6;
}

.platform-option p strong {
  color: var(--color-text-heading);
}

.hero {
  text-align: center;
  padding: 6rem 2rem 5rem;
  margin-bottom: 5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(44, 62, 80, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: 3.5rem;
  margin: 0 0 1.5rem;
  color: var(--color-text-heading);
  line-height: 1.15;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 1.35rem;
  color: var(--color-text-secondary);
  margin: 0 auto 2rem;
  max-width: 650px;
  line-height: 1.65;
  font-weight: 400;
}

.hero-benefits {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 3.5rem auto 3.5rem;
  max-width: 700px;
  text-align: left;
  padding: 2.5rem 2rem;
  background: var(--color-bg-subtle);
  border-radius: 16px;
  border: 1px solid var(--color-border);
}

.benefit {
  display: flex;
  align-items: start;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

.benefit-icon {
  font-size: 2.25rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.benefit strong {
  color: var(--color-text-heading);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  display: block;
  margin-bottom: 0.25rem;
}

.benefit-text {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.cta-primary, .cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.2s ease;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cta-primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.15);
}

.cta-primary:hover {
  background: var(--color-btn-primary-hover-bg);
  color: var(--color-btn-primary-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 62, 80, 0.2);
}

.cta-secondary {
  background: var(--color-bg-elevated);
  color: var(--color-btn-secondary-text);
  border: 2px solid var(--color-border);
}

.cta-secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-link);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.1);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.principle-card {
  padding: 2rem;
  background: var(--color-bg-muted);
}

.principle-card h3 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: var(--color-text-heading);
}

.principle-card p {
  margin: 0;
  color: var(--color-text-tertiary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.featured-automations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.featured-card {
  display: block;
  padding: 2rem;
  text-decoration: none;
}

.featured-card h3 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: var(--color-text-heading);
}

.featured-card p {
  margin: 0 0 1.5rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.card-arrow {
  display: inline-block;
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.95rem;
}

.featured-card:hover .card-arrow {
  color: var(--color-link-hover);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.category-card {
  display: block;
  padding: 1.5rem;
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.category-card:hover {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}

.category-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--color-text-heading);
}

.category-card p {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.category-count {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.getting-started-box {
  margin: 5rem 0 4rem;
  padding: 3rem;
  background: linear-gradient(135deg, var(--color-cta-box-bg-start) 0%, var(--color-cta-box-bg-end) 100%);
  border-radius: 12px;
  text-align: center;
  border: 2px solid var(--color-cta-box-border);
}

.getting-started-box h2 {
  margin: 0 0 1rem;
  color: var(--color-text-heading);
}

.getting-started-box p {
  margin: 0 auto 2rem;
  max-width: 600px;
  color: var(--color-cta-box-text);
  font-size: 1.05rem;
}

.community-section {
  margin: 4rem 0;
  text-align: center;
}

.community-section h2 {
  margin: 0 0 1rem;
}

.community-section > p {
  margin: 0 auto 2.5rem;
  max-width: 600px;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.community-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.community-link {
  display: block;
  padding: 2rem 1.5rem;
  background: var(--color-bg-muted);
  text-decoration: none;
}

.community-link:hover {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

.community-link strong {
  display: block;
  color: var(--color-text-heading);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.community-link span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* Favorites Feature
   ========================================================================== */

/* Title wrapper for favorite button */
.title-with-favorite {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.title-with-favorite h1 {
  flex: 1;
  min-width: 0;
}

/* Favorite button */
.favorite-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-top: 0.25rem;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.favorite-btn:hover {
  border-color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

.favorite-btn:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.favorite-btn:active {
  transform: scale(0.95);
}

/* Heart icon */
.favorite-heart {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
}

/* Outlined heart (not favorited) - using Unicode heart character */
.favorite-heart::before {
  content: '♡';
  font-size: 24px;
  line-height: 1;
  color: #e74c3c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  clip-path: none;
}

/* Solid heart (favorited) */
.favorite-btn.is-favorited .favorite-heart::before {
  content: '♥';
  color: #e74c3c;
}

.favorite-btn.is-favorited {
  border-color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

/* Navigation favorite indicator */
.nav-menu a.is-favorited::after,
.dropdown-menu a.is-favorited::after,
.flyout-menu a.is-favorited::after {
  content: '♥';
  color: #e74c3c;
  margin-left: 0.5rem;
  font-size: 0.85em;
}

/* Ensure heart doesn't interfere with dropdown arrows */
.nav-link.is-favorited .dropdown-arrow,
.dropdown-item a.is-favorited .flyout-arrow {
  margin-left: 0.25rem;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .hero::before {
    background: radial-gradient(ellipse at center, rgba(122, 154, 184, 0.04) 0%, transparent 70%);
  }
  
  .cta-primary {
    box-shadow: 0 4px 12px rgba(122, 154, 184, 0.15);
  }
  
  .cta-primary:hover {
    box-shadow: 0 6px 16px rgba(122, 154, 184, 0.2);
  }
  
  .cta-secondary:hover {
    box-shadow: 0 4px 12px rgba(122, 154, 184, 0.1);
  }
  
  .favorite-btn {
    border-color: var(--color-border);
  }
  
  .favorite-btn:hover {
    border-color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.15);
  }
  
  .favorite-btn.is-favorited {
    border-color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.15);
  }
}

/* Mobile adjustments */
@media (max-width: 868px) {
  .title-with-favorite {
    gap: 0.5rem;
  }
  
  .favorite-btn {
    width: 40px;
    height: 40px;
  }
  
  .favorite-heart::before {
    font-size: 20px;
  }
}

/* Responsive Design
   ========================================================================== */

@media (max-width: 900px) {
    body {
        font-size: 16px;
    }

    .container {
        padding: 2rem 1.5rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
        margin-top: 3rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Hero mobile */
    .hero {
        padding: 3.5rem 1.5rem 2.5rem;
        margin-bottom: 3.5rem;
    }
    
    .hero::before {
        height: 120px;
    }

    .hero h1 {
        font-size: 2rem;
        letter-spacing: -0.02em;
        margin-bottom: 1.25rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.75rem;
    }

    .hero-benefits {
        gap: 1.25rem;
        padding: 1.75rem 1.5rem;
        margin: 2.5rem auto 2.5rem;
        border-radius: 12px;
    }

    .benefit {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 0;
    }

    .benefit-icon {
        font-size: 2rem;
        margin-top: 0.15rem;
    }
    
    .benefit > div {
        flex: 1;
    }

    .benefit strong {
        display: block;
        white-space: normal;
        margin-bottom: 0.35rem;
        font-size: 1rem;
    }

    .benefit-text {
        display: block;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .hero-cta {
        flex-direction: column;
        gap: 0.875rem;
        margin-top: 2.5rem;
    }

    .cta-primary, .cta-secondary {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }

    .featured-automations {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .getting-started-box {
        padding: 2rem 1.5rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        border-radius: 0;
    }

    .community-links {
        grid-template-columns: 1fr;
    }

    /* Getting started page mobile */
    .planning-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Platform comparison mobile */
    .platform-detail-header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

        .platform-detail-header img {
            block-size: 40px;
            inline-size: 40px;
        }

        .platform-detail-header h3 {
            font-size: 1.3rem;
        }

    :is(.platform-description, .highlight-section, .platform-quickstart, .resource-category-header, .resource-item) {
        padding: 1.25rem 1.5rem;
    }

    .platform-highlights {
        grid-template-columns: 1fr;
    }

    .highlight-section:first-child {
        border-inline-end: none;
        border-bottom: 1px solid var(--color-border);
    }

    /* Shared padding adjustments for card headers and sections */
    :is(.tip-header, .philosophy-header) {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .tip-icon,
    .philosophy-icon {
        font-size: 2rem;
    }

    :is(.tip-header, .philosophy-header) h2 {
        font-size: 1.4rem;
    }

    /* Consolidated padding for all card sections */
    :is(.tip-intro, .philosophy-intro, .tip-section, .philosophy-section, .philosophy-example, .philosophy-fix, .philosophy-takeaway, .tip-benefits, .tip-requirements, .tip-implementation, .example-scenario, .pattern-example, .comparison-column) {
        padding: 1.25rem 1.5rem;
    }

    .subscription-examples,
    .status-examples,
    .implementation-tips,
    .resource-subitems {
        grid-template-columns: 1fr;
    }

    .comparison-section {
        grid-template-columns: 1fr;
    }

    .comparison-column:first-child {
        border-inline-end: none;
        border-bottom: 1px solid var(--color-border);
    }

    .flow-step {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .flow-arrow {
        text-align: center;
        transform: rotate(90deg);
    }

    :is(.pyramid-container, .philosophy-checklist) {
        padding: 1.5rem;
    }

    .pyramid-level {
        padding: 1.25rem;
    }

    .device-starter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .network-requirements,
    .platform-selection {
        grid-template-columns: 1fr;
    }

    .network-requirements {
        gap: 1rem;
    }

    /* Navigation mobile */
    .nav-container {
        align-items: center;
    }

    .site-title {
        order: 1;
        flex: 1;
    }

    .nav-toggle {
        display: block;
        order: 3;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-page);
        padding: 1rem 0;
        box-shadow: var(--shadow-dropdown);
        border-bottom: 1px solid var(--color-border);
        order: 2;
        width: 100%;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-container:has(.nav-toggle-checkbox:checked) .nav-menu {
        display: flex;
    }

    .nav-item {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        background: var(--color-bg-subtle);
        border: none;
    }

    .nav-item.has-dropdown:focus-within .dropdown-menu {
        display: block;
    }

    .nav-link {
        padding: 0.75rem 1.25rem;
        color: var(--color-text);
    }

    .dropdown-item a {
        padding-left: 2.5rem;
        color: var(--color-text-secondary);
    }

    .flyout-menu {
        position: static;
        display: none;
        box-shadow: none;
        background: var(--color-bg-inset);
        border: none;
    }

    .dropdown-item.has-flyout:focus-within .flyout-menu {
        display: block;
    }

    .flyout-item a {
        padding-left: 3.75rem;
        font-size: 0.9em;
        color: var(--color-text-secondary);
    }

    .flyout-arrow {
        float: right;
    }

    /* Cards mobile */
    .automation-cards {
        grid-template-columns: 1fr;
    }

    .page-navigation {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}