:root {
  /* Color Tokens */
  --saw-bg-start: #F3E7FB;
  --saw-bg-end: #FDE9F2;
  --saw-bg-gradient: linear-gradient(135deg, var(--saw-bg-start) 0%, var(--saw-bg-end) 100%);
  --saw-card-bg: #FFFFFF;
  --saw-card-border: #E7D6F5;
  --saw-text-primary: #3B2557;
  --saw-text-secondary: #6B5A83;
  --saw-accent-1: #FF4D79;
  --saw-accent-1-text: #FFFFFF;
  --saw-accent-2: #4FB6E6;
  --saw-accent-2-text: #FFFFFF;
  --saw-hero-bg: linear-gradient(135deg, #EBD7F7 0%, #F9D6E5 100%);
  --saw-cta-final-bg: linear-gradient(135deg, #DFBEF3 0%, #F5B8D3 100%);
  --saw-shadow-color: rgba(59, 37, 87, 0.08);
  --saw-shadow-sm: 0 4px 12px var(--saw-shadow-color);
  --saw-shadow-md: 0 8px 24px var(--saw-shadow-color);
  --saw-shadow-lg: 0 16px 32px var(--saw-shadow-color);
  --saw-focus-outline: #3B2557;

  /* Typography Tokens */
  --saw-font-heading: 'Charm', cursive, sans-serif;
  --saw-font-body: 'Mali', cursive, sans-serif;
  --saw-h1-size: 38px;
  --saw-h2-size: 26px;
  --saw-h3-size: 21px;
  --saw-body-size: 16px;
  --saw-heading-lh: 1.35;
  --saw-body-lh: 1.7;

  /* Spacing Tokens (Multiples of 10/20/30/40/60 & 16px Mobile Outer Margin) */
  --saw-space-10: 10px;
  --saw-space-20: 20px;
  --saw-space-30: 30px;
  --saw-space-40: 40px;
  --saw-space-60: 60px;
  --saw-space-mobile: 16px;

  /* Layout & Radii Tokens */
  --saw-max-width: 1200px;
  --saw-radius-card: 18px;
  --saw-radius-btn: 999px;
  --saw-rail-width: 60px;
  --saw-rail-width-hover: 220px;

  /* Motion Tokens (Strictly 220ms, ease-in-out, opacity/transform/box-shadow only) */
  --saw-transition-duration: 220ms;
  --saw-transition-timing: ease-in-out;
}

/* Base Resets & Global Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--saw-bg-gradient);
  background-attachment: fixed;
  color: var(--saw-text-primary);
  font-family: var(--saw-font-body);
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
}

img, svg {
  max-width: 100%;
  height: auto;
}

.saw-container {
  width: 100%;
  max-width: var(--saw-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--saw-space-20);
  padding-right: var(--saw-space-20);
}

.saw-main-wrapper {
  margin-left: var(--saw-rail-width);
  min-height: 100vh;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

/* 1. Header Section (Icon Rail with Hover Label) */
.saw-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--saw-rail-width);
  background: var(--saw-card-bg);
  border-right: 1px solid var(--saw-card-border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--saw-space-20);
  padding-bottom: var(--saw-space-20);
  box-shadow: var(--saw-shadow-sm);
  overflow: hidden;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-header:hover,
.saw-header:focus-within {
  width: var(--saw-rail-width-hover);
  box-shadow: var(--saw-shadow-lg);
}

.saw-header-logo {
  display: flex;
  align-items: center;
  gap: var(--saw-space-10);
  padding-left: var(--saw-space-10);
  padding-right: var(--saw-space-10);
  margin-bottom: var(--saw-space-40);
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  color: var(--saw-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.saw-header-nav {
  display: flex;
  flex-direction: column;
  gap: var(--saw-space-10);
  width: 100%;
}

.saw-header-item {
  display: flex;
  align-items: center;
  gap: var(--saw-space-20);
  padding: var(--saw-space-10) var(--saw-space-20);
  color: var(--saw-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--saw-radius-card);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-header-item:hover,
.saw-header-item:focus-visible {
  color: var(--saw-text-primary);
  transform: translateX(4px);
  outline: 2px solid var(--saw-focus-outline);
}

.saw-header-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saw-header-label {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-header:hover .saw-header-label,
.saw-header:focus-within .saw-header-label {
  opacity: 1;
  transform: translateX(0);
}

/* 2. Hero Section */
.saw-hero {
  padding-top: var(--saw-space-60);
  padding-bottom: var(--saw-space-60);
  padding-left: var(--saw-space-30);
  padding-right: var(--saw-space-30);
  margin-top: var(--saw-space-20);
  margin-bottom: var(--saw-space-40);
  background: var(--saw-hero-bg);
  border-radius: var(--saw-radius-card);
  border: 1px solid var(--saw-card-border);
  box-shadow: var(--saw-shadow-md);
  text-align: center;
}

.saw-hero-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h1-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-20);
}

.saw-hero-subtitle {
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--saw-space-30);
}

.saw-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--saw-space-20);
}

.saw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--saw-space-10) var(--saw-space-30);
  background-color: var(--saw-accent-1);
  color: var(--saw-accent-1-text);
  font-family: var(--saw-font-body);
  font-size: var(--saw-body-size);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--saw-radius-btn);
  border: none;
  cursor: pointer;
  box-shadow: var(--saw-shadow-sm);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-btn-primary:hover,
.saw-btn-primary:focus-visible {
  color: var(--saw-accent-1-text);
  transform: translateY(-2px);
  box-shadow: var(--saw-shadow-md);
  outline: 2px solid var(--saw-focus-outline);
}

.saw-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--saw-space-10) var(--saw-space-30);
  background-color: var(--saw-card-bg);
  color: var(--saw-text-primary);
  font-family: var(--saw-font-body);
  font-size: var(--saw-body-size);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--saw-radius-btn);
  border: 1px solid var(--saw-card-border);
  cursor: pointer;
  box-shadow: var(--saw-shadow-sm);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-btn-secondary:hover,
.saw-btn-secondary:focus-visible {
  color: var(--saw-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--saw-shadow-md);
  outline: 2px solid var(--saw-focus-outline);
}

/* 3. Provider Bento Grid Section */
.saw-provider-bento {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-provider-bento-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-30);
  text-align: center;
}

.saw-provider-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--saw-space-20);
}

.saw-bento-card {
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  padding: var(--saw-space-30);
  box-shadow: var(--saw-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--saw-shadow-lg);
}

.saw-bento-card-featured {
  grid-column: span 8;
  grid-row: span 2;
}

.saw-bento-card-medium {
  grid-column: span 4;
}

.saw-bento-card-small {
  grid-column: span 4;
}

.saw-bento-card-wide {
  grid-column: span 6;
}

.saw-bento-card-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-10);
}

.saw-bento-card-desc {
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
  margin-bottom: var(--saw-space-20);
}

/* 4. Camp Compare Section */
.saw-camp-compare {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-camp-compare-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-30);
  text-align: center;
}

.saw-camp-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--saw-space-20);
}

.saw-compare-card {
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  padding: var(--saw-space-30);
  box-shadow: var(--saw-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-compare-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--saw-shadow-md);
}

.saw-compare-badge {
  display: inline-block;
  padding: var(--saw-space-10) var(--saw-space-20);
  background-color: var(--saw-accent-2);
  color: var(--saw-accent-2-text);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--saw-radius-btn);
  margin-bottom: var(--saw-space-20);
}

/* 5. Game Grid Section */
.saw-game-grid {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-game-grid-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-30);
  text-align: center;
}

.saw-game-grid-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--saw-space-20);
}

.saw-game-card {
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  overflow: hidden;
  box-shadow: var(--saw-shadow-sm);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--saw-shadow-md);
}

.saw-game-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--saw-card-border);
  overflow: hidden;
}

.saw-game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saw-game-info {
  padding: var(--saw-space-20);
  text-align: center;
}

.saw-game-name {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  color: var(--saw-text-primary);
  margin: 0;
}

/* 6. Longform Article Section */
.saw-longform {
  margin-top: var(--saw-space-60);
  margin-bottom: var(--saw-space-60);
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  padding: var(--saw-space-40);
  box-shadow: var(--saw-shadow-sm);
}

.saw-longform-article {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.saw-longform-h2 {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-20);
}

.saw-longform-h3 {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: var(--saw-space-30);
  margin-bottom: var(--saw-space-10);
}

.saw-longform-p {
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
  margin-top: 0;
  margin-bottom: var(--saw-space-20);
}

.saw-longform a {
  color: var(--saw-accent-1);
  text-decoration: underline;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-longform a:hover {
  opacity: 0.8;
}

/* 7. RTP Note Section (Conceptual Callout Only) */
.saw-rtp-note {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-rtp-note-box {
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-left: 6px solid var(--saw-accent-2);
  border-radius: var(--saw-radius-card);
  padding: var(--saw-space-30);
  box-shadow: var(--saw-shadow-sm);
}

.saw-rtp-note-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-10);
}

.saw-rtp-note-desc {
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
  margin: 0;
}

/* 8. FAQ Section (Accordion Details/Summary Pure HTML) */
.saw-faq {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-faq-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h2-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-30);
  text-align: center;
}

.saw-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--saw-space-20);
}

.saw-faq__item {
  background: var(--saw-card-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  box-shadow: var(--saw-shadow-sm);
  overflow: hidden;
}

.saw-faq__summary {
  padding: var(--saw-space-20) var(--saw-space-30);
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.saw-faq__summary::-webkit-details-marker {
  display: none;
}

.saw-faq__summary:hover,
.saw-faq__summary:focus-visible {
  outline: 2px solid var(--saw-focus-outline);
}

.saw-faq__content {
  padding: 0 var(--saw-space-30) var(--saw-space-20) var(--saw-space-30);
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
}

/* 9. Final CTA Banner Section */
.saw-cta-final {
  margin-top: var(--saw-space-60);
  margin-bottom: var(--saw-space-60);
}

.saw-cta-final-banner {
  background: var(--saw-cta-final-bg);
  border: 1px solid var(--saw-card-border);
  border-radius: var(--saw-radius-card);
  padding: var(--saw-space-60) var(--saw-space-30);
  text-align: center;
  box-shadow: var(--saw-shadow-md);
}

.saw-cta-final-title {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h1-size);
  line-height: var(--saw-heading-lh);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-20);
}

.saw-cta-final-desc {
  font-size: var(--saw-body-size);
  line-height: var(--saw-body-lh);
  color: var(--saw-text-secondary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--saw-space-30);
}

/* 10. Trust Row Section */
.saw-trust-row {
  margin-top: var(--saw-space-40);
  margin-bottom: var(--saw-space-60);
  padding-top: var(--saw-space-20);
  padding-bottom: var(--saw-space-20);
  border-top: 1px solid var(--saw-card-border);
  border-bottom: 1px solid var(--saw-card-border);
}

.saw-trust-row-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--saw-space-40);
  list-style: none;
  margin: 0;
  padding: 0;
}

.saw-trust-item {
  opacity: 0.75;
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-trust-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.saw-trust-link {
  color: var(--saw-text-secondary);
  text-decoration: none;
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
}

/* 11. Multi-column Footer Section */
.saw-footer {
  background: var(--saw-card-bg);
  border-top: 1px solid var(--saw-card-border);
  padding-top: var(--saw-space-60);
  padding-bottom: var(--saw-space-40);
  margin-top: var(--saw-space-60);
}

.saw-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--saw-space-40);
  margin-bottom: var(--saw-space-40);
}

.saw-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--saw-space-10);
}

.saw-footer-heading {
  font-family: var(--saw-font-heading);
  font-size: var(--saw-h3-size);
  color: var(--saw-text-primary);
  margin-top: 0;
  margin-bottom: var(--saw-space-10);
}

.saw-footer-link {
  color: var(--saw-text-secondary);
  text-decoration: none;
  font-size: var(--saw-body-size);
  transition: opacity var(--saw-transition-duration) var(--saw-transition-timing),
              transform var(--saw-transition-duration) var(--saw-transition-timing),
              box-shadow var(--saw-transition-duration) var(--saw-transition-timing);
}

.saw-footer-link:hover,
.saw-footer-link:focus-visible {
  color: var(--saw-text-primary);
  transform: translateX(2px);
  outline: 2px solid var(--saw-focus-outline);
}

.saw-footer-copy {
  text-align: center;
  padding-top: var(--saw-space-30);
  border-top: 1px solid var(--saw-card-border);
  color: var(--saw-text-secondary);
  font-size: 14px;
}

/* Responsive Styles for 390px Mobile & Small Screens */
@media (max-width: 768px) {
  .saw-main-wrapper {
    margin-left: 0;
    margin-bottom: var(--saw-rail-width);
    padding-left: var(--saw-space-mobile);
    padding-right: var(--saw-space-mobile);
  }

  .saw-container {
    padding-left: 0;
    padding-right: 0;
  }

  .saw-header {
    top: auto;
    bottom: 0;
    width: 100%;
    height: var(--saw-rail-width);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-top: 0;
    padding-bottom: 0;
    border-right: none;
    border-top: 1px solid var(--saw-card-border);
  }

  .saw-header:hover,
  .saw-header:focus-within {
    width: 100%;
  }

  .saw-header-logo {
    display: none;
  }

  .saw-header-nav {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
  }

  .saw-header-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--saw-space-10) 4px;
  }

  .saw-header-label {
    display: block;
    opacity: 1;
    transform: none;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
  }

  .saw-hero-actions {
    flex-direction: column;
    gap: var(--saw-space-10);
  }

  .saw-btn-primary,
  .saw-btn-secondary {
    width: 100%;
  }

  .saw-provider-bento-grid {
    grid-template-columns: 1fr;
  }

  .saw-bento-card-featured,
  .saw-bento-card-medium,
  .saw-bento-card-small,
  .saw-bento-card-wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  .saw-camp-compare-grid {
    grid-template-columns: 1fr;
  }

  .saw-game-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--saw-space-10);
  }

  .saw-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--saw-space-20);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}