/* ==========================================================================
   Shoelace Learning - Responsive Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktops (1536px and above)
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) {
  .container {
    padding: 0 var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Desktops (1280px - 1535px)
   -------------------------------------------------------------------------- */
@media (max-width: 1535px) {
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Small Laptops (1024px - 1279px)
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  
  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }
  
  .pricing-grid {
    gap: var(--space-4);
  }
  
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pricing-card-tournament {
    grid-column: span 2;
  }
  
  .pricing-card-featured {
    transform: scale(1.02);
  }
}

/* --------------------------------------------------------------------------
   Tablets and Small Laptops (768px - 1279px)
   Mobile navigation triggers at this breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Typography adjustments */
  h1 {
    font-size: var(--text-4xl);
  }
  
  h2 {
    font-size: var(--text-3xl);
  }
  
  h3 {
    font-size: var(--text-2xl);
  }
  
  /* Navigation */
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  
  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .nav-link {
    width: 100%;
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-base);
  }
  
  .nav-cta {
    margin-left: 0;
    margin-top: var(--space-4);
    width: 100%;
  }
  
  .nav-cta .btn {
    width: 100%;
  }
  
  /* Navigation Actions - Mobile */
  .nav-actions {
    margin-left: 0;
    margin-top: var(--space-4);
    width: 100%;
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .nav-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .nav-toggle {
    display: flex;
  }
  
  /* Mobile dropdown navigation */
  .nav-dropdown {
    width: 100%;
  }
  
  .nav-dropdown-trigger {
    width: 100%;
    padding: var(--space-4);
    justify-content: center;
    font-size: var(--text-base);
  }
  
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0;
    padding-top: var(--space-2);
    min-width: auto;
    background: var(--off-white);
    border-radius: 0.5rem;
    margin-top: var(--space-2);
  }
  
  .nav-dropdown.active .nav-dropdown-menu {
    display: block;
  }
  
  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }
  
  .nav-dropdown.active .nav-dropdown-menu {
    display: block;
  }
  
  .dropdown-item {
    justify-content: center;
    text-align: center;
  }
  
  .dropdown-text {
    align-items: center;
  }
  
  /* Legal page TOC mobile */
  .legal-toc ul {
    columns: 1;
  }
  
  /* Hero adjustments */
  .hero {
    padding: var(--space-16) 0;
  }
  
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-lg);
  }
  
  /* Grid adjustments */
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .pricing-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .pricing-card-tournament {
    grid-column: span 1;
    order: -1;
  }
  
  .pricing-card-featured {
    transform: none;
    order: -1;
  }
  
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-header,
  .comparison-row {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  
  .cta-split {
    grid-template-columns: 1fr;
  }
  
  .journey-stages {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  
  .journey-line {
    display: none;
  }
  
  /* Section spacing */
  .section {
    padding: var(--space-16) 0;
  }
  
  .section-lg {
    padding: var(--space-20) 0;
  }
  
  /* Stats */
  .hero-stat-number {
    font-size: 5rem;
  }
  
  /* Blockquotes */
  .lightning-quote {
    padding: var(--space-8);
  }
  
  .lightning-quote-text {
    font-size: var(--text-xl);
  }
}

/* --------------------------------------------------------------------------
   Small Tablets (640px - 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Typography */
  h1 {
    font-size: var(--text-3xl);
  }
  
  h2 {
    font-size: var(--text-2xl);
  }
  
  h3 {
    font-size: var(--text-xl);
  }
  
  .section-title {
    font-size: var(--text-3xl);
  }
  
  /* Grids go single column */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .tier-grid {
    grid-template-columns: 1fr;
  }

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

  .package-card-featured {
    order: -1;
  }

  .comparison-header,
  .comparison-row {
    grid-template-columns: 1.2fr 1fr 1fr;
    font-size: var(--text-xs);
  }

  .comparison-row .comparison-feature-name,
  .comparison-value {
    padding: var(--space-2) var(--space-3);
  }

  .guarantee-card {
    padding: var(--space-6);
  }
  
  .journey-stages {
    grid-template-columns: 1fr;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .footer-brand {
    grid-column: 1;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-legal {
    justify-content: center;
  }
  
  /* Cards */
  .card {
    padding: var(--space-6);
  }
  
  .stat-number {
    font-size: var(--text-4xl);
  }
  
  /* Hero */
  .hero {
    padding: var(--space-12) 0;
  }
  
  .hero-title {
    font-size: var(--text-3xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-base);
  }
  
  .hero-ctas {
    flex-direction: column;
  }
  
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Stats */
  .hero-stat-number {
    font-size: 4rem;
  }
  
  /* Testimonials */
  .testimonial {
    padding: var(--space-6);
  }
  
  .testimonial-quote {
    font-size: var(--text-base);
  }
  
  /* Blockquotes */
  .blockquote {
    padding: var(--space-6);
  }
  
  .blockquote-text {
    font-size: var(--text-lg);
  }
  
  .lightning-quote {
    padding: var(--space-6);
  }
  
  .lightning-quote-text {
    font-size: var(--text-lg);
  }
  
  /* Guarantee box */
  .guarantee-box {
    padding: var(--space-8);
  }
  
  .guarantee-title {
    font-size: var(--text-xl);
  }
  
  .guarantee-text {
    font-size: var(--text-base);
  }
  
  /* CTA sections */
  .cta-split-item {
    padding: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Mobile (below 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Container */
  .container {
    padding: 0 var(--space-4);
  }
  
  /* Typography */
  h1 {
    font-size: var(--text-2xl);
  }
  
  h2 {
    font-size: var(--text-xl);
  }
  
  .section-title {
    font-size: var(--text-2xl);
  }
  
  .section-subtitle {
    font-size: var(--text-base);
  }
  
  /* Section spacing */
  .section {
    padding: var(--space-12) 0;
  }
  
  .section-sm {
    padding: var(--space-8) 0;
  }
  
  .section-lg {
    padding: var(--space-16) 0;
  }
  
  /* Hero */
  .hero {
    padding: var(--space-10) 0;
  }
  
  .hero-title {
    font-size: var(--text-2xl);
  }
  
  /* Navigation */
  .nav-container {
    padding: 0 var(--space-4);
  }
  
  .nav-logo-text {
    font-size: var(--text-lg);
  }
  
  /* Buttons */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--text-sm);
  }
  
  .btn-lg {
    padding: 0.875rem 2rem;
    font-size: var(--text-base);
  }
  
  /* Stats */
  .hero-stat-number {
    font-size: 3rem;
  }
  
  .stat-number {
    font-size: var(--text-3xl);
  }
  
  /* Cards */
  .card {
    padding: var(--space-5);
  }
  
  .stage-card {
    padding: var(--space-5);
  }
  
  .tier-card {
    padding: var(--space-5);
  }

  .package-card {
    padding: var(--space-6);
  }

  .package-name {
    font-size: var(--text-xl);
  }

  .guarantee-card {
    padding: var(--space-5);
  }

  .guarantee-card-title {
    font-size: var(--text-lg);
  }

  .comparison-header,
  .comparison-row {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .comparison-header {
    display: none;
  }

  .comparison-row {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .comparison-row .comparison-feature-name {
    padding: 0;
    font-weight: var(--font-semibold);
  }

  .comparison-value {
    padding: 0;
    text-align: left;
    font-size: var(--text-sm);
  }

  .comparison-value::before {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--medium-gray);
  }

  .comparison-value:nth-child(2)::before {
    content: "Engagement: ";
  }

  .comparison-value:nth-child(3)::before {
    content: "Acceleration: ";
  }

  .comparison-value.comparison-col-featured {
    background: none;
  }

  .comparison-row-gap {
    background: rgba(244, 132, 95, 0.04);
    border-left: 3px solid var(--shoelace-coral);
  }

  .comparison-row-gap .comparison-value:not(.comparison-col-featured) {
    background: none;
  }

  .comparison-row-gap .comparison-col-featured {
    background: none;
  }

  /* Pricing */
  .pricing-card {
    padding: var(--space-6);
  }
  
  .pricing-price {
    font-size: var(--text-3xl);
  }
  
  /* Footer */
  .footer {
    padding: var(--space-12) 0 var(--space-6);
  }
  
  .footer-social {
    justify-content: center;
  }
  
  /* Feature items */
  .feature-icon {
    width: 56px;
    height: 56px;
  }
  
  .feature-icon svg {
    width: 28px;
    height: 28px;
  }
  
  /* Blockquotes */
  .blockquote {
    padding: var(--space-5);
  }
  
  .blockquote-text {
    font-size: var(--text-base);
  }
  
  .lightning-quote {
    padding: var(--space-5);
  }
  
  .lightning-quote-text {
    font-size: var(--text-base);
  }
  
  /* Forms */
  .form-input,
  .form-textarea,
  .form-select {
    padding: var(--space-3);
  }
  
  .radio-card {
    padding: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Utility: Hide/Show at breakpoints
   -------------------------------------------------------------------------- */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Scroll reveal - elements start hidden */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Tournament Page Responsive Styles
   -------------------------------------------------------------------------- */

/* Tablets and Small Laptops */
@media (max-width: 1279px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .insight-cards {
    grid-template-columns: 1fr;
  }
  
  .timeline {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .timeline-item::after {
    content: '↓';
    top: auto;
    bottom: -1.25rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  
  .partner-types {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dual-cta {
    grid-template-columns: 1fr;
  }
  
  .stat-comparison {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .tournament-highlight .stats-row {
    gap: 2rem;
  }
}

/* Small Tablets and Mobile */
@media (max-width: 767px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .hero-stats-grid .hero-stat {
    padding: var(--space-5);
  }
  
  .hero-stats-grid .hero-stat-number {
    font-size: var(--text-3xl);
  }
  
  .partner-types {
    grid-template-columns: 1fr;
  }
  
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  
  .tournament-highlight .stats-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .quote-callout {
    padding: var(--space-6);
  }
  
  .quote-callout blockquote {
    font-size: var(--text-lg);
  }
  
  .featured-quote-box {
    padding: var(--space-6);
  }
  
  .featured-quote-box blockquote {
    font-size: var(--text-lg);
  }
  
  .case-study-callout {
    padding: var(--space-6);
  }
  
  .metrics-table-wrapper {
    padding: var(--space-5);
    overflow-x: auto;
  }
  
  .cta-card {
    padding: var(--space-6);
  }
}

/* ==========================================================================
   Enhanced Responsive Styles - New Components
   ========================================================================== */

/* Tablets and Small Laptops - New components */
@media (max-width: 1279px) {
  .stat-circles-row {
    gap: 2rem;
  }
  
  .stat-circle {
    width: 140px;
    height: 140px;
  }
  
  .stat-circle-inner {
    width: 110px;
    height: 110px;
  }
  
  .stat-circle-value {
    font-size: var(--text-3xl);
  }
  
  .game-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-brand {
    grid-column: span 2;
  }
  
  .awards-logos {
    gap: 2rem;
  }
  
  .awards-logo {
    height: 32px;
  }
  
  .stats-grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .integrations-logos {
    gap: 1.5rem;
  }
}

/* Small tablets - New components */
@media (max-width: 768px) {
  .stat-circles-row {
    flex-direction: column;
    gap: 2rem;
  }
  
  .stat-circle {
    width: 160px;
    height: 160px;
  }
  
  .stat-circle-inner {
    width: 130px;
    height: 130px;
  }
  
  .callout-box {
    padding: var(--space-6);
    margin: var(--space-6) var(--space-4);
  }
  
  .callout-title {
    font-size: var(--text-xl);
  }
  
  .awards-logos {
    gap: 1.5rem;
  }
  
  .awards-logo {
    height: 28px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .footer-brand {
    grid-column: span 1;
    text-align: center;
  }
  
  .footer-brand-logo {
    justify-content: center;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  .footer-column {
    text-align: center;
  }
  
  .footer-links {
    align-items: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-legal {
    justify-content: center;
  }
  
  .mission-counter-value {
    font-size: 3rem;
  }
  
  .tabs-nav {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .tab-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
  
  .stats-grid-responsive {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  .stats-grid-responsive .stat-value {
    font-size: var(--text-2xl);
  }
  
  .integrations-logos {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .integration-logo {
    width: 100%;
    justify-content: center;
  }
  
  .app-badges {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .footer-awards {
    justify-content: center;
  }
}

/* Mobile - New components */
@media (max-width: 480px) {
  .awards-section {
    padding: var(--space-8) 0;
  }
  
  .awards-logos {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .awards-logo {
    height: 32px;
  }
  
  .cta-banner {
    padding: var(--space-8) 0;
  }
  
  .cta-banner h2,
  .cta-banner h3 {
    font-size: var(--text-xl);
  }
  
  .stats-grid-responsive {
    grid-template-columns: 1fr 1fr;
  }
  
  .stats-grid-responsive .stat-item {
    padding: var(--space-4);
  }
  
  .stats-grid-responsive .stat-value {
    font-size: var(--text-xl);
  }
  
  .feature-list-item {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  
  .feature-list-icon {
    margin: 0 auto;
  }
}

/* Print styles */
@media print {
  .nav-header,
  .footer,
  .footer-enhanced,
  .btn,
  .cta-banner,
  .awards-section {
    display: none;
  }
  
  .hero,
  .hero-gradient {
    background: none !important;
    color: var(--near-black) !important;
  }
  
  .hero-dark h1,
  .hero-dark h2,
  .hero-gradient h1,
  .hero-gradient h2 {
    color: var(--near-black) !important;
  }
  
  .section-dark-green {
    background: none !important;
    color: var(--near-black) !important;
  }
  
  .section-dark-green h2,
  .section-dark-green h3,
  .section-dark-green p {
    color: var(--near-black) !important;
  }
}

/* ==========================================================================
   Component Cards (Four Components Section) - Responsive Styles
   ========================================================================== */

/* Tablets and Small Laptops */
@media (max-width: 1279px) {
  .components-grid {
    gap: var(--space-8);
  }
  
  .component-category-cards {
    gap: var(--space-6);
  }
  
  .component-card-tech {
    min-height: 240px;
  }
}

/* Small Tablets */
@media (max-width: 767px) {
  .component-category-cards {
    grid-template-columns: 1fr;
  }
  
  .component-number {
    width: 36px;
    height: 36px;
    font-size: var(--text-xs);
  }
  
  .component-card-tech {
    min-height: auto;
    padding: var(--space-6);
    padding-top: calc(var(--space-6) + 20px);
  }
  
  .component-card-tech .component-number {
    top: var(--space-4);
    left: var(--space-4);
  }
  
  .component-card-tech .card-icon {
    width: 56px;
    height: 56px;
  }
  
  .component-card-tech .card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .card-game-bg {
    min-height: 240px;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .component-category-header {
    font-size: var(--text-xs);
  }
  
  .component-number {
    width: 32px;
    height: 32px;
    top: var(--space-3);
    left: var(--space-3);
  }
  
  .component-card.card-game-bg .component-number {
    top: var(--space-3);
    left: var(--space-3);
  }
}

/* ==========================================================================
   Homepage Highlights Responsive Styles
   ========================================================================== */

/* Games Top Bar - Mobile */
@media (max-width: 640px) {
  .games-top-bar {
    padding: 0.625rem 0;
  }
  
  .games-top-bar .container {
    padding: 0 var(--space-4);
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .games-top-bar-announcement {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    text-align: center;
    padding: var(--space-3);
    padding-right: 2.5rem; /* Maintain space for close button on mobile */
  }
  
  .games-top-bar-announcement .announcement-text {
    white-space: normal;
    overflow: visible; /* Allow wrapping on mobile */
    text-overflow: clip;
  }
  
  .games-top-bar-link {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    font-size: var(--text-xs);
  }
  
  .games-top-bar-icon {
    width: 16px;
    height: 16px;
  }
}

/* Announcement Banner - Mobile */
@media (max-width: 640px) {
  .announcement-banner {
    padding: 0.875rem 1rem;
  }
  
  .announcement-banner .container {
    flex-direction: column;
    text-align: center;
    padding-right: 2rem;
  }
  
  .announcement-text {
    display: block;
  }
}

/* Featured Win - Tablet */
@media (max-width: 768px) {
  .featured-win-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .win-stat-number {
    font-size: 1.5rem;
  }
  
  .highlights-grid {
    grid-template-columns: 1fr;
  }
  
  .highlight-stats {
    justify-content: space-around;
  }
}

/* Featured Win - Mobile */
@media (max-width: 480px) {
  .featured-win-card {
    padding: 1.5rem;
  }
  
  .featured-win-stats {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .win-stat-number {
    font-size: 1.25rem;
  }
  
  .featured-win-content h2 {
    font-size: 1.25rem;
  }
  
  .highlight-card {
    padding: 1.5rem;
  }
  
  .highlight-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .mini-stat {
    min-width: 70px;
  }
}

/* ==========================================================================
   Spotlight Orb & Panel - Responsive Styles
   ========================================================================== */

/* Tablet - Smaller orb, side panel remains */
@media (max-width: 768px) {
  .spotlight-panel {
    width: 320px;
    right: -340px;
  }
  
  .spotlight-panel.peek {
    right: -240px; /* 80px visible for 320px panel */
  }
  
  .spotlight-orb-trigger {
    width: 72px;
    height: 72px;
  }
  
  .spotlight-orb-tooltip {
    display: none;
  }
}

/* Mobile - Bottom sheet */
@media (max-width: 767px) {
  .spotlight-orb {
    bottom: 1rem;
    right: 1rem;
  }
  
  .spotlight-orb-trigger {
    width: 68px;
    height: 68px;
  }
  
  .spotlight-orb-tooltip {
    display: none;
  }
  
  .spotlight-peek-bubble {
    right: calc(100% + 0.375rem);
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
  }
  
  .spotlight-panel {
    top: auto;
    bottom: -100%;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-radius: 1.5rem 1.5rem 0 0;
    transition: bottom 0.3s ease;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
  }
  
  .spotlight-panel.active {
    bottom: 0;
    right: 0;
  }
  
  .spotlight-panel.peek {
    bottom: calc(-85vh + 80px); /* 80px reveal */
    right: 0;
  }
  
  .spotlight-panel-header {
    position: relative;
    padding-top: 1.5rem;
  }
  
  .spotlight-panel-header::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--light-gray);
    border-radius: 2px;
  }
  
  .spotlight-panel-content {
    padding: 1rem;
  }
  
  .spotlight-stats {
    justify-content: space-around;
  }
  
  .spotlight-card {
    padding: 1rem;
  }
}

/* ==========================================================================
   Learning Engine Showcase - Responsive Styles
   ========================================================================== */

/* Tablets */
@media (max-width: 1023px) {
  .learning-engine-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  
  .learning-engine-visual {
    order: -1;
  }
  
  .learning-engine-image {
    max-width: 500px;
  }
  
  .learning-engine-text h2 {
    font-size: var(--text-2xl);
  }
  
  .learning-engine-features {
    max-width: 500px;
    margin: 0 auto var(--space-6);
  }
  
  .le-feature {
    text-align: left;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .learning-engine-showcase {
    padding: var(--space-12) 0;
  }
  
  .learning-engine-image {
    max-width: 100%;
  }
  
  .learning-engine-visual::before,
  .learning-engine-visual::after {
    display: none;
  }
  
  .learning-engine-text h2 {
    font-size: var(--text-xl);
  }
  
  .learning-engine-text p {
    font-size: var(--text-base);
  }
  
  .le-feature-icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }
  
  .le-feature-text {
    font-size: var(--text-sm);
  }
}

@media (max-width: 767px) {
  .legal-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .legal-content th,
  .legal-content td {
    font-size: var(--text-sm);
    padding: 0.5rem 0.75rem;
  }
}