/* ============================================
   BLOCKHAVEN RESPONSIVE STYLES - FINAL
   ============================================
   ALL media queries in ONE file
   Standard breakpoint: 768px
   No conflicts, no duplicates
   ============================================ */

/* ============================================
   NAVIGATION ONLY (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  /* ========== NAVIGATION ========== */
  .navbar {
    height: 64px;
  }
  
  .nav-content {
    padding: 0 20px;
  }
  
  .logo-img {
    max-height: 58px;
  }
  
  .nav-links {
    display: none !important;
  }
  
  .nav-toggle {
    display: block !important;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    z-index: 10000;
  }
  
  .nav-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .nav-toggle.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .nav-toggle.open .bar:nth-child(2) {
    opacity: 0;
  }
  
  .nav-toggle.open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .mobile-nav-menu {
    display: flex !important;
    position: fixed;
    top: 64px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    min-width: 240px;
    max-width: calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
    z-index: 9999;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-height: calc(100svh - 64px - env(safe-area-inset-top));
    overflow-y: auto;
  }
  
  .mobile-nav-menu[hidden] {
    display: none !important;
  }
  
  .mobile-nav-menu a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  
  .mobile-nav-menu a:hover,
  .mobile-nav-menu a:focus {
    background: rgba(108, 92, 231, 0.2);
    color: #6C5CE7;
  }
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Statistics - 3 columns on tablet */
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  /* Hero adjustments */
  .hero-headline {
    font-size: 3rem;
  }
  
  .hero-subheadline {
    font-size: 1.375rem;
  }

  /* Tablet-only metrics sizing to avoid edge clipping at 1023px */
  .stat-number {
    font-size: clamp(2.6rem, 5.8vw, 3.25rem);
    line-height: 1.05;
  }
  .stat-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.35;
    text-wrap: balance;
  }
  .final-number {
    font-size: clamp(2.2rem, 4.8vw, 3rem);
    line-height: 1.1;
  }
  .final-text {
    font-size: clamp(1rem, 1.9vw, 1.125rem);
    line-height: 1.4;
    text-wrap: balance;
  }
  .stats-grid {
    gap: 24px; /* slightly tighter to reduce edge pressure */
  }
}

/* ============================================
   MOBILE AND TABLET (max-width: 1023px)
   ============================================ */
@media (max-width: 1023px) {
  
  /* Global mobile settings */
  html, body {
    font-size: 18px;
  }
  
  /* Ensure proper box-sizing and prevent horizontal overflow */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  
  
  /* ========== HERO ========== */
  .hero {
    height: auto !important;
    min-height: var(--stage-h, 100svh) !important; /* Stable on iOS; locked once via head script; override desktop !important */
  }
  
  .hero-content {
    padding: 100px 20px 60px;
    max-width: 100%;
  }
  
  .hero-headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 100%;
  }
  
  .hero-subheadline {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    margin-bottom: 1.5rem;
    line-height: 1.4;
  }
  
  .cta-btn {
    font-size: 1rem;
    padding: 12px 24px;
    transform: scale(1);
    white-space: nowrap;
  }
  
  .chevron-down {
    font-size: 18px;
    margin-top: 2rem;
  }
  
  /* ========== PHILOSOPHY CARDS CAROUSEL ========== */
  .identity-tiles-section {
    --tiles-pad: 24px;                /* mobile/tablet source of truth */
    padding-block: var(--tiles-pad);  /* equal top/bottom padding */
    padding-inline: var(--tiles-pad-x, 20px); /* equal left/right padding at section level */
    --tiles-stage-ratio: 0.4;         /* 40% viewport height stage */
    --tile-inner-pad-x: 10px;         /* inner horizontal padding used for centering calc */
    display: flex;
    flex-direction: column;           /* stack dots above carousel */
    justify-content: center;          /* equalize top/bottom spacing around tiles */
    align-items: stretch;             /* container spans full width */
    position: relative;               /* containing block for absolute dots */
    /* Stage height governed by section — prefer fixed px if set, else 40% of stage-h */
    block-size: var(--tiles-stage-px, calc(var(--stage-h, 100vh) * var(--tiles-stage-ratio, 0.5)));
  }
  
  @supports (height: 1svh) {
    .identity-tiles-section {
      /* Stable first paint height on mobile Safari; prefer fixed px if set */
      block-size: var(--tiles-stage-px, calc(var(--stage-h, 100svh) * var(--tiles-stage-ratio, 0.5)));
    }
  }
  
  /* Show carousel dots */
  .carousel-dots {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    position: absolute;            /* take out of normal flow so it doesn't affect padding balance */
    top: max(8px, env(safe-area-inset-top) + 4px); /* safe-area aware */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    order: initial;                /* irrelevant when positioned absolutely */
    z-index: 2;                    /* ensure clickable above tiles */
    pointer-events: auto;          /* keep dots clickable (JS handles navigation) */
  }
  
  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999999;
    transition: background 0.3s ease;
    cursor: pointer;
  }
  
  .carousel-dot.active {
    background: #00A8E8;
  }
  
  /* Convert grid to carousel */
  .identity-tiles-container {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 20px; /* spacing between cards */
    padding: 0; /* no side padding here — section controls equal side padding */
    width: 100%; /* container spans full available width */
    height: 100%;
    block-size: 100%;

    /* ensure first/last card can center and not look cut off */
    scroll-padding-inline: calc(var(--tiles-pad-x, 20px) + var(--tile-inner-pad-x, 10px));
  }
  
  /* leading and trailing spacers so the first/last card can center */
  .identity-tiles-container::before,
  .identity-tiles-container::after {
    content: "";
    flex: 0 0 calc(var(--tiles-pad-x, 20px) + var(--tile-inner-pad-x, 10px));
  }

  .identity-tiles-container::-webkit-scrollbar {
    display: none;
  }
  
  .identity-tile {
    container-type: normal;
    /* Ensure full-width card with equal side padding coming from section padding-inline */
    flex: 0 0 100%;
    width: 100%;
    min-width: 0; /* allow content to shrink within card */
    align-self: stretch; /* occupy full cross-axis width */
    box-sizing: border-box;
    scroll-snap-align: center; /* Center alignment for better snap */
    /* Card fills section's staged height rather than using vh on the card */
    min-height: unset;
    height: 100%;
    block-size: 100%;
    padding: 50px 25px; /* Internal card padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Show it's clickable */
    transition: none;
    text-align: center; /* Ensure center alignment */
    min-height: 0; /* allow flex children to shrink and scroll */
    overflow: hidden; /* clip decorative edges; content scrolls when expanded */
  }

  /* iOS 16e+ Simulator/device: freeze container-query scaling to avoid UI chrome resize effects.
     We detect iOS in head script and add .freeze-cqi to <html>.
     Under this class, disable container-type and use vw fallbacks only. */
  .freeze-cqi .identity-tile {
    container-type: normal; /* disable cqi length units */
  }

  .freeze-cqi .identity-tile:not(.expanded) .tile-icon,
  .freeze-cqi .identity-tile:not(.expanded) .icon-vision {
    width: clamp(48px, 14vw, 80px) !important;
    height: clamp(48px, 14vw, 80px) !important;
  }

  .freeze-cqi .identity-tile:not(.expanded) .tile-title {
    font-size: clamp(1.6rem, 6vw, 2.6rem) !important;
  }

  .freeze-cqi .identity-tile:not(.expanded) .tile-tagline {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem) !important;
  }

  .freeze-cqi .identity-tile.expanded .tile-description {
    font-size: calc(clamp(1.2rem, 5vw, 1.7rem) * var(--tile-scale, 1));
  }

  .freeze-cqi .identity-tile.expanded .vision-main,
  .freeze-cqi .identity-tile.expanded .principles-intro {
    font-size: calc(clamp(1.2rem, 5vw, 1.8rem) * var(--tile-scale, 1));
  }

  .freeze-cqi .identity-tile.expanded .vision-mission {
    font-size: calc(clamp(1.1rem, 4.8vw, 1.6rem) * var(--tile-scale, 1));
  }

  .freeze-cqi .identity-tile[data-tile="our-principles"].expanded .principles-list,
  .freeze-cqi .identity-tile[data-tile="our-principles"].expanded .principles-list li {
    font-size: calc(clamp(1.2rem, 5vw, 1.7rem) * var(--tile-scale, 1));
  }
  
  /* Disable desktop hover */
  .identity-tile:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Reset all desktop positioning */
  .identity-tile .tile-icon,
  .identity-tile .tile-title,
  .identity-tile .tile-tagline,
  .identity-tile .learn-more-hint,
  .identity-tile .tile-description {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
  }

  /* Premium copy: no auto hyphenation; smart wrapping */
  .identity-tile .tile-title,
  .identity-tile .tile-description,
  .identity-tile .vision-main,
  .identity-tile .vision-mission,
  .identity-tile .principles-list,
  .identity-tile .principles-list li {
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: pretty;
  }
  
  /* Collapsed state (default) */
  .identity-tile:not(.expanded) .tile-icon {
    width: clamp(48px, 14vw, 80px);
    height: clamp(48px, 14vw, 80px);
    margin: 0 auto 20px;
    opacity: 1;
    display: block;
  }
  
  .identity-tile:not(.expanded) .tile-icon svg {
    width: 100%;
    height: 100%;
  }
  
  .identity-tile:not(.expanded) .icon-vision {
    width: clamp(48px, 14vw, 80px);
    height: clamp(48px, 14vw, 80px);
    background-size: contain;
  }
  
  .identity-tile:not(.expanded) .tile-title {
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    margin-bottom: 1rem;
    opacity: 1;
    text-align: center;
    display: block;
    width: 100%;
    padding: 0;
    line-height: 1.2;
  }
  
  .identity-tile:not(.expanded) .tile-tagline {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    margin-bottom: 10px;
    opacity: 1;
    text-align: center;
    width: 100%;
    line-height: 1.4;
    display: block;
    padding: 0;
  }
  
  .identity-tile:not(.expanded) .learn-more-hint {
    display: block !important;
    font-size: 1rem !important; /* Consistent size */
    color: rgba(255, 255, 255, 0.7) !important;
    font-style: italic !important;
    opacity: 1 !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .identity-tile:not(.expanded) .tile-description {
    display: none !important;
  }
  
  /* Expanded state */
  .identity-tile.expanded .tile-icon,
  .identity-tile.expanded .tile-title,
  .identity-tile.expanded .tile-tagline,
  .identity-tile.expanded .learn-more-hint {
    display: none !important;
  }
  
  .identity-tile.expanded .tile-description {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    padding: 18px 18px;
    opacity: 1;
    font-size: calc(clamp(1.1rem, 4.5vw, 1.55rem) * var(--tile-scale, 1));
    line-height: 1.6;
    text-align: center;
    width: 100%;
    max-inline-size: none; /* allow full card width */
    margin: 0 auto;
    pointer-events: auto;
    color: #FAFAFA; /* Ensure text is white for contrast */
    /* Ensure long content remains readable inside fixed-height card */
    flex: 1 1 auto;
    max-height: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  /* Allow the expanded card to scroll vertically if content exceeds stage height */
  .identity-tile.expanded {
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 24px 10px; /* widen usable text width while preserving top/bottom frame */
  }

  /* inner content that uniformly scales while frame padding remains fixed */
  .tile-desc-content {
    transform-origin: center center;
    will-change: transform;
    max-width: 100%;
  }

  /* Measuring state to precompute scales without visual changes */
  .identity-tile.is-measuring {
    padding: 24px 10px !important;
  }
  .identity-tile.is-measuring .tile-description {
    display: flex !important;
    visibility: hidden !important;
  }
  .identity-tile.is-measuring .tile-icon,
  .identity-tile.is-measuring .tile-title,
  .identity-tile.is-measuring .tile-tagline,
  .identity-tile.is-measuring .learn-more-hint {
    display: none !important;
  }
  
  /* Override desktop-specific content wrapper styles */
  .identity-tile.expanded .vision-content,
  .identity-tile.expanded .principles-content {
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .identity-tile.expanded .vision-main,
  .identity-tile.expanded .principles-intro {
    font-size: calc(clamp(1.1rem, 4.5vw, 1.65rem) * var(--tile-scale, 1));
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .identity-tile.expanded .vision-mission {
    font-size: calc(clamp(1.0rem, 4.2vw, 1.45rem) * var(--tile-scale, 1));
    font-weight: 400;
    line-height: 1.6;
    font-style: italic;
    text-align: center;
  }
  
  /* Special handling for principles list - wider to prevent wrapping */
  .identity-tile[data-tile="our-principles"].expanded .tile-description {
    text-align: left !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .identity-tile[data-tile="our-principles"].expanded .principles-content {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
  
  .identity-tile[data-tile="our-principles"].expanded .principles-intro {
    text-align: left !important;
  }
  
  .identity-tile[data-tile="our-principles"].expanded .principles-list {
    text-align: left;
    font-size: calc(clamp(1.1rem, 4.5vw, 1.55rem) * var(--tile-scale, 1));
    line-height: 1.6;
    padding-left: 0; /* align bullets with intro text */
    margin: 0;
    list-style: none; /* remove default bullet indent */
  }
  
  .identity-tile[data-tile="our-principles"].expanded .principles-list li {
    position: relative;
    padding-left: 1.5rem; /* Proper spacing for arrow alignment */
    margin-bottom: 0.56rem; /* Reduced by 25% from 0.75rem for tighter, consistent spacing */
    font-size: calc(clamp(1.1rem, 4.5vw, 1.55rem) * var(--tile-scale, 1));
    line-height: 1.6;
    white-space: normal; /* Allow natural wrapping */
  }
  
  .identity-tile[data-tile="our-principles"].expanded .principles-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236C5CE7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8h12'/><path d='M10 4l4 4-4 4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  /* Completely disable ALL hover effects on mobile/tablet - FORCE OVERRIDE */
  .identity-tile:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Force collapsed state to stay visible on hover */
  .identity-tile:not(.expanded):hover .tile-icon {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
  }
  
  .identity-tile:not(.expanded):hover .tile-title {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
  }
  
  .identity-tile:not(.expanded):hover .tile-tagline {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
  }
  
  .identity-tile:not(.expanded):hover .learn-more-hint {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
  }
  
  .identity-tile:not(.expanded):hover .tile-description {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Ensure hover doesn't affect expanded state */
  .identity-tile.expanded:hover .tile-icon,
  .identity-tile.expanded:hover .tile-title,
  .identity-tile.expanded:hover .tile-tagline,
  .identity-tile.expanded:hover .learn-more-hint {
    display: none !important;
  }
  
  .identity-tile.expanded:hover .tile-description {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile coarse pointers: keep pointer events enabled; do not disable on :hover (prevents tap suppression) */
  @media (hover: none) and (pointer: coarse) {
    .identity-tile {
      pointer-events: auto;
    }
  }
  
  /* Interaction hints */
  .identity-tile[data-tile="who-we-are"]::after,
  .identity-tile[data-tile="our-vision"]::after {
    content: none; /* move hint outside card */
  }
  
  .identity-tile.expanded::before {
    content: "× tap to close";
    position: absolute;
    top: max(12px, env(safe-area-inset-top) + 6px);
    right: 25px;
    font-size: 1rem; /* Increased from 0.875rem */
    color: rgba(255, 255, 255, 0.8); /* Better visibility */
    font-style: italic;
  }
  
  /* carousel hint outside card, bottom-right of stage */
  .carousel-hint {
    position: absolute;
    right: 25px;
    bottom: max(12px, env(safe-area-inset-bottom));
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    pointer-events: none;
    animation: hint-pulse 2.4s ease-in-out infinite;
  }
  @keyframes hint-pulse {
    0%, 100% { opacity: 0.35; transform: translateX(0); }
    50% { opacity: 0.85; transform: translateX(3px); }
  }
  

  /* ========== STATISTICS ========== */
  #manifesto-content {
    padding: 40px 20px;
    position: relative; /* anchor for eyebrow */
    min-height: auto !important; /* override desktop vh-based min-height */
  }

  /* Eyebrow label: "THE PROBLEM" */
  .metrics-eyebrow {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;                /* +25%, lock to px to avoid text inflation */
    -webkit-text-size-adjust: none;   /* prevent iOS from auto-boosting tiny text */
    text-size-adjust: none;
    line-height: 1;
    letter-spacing: 0.06em;           /* micro tracking */
    text-transform: uppercase;
    font-weight: 600;                  /* lighter weight to reduce visual gravity */
    color: rgba(255, 255, 255, 0.72);
    opacity: 0.28;                     /* very subtle */
    white-space: nowrap;               /* avoid wrapping */
    pointer-events: none;
    z-index: 3;
  }

  /* Increase specificity to defeat legacy style.css h2 rules */
  #manifesto-content h2.metrics-eyebrow {
    font-size: 12.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    margin: 0 !important;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  .statistics-container {
    padding: 40px 20px;
    height: auto !important;      /* override desktop vh-based height */
    min-height: auto !important;  /* ensure no vh constraints on mobile */
  }
  
  .stats-grid {
    flex-direction: column !important;
    flex-wrap: nowrap !important;     /* single column */
    gap: 2rem;
    align-items: center;               /* center items horizontally */
    justify-content: center;           /* center as a group */
    width: 100%;
  }
  
  .final-number {
    font-size: 3rem;
  }
  
  .final-text {
    font-size: 1.125rem;
  }

  /* Ensure stat pairs are perfectly centered in mobile layout */
  .final-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  
  .stat-number {
    font-size: 4rem;
  }
  
  .stat-text {
    font-size: 1.5rem;
  }

  /* Force card alignment in the rapid-fire stage as well */
  .stat-card {
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Fix final statement centering - MOBILE SQUARE BOX DESIGN */
  .final-statement {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin: 50px auto 0;
    max-width: 280px; /* Square-ish dimensions */
    width: 280px;
    height: 280px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
  
  /* Hide original text on mobile and replace with pseudo-elements */
  .statement-line-one,
  .statement-line-two {
    display: none !important;
  }
  
  /* Create mobile-specific four-line text using pseudo-elements */
  .final-statement::before {
    content: "This cost isn't\Ameasured in dollars.";
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-line;
    text-align: center;
    margin-bottom: 0.5rem;
    display: block;
  }
  
  .final-statement::after {
    content: "It's measured\Ain lives.";
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 1.7rem; /* Larger text for emphasis like desktop */
    font-weight: 800;
    line-height: 1.3;
    background: linear-gradient(135deg, #FFFFFF 0%, #E8E8E8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: pre-line;
    text-align: center;
    display: block;
    margin-top: 0.25rem; /* Small spacing between sections */
  }
  
  /* ========== GENERAL MOBILE STYLES ========== */
  section:not(#our-philosophy) {
    padding: 40px 20px;
  }

  /* Align benefits section outer spacing with animation card: remove generic horizontal padding */
  .healthmemory-benefits {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  p {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  
  /* ========== HEALTHMEMORY ========== */
  #healthmemory-pulse {
    min-height: 80vh;
  }
  
  .intro-overlay {
    padding: 0 1rem !important;
    max-width: 95% !important;
  }
  
  .intro-overlay .intro-title {
    font-size: 1.75rem;
  }
  
  .intro-overlay .intro-description {
    font-size: 1.125rem;
  }
  
  .phase-explanation h3 {
    font-size: 1.75rem;
  }
  
  .phase-explanation p {
    font-size: 1.25rem;
  }
  
  /* ========== BENEFITS ========== */
  .healthmemory-benefits .benefit-card {
    min-height: 300px !important;
    max-height: 300px !important;
    height: 300px !important;
    padding: 2rem 1rem !important;
    box-sizing: border-box !important;
  }
  
  .benefit-card h3 {
    font-size: 1.5rem;
  }
  
  .benefit-card p {
    font-size: 1.125rem;
    text-wrap: balance !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    max-width: 95% !important;
    width: 95% !important;
  }
  
  /* ========== CTA MOUNTAIN ========== */
  .cta-mountain-section {
    padding: 20px 0 !important; /* remove horizontal padding to match percentage-based edge spacing */
  }
  
  .cta-card {
    position: relative !important;
    transform: none !important;
    margin: 20px auto;
    width: 95% !important; /* match animation/benefits outside spacing at <=1023px */
    max-width: 1560px;
    left: auto !important;
    right: auto !important;
  }
  
  .cta-headline {
    font-size: 2rem;
  }
  
  .cta-subline {
    font-size: 1.25rem;
  }
  
  .cta-form-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .cta-form {
    width: 100%;
    max-width: none;
  }

  .cta-form .cta-form-group {
    width: 100%;
    min-width: 0;
  }

  .cta-form input,
  .cta-form textarea,
  .cta-form select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px; /* prevent iOS zoom on focus */
    line-height: 1.4;
  }

  .cta-form input::placeholder,
  .cta-form textarea::placeholder {
    opacity: 0.8;
  }

  .cta-form input:focus,
  .cta-form textarea:focus,
  .cta-form select:focus {
    outline: 2px solid rgba(108, 92, 231, 0.6);
    outline-offset: 2px;
  }
  
  /* ========== CTA CONSENT CHECKBOX FIX ========== */
  /* Professional fix for mobile checkbox text indentation bug */
  /* Higher specificity to override conflicting rules in style.css */
  .cta-mountain-section .cta-card .cta-consent {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: start !important;
    column-gap: 8px !important;
    text-align: left !important;
    margin-top: 12px !important;
    margin-bottom: 0.5rem !important;
  }
  
  .cta-mountain-section .cta-card .cta-consent input[type="checkbox"] {
    grid-column: 1 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #6C5CE7 !important; /* ensure visible checkmark on iOS Safari */
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }
  
  .cta-mountain-section .cta-card .cta-consent label {
    grid-column: 2 !important;
    flex: initial !important;
    display: block !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  
  .cta-mountain-section .cta-card .cta-consent .consent-line1,
  .cta-mountain-section .cta-card .cta-consent .consent-line2 {
    display: inline !important;
  }
  
  /* ========== FOOTER ========== */
  .footer {
    padding: 24px 20px;
  }
  
  .social-links {
    gap: 1.5rem;
  }
  
  .footer-copy {
    font-size: 0.875rem;
  }

  /* Disable card animations and transitions on mobile/tablet to prevent any compute-time shifts */
  .identity-tiles-section,
  .identity-tiles-container,
  .identity-tile,
  .identity-tile * {
    animation: none !important;
    transition: none !important;
  }

  /* The tiles are wrapped in .scroll-fade-in-section on mobile — remove its fade/translate */
  .scroll-fade-in-section,
  .scroll-fade-in-section.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hint animation off on mobile/tablet */
  .carousel-hint {
    animation: none !important;
  }

  /* Force base visibility when animations are disabled (some elements were initially opacity:0/translated for fade-in) */
  .identity-tiles-section,
  .identity-tiles-container,
  .identity-tile {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .identity-tile::before,
  .identity-tile::after {
    opacity: 1 !important;
    transform: none !important;
  }

  .identity-tile .tile-icon,
  .identity-tile .tile-title,
  .identity-tile .tile-tagline,
  .identity-tile .learn-more-hint,
  .identity-tile .tile-description {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}


/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero-headline {
    font-size: 2rem;
  }
  
  .hero-subheadline {
    font-size: 1.125rem;
  }
  
  .stat-number {
    font-size: 3rem;
  }
  
  .stat-text {
    font-size: 1.25rem;
  }
  
  .identity-tile {
    padding: 40px 20px;
  }
  
  .identity-tile:not(.expanded) .tile-title {
    font-size: 1.5rem;
  }
  
  .identity-tile:not(.expanded) .tile-tagline {
    font-size: 1rem;
  }
  
  .cta-mountain-section .cta-card {
    width: 92% !important; /* match animation/benefits outside spacing at <=480px */
  }
  section:not(#our-philosophy) {
    padding: 30px 15px;
  }
  
  h2 {
    font-size: 1.75rem;
  }
}

/* ============================================
   ULTRA-SMALL (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {
  .hero-headline {
    font-size: 1.75rem;
  }
  
  .hero-subheadline {
    font-size: 1rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .stat-text {
    font-size: 1.125rem;
  }
  
  .cta-card {
    padding: 20px;
  }
  
  .cta-headline {
    font-size: 1.5rem;
  }
  
  .cta-subline {
    font-size: 1rem;
  }

  /* iPhone SE and <=375px: increase philosophy stage height only (≈+20% vs base 0.4) */
  .identity-tiles-section {
    --tiles-stage-px: calc(var(--stage-h, 100svh) * 0.48); /* compute from stage height so it’s modest and consistent */
    --tiles-stage-ratio: 0.48; /* fallback if px isn’t applied */
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
@media (max-width: 768px) {
  .mobile-break {
    display: inline;
  }
  
  button,
  .cta-btn,
  .early-access-btn,
  a {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (min-width: 769px) {
  .mobile-break {
    display: none;
  }
}

@media (min-width: 1024px) {
  .metrics-eyebrow {
    display: none !important; /* eyebrow is mobile/tablet only */
  }
}

/* iPad 13” (narrow desktop band) — add gentle side gutters to prevent edge cut-off */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Add a bit more horizontal breathing room without changing layout */
  .rapid-fire-sequence {
    padding-left: clamp(24px, 4vw, 48px) !important;
    padding-right: clamp(24px, 4vw, 48px) !important;
  }
  .stats-grid {
    /* iPad 13” (portrait/windowed) — use vertical stack before full desktop */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: min(92vw, 1200px);
    gap: clamp(16px, 2vw, 24px);
    width: 100%;
  }
  .final-stat {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  /* Scale metrics typography down for narrow desktop band (before tablet vertical switch) */
  .stat-number {
    font-size: clamp(40px, 7.2vw, 96px);
    line-height: 1.0;
  }
  .stat-text {
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.3;
    text-wrap: balance;
  }
  .final-number {
    font-size: clamp(32px, 4.2vw, 88px);
    line-height: 1.05;
  }
  .final-text {
    font-size: clamp(12px, 1.6vw, 18px);
    line-height: 1.35;
    text-wrap: balance;
  }
}

/* Force vertical orientation for metrics at iPad 13” portrait (≤1024px) and restore readable sizes */
@media (max-width: 1024px) {
  .stats-grid {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 2rem !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  /* Use the mobile-friendly sizes at this width so numbers aren’t tiny */
  .stat-number { font-size: 4rem !important; line-height: 1.0 !important; }
  .stat-text { font-size: 1.5rem !important; line-height: 1.35 !important; text-wrap: balance; }
  .final-number { font-size: 3rem !important; line-height: 1.05 !important; }
  .final-text { font-size: 1.125rem !important; line-height: 1.35 !important; text-wrap: balance; }
}

/* Metrics section footnote - responsive alignment and sizing */
@media (max-width: 1023px) {
  #manifesto-content {
    padding-bottom: 0 !important; /* sit tight to next section */
    position: relative; /* ensure absolute child anchors correctly */
  }
  .metrics-footnote {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* centered to screen */
    right: auto !important;
    bottom: 4px !important;
    width: auto !important;
    max-width: 92vw !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important; /* force single line */
    font-size: 5.75px !important; /* +25% from 4.6px */
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .metrics-footnote {
    font-size: 4.875px !important; /* +25% from 3.9px */
    bottom: 3px !important;
  }
}
@media (min-width: 1024px) {
  #manifesto-content { position: relative; }
  .metrics-footnote {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* centered to screen */
    right: auto !important;
    bottom: 6px !important;
    width: auto !important;
    max-width: 90vw !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important; /* force single line */
    font-size: 6.5px !important; /* +25% from 5.2px */
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    pointer-events: none;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}