@layer blocks {

  /* Page Hero */
  .vwc-PageHero {
    background: linear-gradient(135deg, var(--vwc-navy-base) 0%, var(--vwc-navy-deep) 100%);
    padding: 4rem 1rem 3rem;
    text-align: center;
    border-bottom: 2px solid var(--vwc-accent-primary);
  }

  .vwc-PageHero h1 {
    font-size: var(--text-4xl);
    margin-block-end: 1rem;
    color: var(--vwc-white);
  }

  .vwc-PageHero--features {
    background: linear-gradient(135deg, var(--vwc-green-deep) 0%, var(--vwc-navy-deep) 100%);
  }

  /* Content Section */
  .vwc-ContentSection {
    padding: 4rem 1rem;
    background: var(--vwc-bg-primary);
  }

  /* Callout Boxes */
  .vwc-CalloutBox {
    background: var(--vwc-bg-elevated);
    border: 2px solid var(--vwc-border-default);
    border-radius: var(--radius);
    padding: 2rem;
    margin-block: 2rem;
  }

  .vwc-CalloutBox h2,
  .vwc-CalloutBox h3 {
    color: var(--vwc-accent-primary);
    margin-block-end: 1rem;
  }

  .vwc-CalloutBox p {
    margin-block: 1rem;
  }

  .vwc-CalloutBox--primary {
    border-color: var(--vwc-accent-primary);
    background: linear-gradient(135deg, var(--vwc-navy-base) 0%, var(--vwc-bg-elevated) 100%);
  }

  .vwc-CalloutBox--secondary {
    border-color: var(--vwc-gray-mid);
  }

  .vwc-CalloutBox--important {
    border-color: var(--vwc-warning);
    background: linear-gradient(135deg, oklch(0.25 0.05 85) 0%, var(--vwc-bg-elevated) 100%);
  }

  /* Info Boxes */
  .vwc-InfoBoxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-block: 2rem;
  }

  .vwc-InfoBox {
    background: var(--vwc-bg-elevated);
    border: 2px solid var(--vwc-border-default);
    border-radius: var(--radius);
    padding: 2rem;
  }

  .vwc-InfoBox h3 {
    color: var(--vwc-accent-primary);
    margin-block-end: 1rem;
  }

  .vwc-InfoBox ul {
    list-style: none;
    padding: 0;
  }

  .vwc-InfoBox ul li {
    padding: 0.5rem 0;
    padding-inline-start: 1.5rem;
    position: relative;
  }

  .vwc-InfoBox ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--vwc-accent-primary);
    font-weight: 700;
  }

  .vwc-InfoBox--success {
    border-color: var(--vwc-success);
  }

  .vwc-InfoBox--warning {
    border-color: var(--vwc-warning);
  }

  /* Contact Details */
  .vwc-ContactDetails {
    background: var(--vwc-bg-elevated);
    border-radius: var(--radius);
    padding: 2rem;
    margin-block: 2rem;
  }

  .vwc-ContactDetails address {
    font-style: normal;
    line-height: 1.8;
  }

  .vwc-ContactDetails a {
    color: var(--vwc-accent-primary);
    text-decoration: none;
  }

  .vwc-ContactDetails a:hover {
    text-decoration: underline;
  }

  /* Help Box */
  .vwc-HelpBox {
    background: var(--vwc-bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-block: 1.5rem;
  }

  .vwc-HelpBox h3 {
    font-size: var(--text-lg);
    margin-block-end: 1rem;
  }

  /* Contact List */
  .vwc-ContactList {
    list-style: none;
    padding: 0;
  }

  .vwc-ContactList li {
    padding: 0.5rem 0;
  }

  .vwc-ContactList a {
    color: var(--vwc-accent-primary);
    text-decoration: none;
  }

  .vwc-ContactList a:hover {
    text-decoration: underline;
  }

  /* Lists */
  .vwc-PrinciplesList,
  .vwc-SafetyList,
  .vwc-TipsList {
    list-style: none;
    padding: 0;
    margin-block: 1.5rem;
  }

  .vwc-PrinciplesList li,
  .vwc-SafetyList li,
  .vwc-TipsList li {
    padding: 0.75rem 0;
    font-size: var(--text-lg);
  }

  .vwc-FeatureList {
    list-style: none;
    padding: 0;
    margin-block: 1.5rem;
  }

  .vwc-FeatureList li {
    padding: 0.5rem 0;
    padding-inline-start: 2rem;
    position: relative;
  }

  .vwc-FeatureList li::before {
    content: attr(data-icon);
    position: absolute;
    left: 0;
  }
}