/* ══════════════════════════════════════════════════
   RESPONSIVE — TUTTE LE PAGINE
   ══════════════════════════════════════════════════ */

@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(114, 240, 222, 0); }
  40%  { box-shadow: 0 0 0 8px rgba(114, 240, 222, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(114, 240, 222, 0); }
}

/* ── 1220px ──────────────────────────────────────── */
@media (max-width: 1220px) {
  .scene-portal {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    align-items: start;
  }

  .sp-copy {
    max-width: 46rem;
  }

  .sp-clock-zone {
    order: -1;
  }

  .scene-signal {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-canvas-zone {
    min-height: 240px;
  }

  .ss-input-tags { display: none; }
  .ss-compression-label { display: none; }

  .scene-threshold {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.46fr);
  }

  .so-system { min-height: 740px; }

  .so-node {
    min-width: 0;
    width: min(28vw, 256px);
  }

  /* other pages */
  .coach-body .coach-hero-stage,
  .coach-body .coach-example-chamber { grid-template-columns: 1fr; }
  .coach-body .coach-engine-scene {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cloud reduction"
      "lens lens"
      "output output";
  }
  .coach-body .method-spine { width: 124px; height: 124px; }
  .coach-body .example-compression { min-height: 120px; }
  .coach-body .example-compression::before,
  .coach-body .example-compression::after { display: none; }

  .biotwin-body .biotwin-hero-stage,
  .biotwin-body .biotwin-resonance-stage { grid-template-columns: 1fr; }
  .biotwin-body .biotwin-hero-field { min-height: 560px; }
  .biotwin-body .biotwin-react-chamber { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biotwin-body .biotwin-formation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biotwin-body .biotwin-stage-head { grid-template-columns: 1fr; }

  .system-body .system-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .system-body .system-hero-field { min-height: 560px; }
  .system-body .system-stage-copy,
  .system-body .system-trust-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .system-body .system-stage-copy p:last-child,
  .system-body .system-trust-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .system-body .system-map-nucleus {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .system-body .map-node-coach,
  .system-body .map-node-biotwin,
  .system-body .map-node-practices,
  .system-body .map-node-astral,
  .system-body .map-node-bazi,
  .system-body .map-node-diary,
  .system-body .map-node-privacy {
    grid-column: span 6;
    grid-row: auto;
  }
  .system-body .system-trust-chamber { grid-template-columns: 1fr; }

  .chronotype-body .chronotype-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .chronotype-body .chronotype-hero-field { order: -1; min-height: 540px; }
  .chronotype-body .chronotype-stage-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .chronotype-body .chronotype-stage-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .chronotype-body .chronotype-shift-core {
    width: min(300px, 52%);
  }
  .chronotype-body .chronotype-shift-node,
  .chronotype-body .chronotype-shift-note {
    width: min(280px, 36%);
  }
  .chronotype-body .chronotype-profiles-chamber { grid-template-columns: 1fr; }
  .chronotype-body .profile-mid { transform: none; }
  .chronotype-test-body .chronotype-test-stage { grid-template-columns: 1fr; min-height: 0; }
  .chronotype-test-body .chronotype-test-visual { min-height: 520px; }
  .chronotype-test-body .chronotype-test-section-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .chronotype-test-body .chronotype-test-section-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .practices-body .practices-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .practices-body .practices-hero-field { order: -1; min-height: 540px; }
  .practices-body .practices-stage-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .practices-body .practices-stage-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .practices-body .practices-families-grid { grid-template-columns: 1fr; }
  /* ── Diary 1220px ── */
  .diary-body .diary-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .diary-body .diary-hero-field { order: -1; min-height: 540px; }
  .diary-body .diary-hero-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .diary-body .diary-hero-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .diary-body .diary-custody-chamber,
  .diary-body .diary-protection-chamber,
  .diary-body .diary-meaning-chamber { grid-template-columns: 1fr; }
}

/* ── 980px ───────────────────────────────────────── */
@media (max-width: 980px) {
  .site-shell { width: min(calc(100% - 20px), 100%); }
  .site-header { border-radius: 28px; padding-inline: 14px; width: min(calc(100% - 20px), 100%); }
  .site-nav { gap: 6px; }
  .site-nav a { padding-inline: 10px; font-size: 0.88rem; }

  /* Orbit scene: flatten to grid (tablet 821–980px) */
  .so-system { min-height: 0; display: grid; gap: 14px; }
  .so-ring { display: none; }

  .so-nucleus {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 34px;
    padding: 24px 28px;
    text-align: left;
    place-content: start;
  }

  .so-nucleus-tao { display: none; }

  .so-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  /* Show "entra →" always on touch */
  .so-node::after {
    opacity: 0.6;
    transform: none;
  }

  /* FIX: reset astral node's desktop-only translateX(-50%) */
  .so-node-astral { transform: none; }
  .so-node-astral:hover { transform: translateY(-3px) scale(1.02); }

  .scene-threshold { grid-template-columns: 1fr; }

  .footer-base { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* other pages */
  .coach-body .coach-method-band { grid-template-columns: 1fr; }
  .coach-body .coach-method-band::before,
  .coach-body .coach-method-band::after,
  .coach-body .method-spine { display: none; }
  .coach-body .method-lane {
    min-height: 0;
    transform: none;
    clip-path: none;
    border-radius: 0;
    padding: 22px 24px;
    border-left: 3px solid var(--lane-color, rgba(114, 240, 222, 0.2));
  }
  .coach-body .method-lane + .method-lane {
    border-left: 3px solid var(--lane-color, rgba(114, 240, 222, 0.2));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .coach-body .coach-example-chamber { gap: 14px; }

  .biotwin-body .biotwin-react-chamber {
    grid-template-columns: 1fr;
  }

  .biotwin-body .biotwin-react-chamber::before {
    display: none;
  }

  .biotwin-body .react-step {
    min-height: 0;
    padding: 22px 24px;
  }

  .biotwin-body .react-step + .react-step {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .biotwin-body .react-step-phase { border-left: none; }
  .biotwin-body .react-step-tone { border-left: none; }
  .biotwin-body .react-step-state { border-left: none; }
  .biotwin-body .react-step-presence { border-left: none; }

  /* ── Sistema + Cronotipo: tablet layout (821–980px) ──
     These elements are x-scene-desktop — only collapse grid at tablet.
     Do NOT set display:flex, width:100vw, or margin-left here.
     Doppio DOM hides them entirely at ≤820px via kill rules in that block. ── */
  .system-body .system-map-chamber,
  .system-body .system-relations-chamber { grid-template-columns: 1fr; }
  .system-body .system-map-chamber::before,
  .system-body .system-map-chamber::after,
  .system-body .system-relations-chamber::before { display: none; }
  .system-body .map-node-coach,
  .system-body .map-node-biotwin,
  .system-body .map-node-practices,
  .system-body .map-node-astral,
  .system-body .map-node-bazi,
  .system-body .map-node-diary,
  .system-body .map-node-privacy { grid-column: auto; }
  .system-body .system-relation-lane { min-height: 0; padding: 22px 24px; }
  .system-body .system-relation-lane + .system-relation-lane {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* Chronotype tablet: collapse grids to single column, no carousel */
  .chronotype-body .chronotype-case-columns { grid-template-columns: 1fr !important; }
  .chronotype-body .chronotype-profiles-chamber { grid-template-columns: 1fr !important; }
  /* Desktop shift chamber (core + 3 nodes + note) — hide on mobile; mobile uses .chrono-offset-m hub */
  .chronotype-body .chronotype-shift-chamber { display: none !important; }

  .chronotype-test-body .chronotype-result-grid { grid-template-columns: 1fr; }
  .practices-body .practices-guidance-chamber { grid-template-columns: 1fr; }
  .practices-body .practices-usage-board { grid-template-columns: repeat(2, 1fr); }
  .practices-body .guidance-core {
    width: 100%;
    min-height: 0;
    border-radius: 28px;
  }

  .present-signals,
  .detail-grid,
  .coach-sequence,
  .coach-window,
  .detail-stage,
  .threshold-stage,
  .coach-command-stage { grid-template-columns: 1fr; }
}

/* ── 820px: hamburger ────────────────────────────── */
@media (max-width: 820px) {
  /* ── Doppio DOM: show mobile scenes, hide desktop scenes ── */
  .x-scene-desktop { display: none !important; }
  .x-scene-mobile  { display: block !important; }
  /* !! Critical: cc-track is also x-scene-mobile — must be flex, not block !! */
  .x-scene-mobile.cc-track { display: flex !important; flex-direction: row !important; }

  /* ── SPECIFICITY KILL: 980px block uses high-specificity (0,2,0) selectors that
     override the (0,1,0) .x-scene-desktop rule. Repeat those selectors here
     (later in cascade = higher precedence at equal specificity) so they lose. ── */

  /* Chronotype: old 980px carousel rules force these visible — kill them */
  .chronotype-body .chronotype-case-columns { display: none !important; }
  .chronotype-body .chronotype-profiles-chamber { display: none !important; }
  /* Desktop hero field — already has .x-scene-desktop but 980px sets order/height */
  .chronotype-body .chronotype-hero-field { display: none !important; }
  /* Old hero copy on desktop — now replaced by .x-scene-mobile.chrono-hero-m */
  .chronotype-body .chronotype-hero-copy { display: none !important; }

  /* System: system-map-chamber has NO .x-scene-desktop class in HTML — hide it explicitly */
  .system-body .system-map-chamber { display: none !important; }
  /* Relations chamber: HAS .x-scene-desktop but 980px rules touch it */
  .system-body .system-relations-chamber { display: none !important; }
  /* Trust signals: HAS .x-scene-desktop */
  .system-body .system-trust-signals { display: none !important; }

  /* Practices: hide decorative hero-field (nodes overlap on small screens) + guidance-core */
  .practices-body .practices-hero-field { display: none !important; }
  .practices-body .practices-hero-stage { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .practices-body .guidance-core { display: none !important; }

  /* ── Stages: must stay block (override 980px flex/block rules on stages) ── */
  .system-body .system-hero-stage,
  .system-body .system-flow-stage,
  .system-body .system-relations-stage,
  .system-body .system-trust-stage { display: block !important; overflow: visible !important; padding: 20px !important; }
  .system-body .system-trust-chamber { display: block !important; }
  .chronotype-body .chronotype-hero-stage,
  .chronotype-body .chronotype-offset-stage,
  .chronotype-body .chronotype-practice-stage,
  .chronotype-body .chronotype-profiles-stage { display: block !important; overflow: visible !important; padding: 20px !important; }
  .sys-timeline-m { position: relative; }

  /* ════════════════════════════════════════════════════════════════
     CUPERTINO CAROUSEL ENGINE — mobile (matches homepage so-carousel exactly)
     ════════════════════════════════════════════════════════════════ */
  .cc-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 32px 10vw 20px;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box;
    perspective: 800px !important;
    transform-style: preserve-3d;
  }
  .cc-track::-webkit-scrollbar { display: none; }

  .cc-card {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    max-width: 340px;
    scroll-snap-align: center;
    opacity: 0.38;
    transform: scale(0.85) rotateY(12deg) translateZ(-40px) !important;
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
  }
  .cc-card[data-dist="0"] {
    opacity: 1 !important;
    transform: scale(1.05) rotateY(0deg) translateZ(0px) !important;
  }
  .cc-card[data-dist="0"] .cc-inner {
    border-color: rgba(114, 240, 222, 0.4) !important;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(114, 240, 222, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  }
  .cc-card[data-dist="-1"] {
    opacity: 0.55 !important;
    transform: scale(0.88) rotateY(15deg) translateX(10vw) translateZ(-20px) !important;
  }
  .cc-card[data-dist="1"] {
    opacity: 0.55 !important;
    transform: scale(0.88) rotateY(-15deg) translateX(-10vw) translateZ(-20px) !important;
  }
  .cc-card[data-dist="-2"],
  .cc-card[data-dist="2"]  { opacity: 0.22 !important; }
  .cc-card[data-dist="-3"],
  .cc-card[data-dist="3"],
  .cc-card[data-dist="4"],
  .cc-card[data-dist="5"]  { opacity: 0.08 !important; }

  /* ── Carousel dots (matches so-carousel-dots) ── */
  .cc-dots {
    display: flex !important;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }
  .cc-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.35s ease, transform 0.35s ease;
    flex-shrink: 0;
  }
  .cc-dot.is-active {
    background: var(--accent, #72f0de);
    transform: scale(1.5);
  }

  /* ════════════════════════════════════════════════════════════════
     CHRONO HERO MOBILE — order + typography
     ════════════════════════════════════════════════════════════════ */
  .chrono-hero-m {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    padding: 24px 0 0 !important;
  }
  .chrono-hero-m .eyebrow { order: -2; }
  .chrono-m-h1 {
    order: -1;
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: 0.96;
    margin: 0;
  }
  .chrono-m-body { order: 0; }
  .chrono-m-actions { order: 1; }
  .chrono-mini-preview { order: 2; }

  /* ════════════════════════════════════════════════════════════════
     CHRONO OFFSET ORBITAL — nucleus center + 3 nodes orbiting
     ════════════════════════════════════════════════════════════════ */
  .com-stage {
    position: relative !important;
    min-height: 340px;
    display: block !important;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    max-width: 340px;
    margin: 0 auto;
    overflow: visible;
    padding: 0 !important;
  }
  /* Subtle orbit ring */
  .com-stage::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 70%;
    border-radius: 50%;
    border: 1px solid rgba(114, 240, 222, 0.12);
    pointer-events: none;
    z-index: 0;
  }
  /* Second inner orbit ring */
  .com-stage::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42%; height: 42%;
    border-radius: 50%;
    border: 1px solid rgba(114, 240, 222, 0.08);
    pointer-events: none;
    z-index: 0;
  }
  .com-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    width: 120px; height: 120px;
    border-radius: 50% !important;
    background: rgba(114, 240, 222, 0.08) !important;
    border: 1px solid rgba(114, 240, 222, 0.22) !important;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
    box-shadow: 0 0 40px rgba(114, 240, 222, 0.12), 0 0 80px rgba(114, 240, 222, 0.06);
    animation: comPulse 4s ease-in-out infinite;
  }
  @keyframes comPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(114,240,222,0.12), 0 0 80px rgba(114,240,222,0.06); }
    50% { box-shadow: 0 0 50px rgba(114,240,222,0.20), 0 0 100px rgba(114,240,222,0.10); }
  }
  .com-center .chronotype-kicker { font-size: 0.58rem; }
  .com-center strong { font-size: 0.92rem !important; }
  .com-nodes {
    position: absolute !important;
    inset: 0;
    display: block !important;
  }
  .com-node {
    position: absolute !important;
    width: 96px; height: 96px;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px !important;
  }
  .com-node p { display: none !important; }
  /* Allodola: top-center */
  .com-lark {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 188, 87, 0.25) !important;
  }
  .com-lark .shift-offset { color: #ffbc57 !important; }
  .com-lark strong { color: #ffbc57 !important; }
  /* Intermedio: bottom-left */
  .com-mid {
    bottom: 4%;
    left: -6%;
    border: 1px solid rgba(114, 240, 222, 0.25) !important;
  }
  .com-mid .shift-offset { color: #72f0de !important; }
  .com-mid strong { color: #72f0de !important; }
  /* Gufo: bottom-right */
  .com-owl {
    bottom: 4%;
    right: -6%;
    border: 1px solid rgba(126, 166, 255, 0.25) !important;
  }
  .com-owl .shift-offset { color: #7ea6ff !important; }
  .com-owl strong { color: #7ea6ff !important; }
  /* Offset labels */
  .com-node .shift-offset {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.06em;
  }
  .com-node strong { font-size: 0.76rem !important; }
  .com-note { display: none; }

  /* Profile images smaller on mobile */
  .chronotype-body .profile-img { width: 72px !important; height: 72px !important; }

  /* ════════════════════════════════════════════════════════════════
     BUTTONS — glassmorphism + glow on :active
     ════════════════════════════════════════════════════════════════ */
  .button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    border-radius: 14px !important;
    padding: 13px 22px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    font-weight: 600;
  }
  .button:active {
    box-shadow: 0 0 24px rgba(114, 240, 222, 0.40) !important;
    transform: scale(0.97) !important;
  }
  .button-primary {
    background: rgba(114, 240, 222, 0.10) !important;
    border-color: rgba(114, 240, 222, 0.35) !important;
    color: var(--accent) !important;
  }
  .button-primary:active {
    box-shadow: 0 0 30px rgba(114, 240, 222, 0.55) !important;
  }

  /* Push hamburger to far right via flex order */
  .site-header { flex-wrap: nowrap; }
  .brand { flex-shrink: 0; order: 0; }
  .page-label {
    display: block;
    order: 1;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196, 225, 255, 0.44);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
  }
  .nav-toggle {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    order: 2;
    margin-left: 10px;
    flex-shrink: 0;
  }
  .nav-toggle span { margin: 0; }
  .site-nav { order: 3; margin-left: 0; }

  /* ── Orbital carousel — show on mobile, hide desktop system ── */
  .so-system { display: none !important; }

  /* ── Hero: show bio-dashboard, hide desktop presence panel ── */
  .sp-presence { display: none; }
  .bio-dashboard { display: block; }
  /* ── Hide PORTA IL RITMO section on mobile ── */
  .scene-threshold { display: none !important; }
  /* ─── Sistema page mobile: layout fix + Moduli A + B + C ──────── */

  /* ROOT FIX: stages → block layout, NO overflow hidden (carousels need to breathe) */
  .system-body { overflow-x: hidden; }
  .system-body .system-hero-stage,
  .system-body .system-flow-stage,
  .system-body .system-relations-stage,
  .system-body .system-trust-stage {
    display: block !important;
    overflow: visible !important;
    padding: 20px !important;
  }

  /* ROOT FIX: stage-copy/trust-copy → block, full width */
  .system-body .system-stage-copy,
  .system-body .system-trust-copy,
  .system-body .system-hero-copy {
    display: block !important;
    width: 100% !important;
  }
  .system-body .system-stage-copy > *,
  .system-body .system-trust-copy > *,
  .system-body .system-hero-copy > * {
    max-width: 100% !important;
    text-align: left !important;
  }

  /* ROOT FIX: trust-chamber single column */
  .system-body .system-trust-chamber { display: block !important; }
  .system-body .system-trust-core    { margin-bottom: 16px; }

  /* MODULO A: Hide maiuscoletto + orbit field */
  /* MODULO B1/B2/C: REMOVED — system-map-chamber, system-trust-signals,
     system-relations-chamber are .x-scene-desktop elements (or killed above).
     They must stay display:none on mobile. The NEW mobile versions are
     .x-scene-mobile elements (.sys-flow-m, .sys-timeline-m, .cc-track)
     which are shown by the rules above. Adding display:flex here would
     override the display:none kill rules and cause horizontal overflow. */

  /* Mobile-only: glassmorphism for cards and panels (preserve desktop) */
  .portal-stage,
  .present-shell,
  .features-stage,
  .threshold-stage,
  .detail-stage,
  .detail-panel,
  .detail-threshold,
  .coach-command-stage,
  .coach-sequence,
  .coach-window,
  .system-map-nucleus,
  .system-map-node,
  .system-trust-core,
  .system-trust-signal,
  .chronotype-shift-core,
  .chronotype-shift-node,
  .chronotype-case-column,
  .chronotype-profile-node,
  .so-cc-inner,
  .bio-panel,
  .usage-node,
  .bazi-example-card {
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
  }

  /* Mobile-only: buttons glow + softer background */
  .button {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(114,240,222,0.18) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.36);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 200ms ease;
  }

  .button:hover,
  .button:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(0,242,255,0.12), 0 0 32px rgba(0,242,255,0.10);
    border-color: rgba(0,242,255,0.34) !important;
  }

  .button:active {
    transform: translateY(0) !important;
    box-shadow: 0 6px 20px rgba(0,242,255,0.16) inset, 0 6px 18px rgba(0,0,0,0.32);
  }

  /* ── Secondary pages: ensure text never touches screen edges ── */
  .coach-body .coach-command-stage,
  .coach-body .coach-sequence,
  .coach-body .coach-window,
  .bazi-body .bazi-example-card,
  .chronotype-body .chronotype-body-shell,
  .chronotype-test-body .chronotype-test-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── Force single column for multi-column layouts ── */
  .coach-body .coach-method-grid,
  .bazi-body .bazi-example-chamber,
  .practices-body .usage-grid {
    grid-template-columns: 1fr !important;
  }


  /* Let the carousel breathe: remove inline padding + allow overflow */
  .scene-orbits {
    overflow: visible;
    padding-inline: 0;
    padding-bottom: 28px;
  }
  /* Restore text indent for header */
  .so-header { padding-inline: clamp(18px, 5vw, 32px); }

  .so-carousel { display: flex; flex-direction: column; align-items: center; gap: 14px; }

  /* Nucleus */
  .so-carousel-nucleus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 14px 20px 10px;
    position: relative;
  }
  .so-carousel-nucleus::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(114, 240, 222, 0.4), transparent);
  }
  .so-carousel-nucleus img {
    opacity: 0.88;
    filter: drop-shadow(0 0 10px rgba(114, 240, 222, 0.35));
    animation: so-float-a 6s ease-in-out infinite;
  }
  .so-carousel-nucleus strong {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.06em;
  }
  .so-carousel-nucleus small {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  /* ── MODULO B: 3D Orbital Carousel ─────────────────────── */

  /* Perspective wrapper */
  .so-carousel {
    perspective: 1000px;
  }

  /* Track — 80vw cards with peek on both sides */
  .so-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    /* center 80vw card: padding = (100vw - 80vw) / 2 = 10vw */
    padding: 32px 10vw 20px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    scrollbar-width: none;
    box-sizing: border-box;
    /* preserve-3d on children */
    transform-style: preserve-3d;
  }
  .so-carousel-track::-webkit-scrollbar { display: none; }

  /* Cards — 80vw wide so ±1 peek at ~10vw from each edge */
  .so-carousel-card {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 80vw;
    max-width: 340px;
    text-decoration: none;
    color: inherit;
    opacity: 0.38;
    transform: scale(0.85) rotateY(12deg) translateZ(-40px);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity  0.6s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Active center card — full scale, upright */
  .so-carousel-card[data-dist="0"] {
    opacity: 1;
    transform: scale(1.05) rotateY(0deg) translateZ(0px);
  }
  .so-carousel-card[data-dist="0"] .so-cc-inner {
    border-color: var(--node-color, #72f0de);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 40px color-mix(in srgb, var(--node-color, #72f0de) 20%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  }

  /* Left card: tilted right (facing center) */
  .so-carousel-card[data-dist="-1"] {
    opacity: 0.55;
    transform: scale(0.88) rotateY(15deg) translateX(10vw) translateZ(-20px);
  }

  /* Right card: tilted left (facing center) */
  .so-carousel-card[data-dist="1"] {
    opacity: 0.55;
    transform: scale(0.88) rotateY(-15deg) translateX(-10vw) translateZ(-20px);
  }

  /* Far cards */
  .so-carousel-card[data-dist="-2"],
  .so-carousel-card[data-dist="2"] {
    opacity: 0.22;
    transform: scale(0.80) rotateY(20deg) translateZ(-50px);
  }
  .so-carousel-card[data-dist="2"] {
    transform: scale(0.80) rotateY(-20deg) translateZ(-50px);
  }

  /* Flash animation */
  .so-carousel-card[data-dist="0"].card-flash .so-cc-inner {
    animation: cardFlash 0.55s ease-out both;
  }

  /* Glass inner card */
  .so-cc-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px 22px;
    border-radius: 26px;
    background: rgba(7, 15, 35, 0.64);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(196, 225, 255, 0.1);
    box-shadow:
      0 16px 48px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 0;
  }

  /* Luminous gradient border via overlay */
  .so-cc-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(114, 240, 222, 0.08) 40%,
      transparent 65%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Node color accent — top hairline */
  .so-cc-inner::after {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 1.5px;
    background: var(--node-color, var(--accent));
    opacity: 0.7;
    border-radius: 0 0 3px 3px;
    z-index: 2;
  }

  /* Icon */
  .so-cc-icon {
    font-size: 2.4rem;
    color: var(--node-color, var(--accent));
    line-height: 1;
    margin-bottom: 2px;
    position: relative;
    z-index: 2;
  }

  /* Kicker */
  .so-cc-kicker {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--node-color, var(--text-faint));
    opacity: 0.9;
    position: relative;
    z-index: 2;
  }

  /* Title */
  .so-carousel-card strong {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.02em;
    line-height: 1.1;
    position: relative;
    z-index: 2;
  }

  /* Description */
  .so-carousel-card small {
    display: block;
    font-size: 0.79rem;
    line-height: 1.52;
    color: var(--text-soft);
    position: relative;
    z-index: 2;
  }

  /* CTA */
  .so-cc-cta {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--node-color, var(--accent));
    position: relative;
    z-index: 2;
  }

  /* Per-card node colors */
  .so-carousel-card--chronotype { --node-color: #F59E0B; }
  .so-carousel-card--coach      { --node-color: #22D3EE; }
  .so-carousel-card--biotwin    { --node-color: #A855F7; }
  .so-carousel-card--practices  { --node-color: #10B981; }
  .so-carousel-card--bazi       { --node-color: #6366F1; }
  .so-carousel-card--astral     { --node-color: #F97316; }
  .so-carousel-card--system     { --node-color: #3B82F6; }

  /* Floating animation: only on the active center card */
  .so-carousel-card[data-dist="0"] .so-cc-inner { animation: so-float-a 4s ease-in-out infinite; }

  /* Dots */
  .so-carousel-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }
  .so-carousel-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.35s ease, transform 0.35s ease, width 0.35s ease;
    flex-shrink: 0;
  }
  .so-carousel-dot.is-active {
    background: var(--accent, #72f0de);
    transform: scale(1.5);
  }

  /* Hide redundant content on mobile */
  body:not(.home-body) .footer-download { display: none; }
  .home-body .st-features { display: none; }

  .site-nav-desktop { display: none; }

  .site-nav-mobile-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: fit-content;
    min-width: 220px;
    max-width: 80vw;
    z-index: 80;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 18px 18px 24px;
    background:
      radial-gradient(circle at top left, rgba(95, 152, 248, 0.14), transparent 24%),
      radial-gradient(circle at bottom right, rgba(114, 240, 222, 0.1), transparent 22%),
      rgba(4, 9, 17, 0.96);
    backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Remove backdrop-filter AND transform so position:fixed sheet escapes the header */
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    left: 0;
    right: 0;
    margin-inline: auto;
  }

  .site-nav.is-open .site-nav-mobile-sheet {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .site-nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(196, 225, 255, 0.1);
  }

  .site-nav-mobile-title {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .site-nav-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(196, 225, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
  }

  .site-nav-mobile-groups {
    display: grid;
    gap: 16px;
    align-content: start;
    overflow-y: auto;
    padding-top: 18px;
  }

  .site-nav-mobile-group {
    display: grid;
    gap: 8px;
  }

  .site-nav-mobile-label {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-inline: 2px;
  }

  .site-nav-mobile-group a,
  .site-nav-mobile-cta {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(196, 225, 255, 0.08);
    color: var(--text);
  }

  .site-nav-mobile-group a[aria-current="page"] {
    color: var(--accent, #72f0de);
    background: rgba(114, 240, 222, 0.08);
    border-color: rgba(114, 240, 222, 0.28);
    box-shadow: inset 0 -2px 0 var(--accent, #72f0de);
  }

  .site-nav-mobile-cta {
    justify-content: center;
    border-color: rgba(114, 240, 222, 0.32);
    background: rgba(114, 240, 222, 0.08);
    color: #d8fff8;
    font-weight: 700;
  }

  .scene-portal,
  .scene-signal,
  .scene-orbits,
  .scene-threshold,
  .portal-stage,
  .present-shell,
  .features-stage,
  .threshold-stage,
  .detail-stage,
  .detail-panel,
  .detail-threshold,
  .coach-command-stage,
  .coach-sequence,
  .coach-window { border-radius: 28px; padding: 24px 20px; }

  .footer-download { text-align: center; }
  .footer-beta-btn { justify-content: center; }
  .footer-download-copy { padding: 24px 24px 0; }
  .footer-beta-btn { margin: 16px 24px 24px; }
  .footer-base { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 24px; }
  .footer-col-brand { justify-items: center; }
  .footer-tagline { max-width: none; }
  .footer-social { justify-content: center; }
  .footer-bottom { border-radius: 0 0 28px 28px; }

  .sp-copy h1 { font-size: clamp(3.8rem, 13vw, 6rem); }

  .ss-copy h2,
  .st-copy h2,
  .so-header h2 { font-size: clamp(2.8rem, 11vw, 4.4rem); }

  .sp-explore { margin-top: 22px; }

  .ss-output { margin-top: 20px; }

  .coach-body .coach-hero-stage,
  .coach-body .coach-method-stage,
  .coach-body .coach-example-stage { border-radius: 28px; padding: 24px 20px; }
  .coach-body .coach-hero-copy h1,
  .coach-body .coach-method-heading h2,
  .coach-body .coach-example-copy h2 { font-size: clamp(2.9rem, 12vw, 4.8rem); }
  .coach-body .coach-hero-note { font-size: 0.82rem; letter-spacing: 0.1em; }
  .coach-body .coach-local-nav {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 22px;
    align-items: flex-start;
    flex-direction: column;
  }
  .coach-body .coach-hero-actions,
  .coach-body .coach-example-actions { flex-direction: column; align-items: stretch; }
  .coach-body .coach-hero-actions .button,
  .coach-body .coach-example-actions .button { width: 100%; }
  .coach-body .coach-engine-scene {
    min-height: 0;
    display: grid;
    gap: 14px;
    padding: 18px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "cloud"
      "lens"
      "reduction"
      "output";
  }
  .coach-body .scene-orbit,
  .coach-body .scene-beam,
  .coach-body .scene-compression { display: none; }
  .coach-body .engine-input-cloud,
  .coach-body .engine-lens,
  .coach-body .engine-reduction,
  .coach-body .engine-output { position: relative; inset: auto; width: 100%; transform: none; }
  .coach-body .engine-lens { aspect-ratio: auto; border-radius: 28px; text-align: left; place-content: start; }
  .coach-body .engine-output { clip-path: none; border-radius: 28px; }
  .coach-body .engine-output::before,
  .coach-body .example-dossier::before { display: none; }
  .coach-body .example-compression {
    padding: 18px 20px;
    text-align: center;
    place-items: center;
    align-content: center;
    border-radius: 20px;
    background: rgba(114, 240, 222, 0.04);
    border: 1px solid rgba(114, 240, 222, 0.12);
  }
  .coach-body .example-compression strong { max-width: none; text-align: center; }
  .coach-body .coach-hero-stage { gap: 18px; }
  .coach-body .coach-hero-copy { gap: 14px; max-width: none; }
  .coach-body .coach-hero-copy p:not(.coach-hero-note) { font-size: 0.96rem; }
  .coach-body .engine-chip { min-height: 32px; padding-inline: 10px; font-size: 0.78rem; }
  .coach-body .method-icon { margin-top: 10px; }
  .coach-body .coach-example-chamber {
    padding: 0;
    border-radius: 28px;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .coach-body .example-dossier {
    padding: 20px;
    border-radius: 24px;
    background: rgba(8, 14, 24, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .coach-body .example-dossier .dossier-row {
    padding: 12px 0;
  }
  .coach-body .example-dossier .dossier-row + .dossier-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .coach-body .coach-response-card {
    padding: 22px 20px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 76% 12%, rgba(114, 240, 222, 0.06), transparent 30%),
      rgba(8, 14, 24, 0.6);
    border: 1px solid rgba(114, 240, 222, 0.12);
  }
  .coach-sequence::before { display: none; }

  .biotwin-body .biotwin-hero-stage,
  .biotwin-body .biotwin-react-stage,
  .biotwin-body .biotwin-formation-stage,
  .biotwin-body .biotwin-resonance-stage { border-radius: 28px; padding: 24px 20px; }
  .biotwin-body .biotwin-stage-head { gap: 16px; }
  .biotwin-body .biotwin-hero-stage { gap: 20px; }
  .biotwin-body .biotwin-stage-copy h2 { font-size: clamp(2.35rem, 9vw, 3.5rem); }
  .biotwin-body .biotwin-stage-head-helix,
  .biotwin-body .biotwin-stage-head-resonance { text-align: center; }
  .biotwin-body .biotwin-stage-head-helix .biotwin-stage-copy,
  .biotwin-body .biotwin-stage-head-resonance .biotwin-stage-copy {
    max-width: none;
    justify-self: center;
  }
  .biotwin-body .biotwin-stage-head-helix .biotwin-stage-copy h2,
  .biotwin-body .biotwin-stage-head-resonance .biotwin-stage-copy h2 {
    max-width: 14.5ch;
    margin-inline: auto;
  }
  .biotwin-body .biotwin-hero-copy h1 { font-size: clamp(2.7rem, 10.8vw, 4.1rem); }
  .biotwin-body .biotwin-hero-field {
    min-height: 420px;
    border-radius: 28px;
  }
  .biotwin-body .biotwin-live-panel {
    left: 16px;
    bottom: 16px;
    width: min(340px, calc(100% - 32px));
    padding: 16px 18px;
    background:
      radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.03), transparent 42%),
      linear-gradient(180deg, rgba(8, 12, 22, 0.10), rgba(8, 12, 22, 0.02));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .biotwin-body .biotwin-hero-actions,
  .biotwin-body .biotwin-resonance-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .biotwin-body .biotwin-hero-actions .button,
  .biotwin-body .biotwin-resonance-actions .button { width: 100%; }
  .biotwin-body .biotwin-formation-grid { gap: 12px; }
  .biotwin-body .formation-node {
    min-height: 220px;
    border-radius: 26px;
  }
  .biotwin-body .biotwin-head-visual {
    min-height: 156px;
  }
  .biotwin-body .biotwin-head-visual-helix {
    min-height: 208px;
  }
  /* ── Pair visual: explicit height so canvas height:100% resolves correctly ── */
  .biotwin-body .biotwin-head-visual-pair {
    display: block !important;
    height: 180px;
    min-height: 160px;
  }
  .biotwin-body .biotwin-head-visual-pair canvas {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .system-body .system-hero-stage,
  .system-body .system-flow-stage,
  .system-body .system-relations-stage,
  .system-body .system-trust-stage { border-radius: 28px; padding: 24px 20px; }
  .system-body .system-hero-copy h1,
  .system-body .system-stage-copy h2,
  .system-body .system-trust-copy h2 { font-size: clamp(2.85rem, 11vw, 4.35rem); }
  .system-body .system-stage-copy,
  .system-body .system-trust-copy { grid-template-columns: 1fr; }
  .system-body .system-stage-copy p:last-child,
  .system-body .system-trust-copy p:last-child {
    grid-column: auto;
    max-width: none;
    margin-top: 16px;
  }
  .system-body .system-hero-stage { gap: 20px; }
  .system-body .system-hero-field {
    min-height: 440px;
    border-radius: 28px;
  }
  .system-body .system-core-node {
    width: min(250px, 56%);
    min-height: 220px;
  }
  .system-body .system-orbit-node {
    min-width: 132px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .system-body .system-trust-signals { gap: 12px; }

  .chronotype-body .chronotype-hero-stage,
  .chronotype-body .chronotype-offset-stage,
  .chronotype-body .chronotype-practice-stage,
  .chronotype-body .chronotype-profiles-stage { border-radius: 28px; padding: 24px 20px; }
  .chronotype-body .chronotype-hero-copy h1,
  .chronotype-body .chronotype-stage-copy h2 { font-size: clamp(2.85rem, 11vw, 4.35rem); }
  .chronotype-body .chronotype-hero-field { min-height: 460px; border-radius: 28px; }
  .chronotype-body .chronotype-solar-anchor,
  .chronotype-body .chronotype-offset-lane,
  .chronotype-body .chronotype-shift-node,
  .chronotype-body .chronotype-shift-note,
  .chronotype-body .chronotype-profile-node { border-radius: 22px; }
  .practices-body .practices-hero-stage,
  .practices-body .practices-families-stage,
  .practices-body .practices-guidance-stage,
  .practices-body .practices-usage-stage { border-radius: 28px; padding: 24px 20px; }
  .practices-body .practices-hero-copy h1,
  .practices-body .practices-stage-copy h2 { font-size: clamp(2.85rem, 11vw, 4.35rem); }
  .practices-body .practices-hero-field { min-height: 460px; border-radius: 28px; }
  .practices-body .practice-family,
  .practices-body .guidance-lane,
  .practices-body .usage-node { border-radius: 22px; }
  .chronotype-test-body .chronotype-test-stage,
  .chronotype-test-body .chronotype-test-shell,
  .chronotype-test-body .chronotype-test-result { border-radius: 28px; padding: 24px 20px; }
  .chronotype-test-body .chronotype-test-copy h1,
  .chronotype-test-body .chronotype-test-section-copy h2,
  .chronotype-test-body .chronotype-test-result-card h2 { font-size: clamp(2.85rem, 11vw, 4.35rem); }
  .chronotype-test-body .chronotype-test-visual { min-height: 430px; border-radius: 28px; }
  .chronotype-test-body .chronotype-question-card,
  .chronotype-test-body .chronotype-result-metric { border-radius: 22px; }
  /* ── Diary 820px ── */
  .diary-body .diary-hero-stage,
  .diary-body .diary-custody-stage,
  .diary-body .diary-protection-stage,
  .diary-body .diary-meaning-stage { border-radius: 28px; padding: 24px 20px; }
  .diary-body .diary-hero-copy h1,
  .diary-body .diary-stage-copy h2 { font-size: clamp(2.85rem, 11vw, 4.35rem); }
  .diary-body .diary-hero-field { min-height: 460px; border-radius: 28px; }
  .diary-body .diary-custody-core,
  .diary-body .diary-custody-lane,
  .diary-body .diary-protection-core,
  .diary-body .diary-protection-signal,
  .diary-body .diary-meaning-lane,
  .diary-body .diary-meaning-closing { border-radius: 22px; }
}

/* ── 560px: mobile ───────────────────────────────── */
@media (max-width: 560px) {
  .site-shell { width: min(calc(100% - 12px), 100%); padding-top: 72px; }
  .site-header { top: 8px; gap: 12px; z-index: 900; width: min(calc(100% - 12px), 100%); }
  .brand span { font-size: 0.96rem; }

  /* ── Reveal: real animations on mobile (shorter distance, snappier) ── */
  .reveal {
    transform: translateY(20px);
    transition-duration: 480ms;
    animation: revealFallback 0s 5s forwards; /* safety-net only if JS hangs */
  }
  @keyframes revealFallback { to { opacity: 1; transform: none; } }
  .reveal.is-visible { animation: none; }
  .reveal-left  { transform: translateX(-24px); }
  .reveal-right { transform: translateX(24px); }
  .reveal-scale { transform: scale(0.94) translateY(12px); }

  /* ── Mobile: kill overflow:hidden on ALL stage containers ── */
  /* This prevents clipping of cards and reveal animations */
  [class*="-stage"],
  [class*="scene-"],
  .portal-stage,
  .present-shell,
  .features-stage,
  .threshold-stage,
  .detail-stage,
  .detail-panel,
  .detail-threshold,
  .coach-command-stage,
  .coach-sequence,
  .coach-window {
    overflow: visible !important;
  }

  /* ── Mobile spacing & depth ── */
  .homepage,
  .coach-page,
  .detail-page,
  [class$="-page"] {
    gap: 20px !important;
  }

  /* Card elevation + glass on mobile */
  [class*="-stage"],
  [class*="scene-"] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  }

  /* Smooth separator gradient between sections */
  main > *:not(:first-child)::before {
    content: "";
    display: block;
    height: 1px;
    margin: -10px 24px 18px;
    background: linear-gradient(90deg, transparent, rgba(114, 240, 222, 0.12) 30%, rgba(95, 152, 248, 0.12) 70%, transparent);
    pointer-events: none;
  }

  /* ── Global mobile text safety ── */
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* Ensure all hero/stage copy blocks are centered on mobile */
  [class*="-hero-copy"],
  [class*="-stage-copy"],
  [class*="-trust-copy"] {
    text-align: center;
  }
  [class*="-hero-copy"] h1,
  [class*="-stage-copy"] h2,
  [class*="-trust-copy"] h2 {
    margin-inline: auto;
  }

  /* Hero: text first on mobile, clock below — both visible in first viewport */
  .scene-portal { padding: 18px 16px; gap: 12px; overflow: visible; }

  .sp-clock-zone { order: 0; }
  .sp-clock-zone .clock-mount { width: min(100%, 88vw); margin: 0 auto; }

  .sp-copy { order: -1; padding: 16px 0 10px; text-align: center; }
  .sp-copy h1 { font-size: clamp(3.2rem, 14vw, 5rem); line-height: 0.9; margin-inline: auto; }
  .sp-manifesto { margin-top: 12px; font-size: 0.96rem; margin-inline: auto; }
  .sp-explore { margin-top: 14px; }

  .sp-payoff { font-size: 0.92rem; max-width: 100%; margin-inline: auto; text-align: center; }

  .sp-presence-main span { font-size: 1.24rem; }

  /* Scene 2 */
  .scene-signal { overflow: visible; }
  .ss-copy { text-align: center; }
  .ss-copy h2 { margin-inline: auto; }
  .ss-canvas-zone { min-height: 200px; }

  /* Scene 3 */
  .scene-orbits { overflow: visible; }
  .so-header { text-align: center; }
  .so-header h2 { margin-inline: auto; }

  /* Scene 4 */
  .scene-threshold { overflow: visible; }

  .st-copy { text-align: center; }
  .st-copy h2 { margin-inline: auto; }
  .st-live-panel { padding: 16px; }
  .st-live-organ span { font-size: 1.8rem; }
  .st-features { gap: 10px; }
  .st-feature { padding: 12px 14px; gap: 10px; }

  /* Footer — compact and professional */
  .footer-download-copy { padding: 18px 18px 0; }
  .footer-download-copy h3 { font-size: 1.8rem; }
  .footer-beta-btn { margin: 12px 18px 18px; }
  .footer-base { padding: 18px; gap: 16px; }
  .footer-bottom { padding: 12px 18px; }

  .coach-body .coach-local-nav {
    gap: 8px;
    padding: 8px;
  }

  .coach-body .coach-local-title {
    min-height: 0;
    padding-inline: 4px;
    font-size: 0.72rem;
  }

  .coach-body .coach-local-links {
    width: 100%;
    gap: 6px;
  }

  .coach-body .coach-local-nav a {
    min-height: 32px;
    padding-inline: 12px;
    font-size: 0.8rem;
  }

  /* Other pages */
  .detail-orbit { min-height: 220px; }
  .detail-orbit-label { font-size: 0.72rem; }
  .label-one { left: 8%; }
  .label-two { right: 8%; }

  .coach-body .engine-input-cloud,
  .coach-body .engine-lens,
  .coach-body .engine-reduction,
  .coach-body .engine-output,
  .coach-body .method-lane { padding: 18px; border-radius: 24px; }
  .coach-body .coach-response-card { gap: 12px; }
  .coach-body .response-line { font-size: 1.16rem; }
  .coach-body .coach-example-actions .button { min-width: 0; width: 100%; }
  .coach-body .coach-hero-copy { text-align: center; }
  .coach-body .coach-hero-copy h1 {
    font-size: clamp(2.15rem, 11.8vw, 3.15rem);
    max-width: 11.5ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .coach-body .coach-engine-scene { gap: 10px; padding: 14px; }
  .coach-body .engine-lens strong,
  .coach-body .engine-reduction strong,
  .coach-body .engine-output strong { font-size: 1.02rem; }
  .coach-body .coach-hero-actions { gap: 10px; align-items: center; }
  .coach-body .coach-hero-note { font-size: 0.74rem; }
  .coach-body .coach-hero-stage { padding: 18px 16px 20px; }
  .coach-body .coach-method-stage,
  .coach-body .coach-example-stage { padding: 20px 16px; }
  .coach-body .coach-hero-copy { gap: 12px; }
  .coach-body .coach-hero-copy p:not(.coach-hero-note) { font-size: 0.92rem; }
  .coach-body .coach-method-heading h2,
  .coach-body .coach-example-copy h2 { font-size: clamp(2.35rem, 11vw, 3.4rem); margin-inline: auto; }
  .coach-body .coach-method-heading,
  .coach-body .coach-example-copy { text-align: center; }

  .biotwin-body .biotwin-page { gap: 18px; }
  .biotwin-body .biotwin-hero-stage,
  .biotwin-body .biotwin-react-stage,
  .biotwin-body .biotwin-formation-stage,
  .biotwin-body .biotwin-resonance-stage { padding: 18px 16px 20px; }
  .biotwin-body .biotwin-hero-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .biotwin-body .biotwin-hero-copy h1 {
    font-size: clamp(2.2rem, 11.4vw, 3.15rem);
    max-width: 9.4ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .biotwin-body .biotwin-hero-text { font-size: 0.94rem; }
  .biotwin-body .biotwin-hero-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .biotwin-body .biotwin-hero-field {
    min-height: 320px;
    border-radius: 24px;
  }
  .biotwin-body .biotwin-live-panel {
    left: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 14px;
    border-radius: 22px;
    width: calc(100% - 24px);
  }
  .biotwin-body .biotwin-live-main strong { font-size: 1.34rem; }
  .biotwin-body .biotwin-live-main span { font-size: 0.88rem; }
  .biotwin-body .biotwin-live-meta span {
    min-height: 30px;
    padding-inline: 10px;
    font-size: 0.75rem;
  }
  .biotwin-body .biotwin-stage-copy h2 {
    font-size: clamp(1.85rem, 8.8vw, 2.65rem);
    margin-inline: auto;
  }
  .biotwin-body .biotwin-stage-copy { text-align: center; }
  .biotwin-body .biotwin-stage-head-helix,
  .biotwin-body .biotwin-stage-head-resonance { text-align: center; }
  .biotwin-body .biotwin-stage-head-helix .biotwin-stage-copy h2,
  .biotwin-body .biotwin-stage-head-resonance .biotwin-stage-copy h2 {
    max-width: 13ch;
    margin-inline: auto;
  }
  .biotwin-body .biotwin-stage-head-helix .biotwin-stage-copy p,
  .biotwin-body .biotwin-stage-head-resonance .biotwin-stage-copy p {
    max-width: 34ch;
    margin-inline: auto;
  }
  .biotwin-body .biotwin-react-chamber,
  .biotwin-body .biotwin-formation-grid { margin-top: 20px; }
  .biotwin-body .biotwin-head-visual {
    min-height: 124px;
  }
  .biotwin-body .biotwin-head-visual-pair {
    height: 160px;
    min-height: 140px;
    border-radius: 22px;
  }
  .biotwin-body .biotwin-head-visual-helix {
    min-height: 180px;
    border-radius: 22px;
  }
  .biotwin-body .react-step { padding: 14px 16px; }
  .biotwin-body .react-step strong { font-size: 0.88rem; line-height: 1.45; }
  .biotwin-body .react-step-icon { width: 32px; height: 32px; font-size: 16px; }
  .biotwin-body .biotwin-react-chamber {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 22px;
  }
  .biotwin-body .react-step { min-height: 0; gap: 8px; }
  .biotwin-body .react-step + .react-step { border-top: none; }
  .biotwin-body .react-step:nth-child(2) { border-left: 1px solid rgba(255,255,255,0.06); }
  .biotwin-body .react-step:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.06); }
  .biotwin-body .react-step:nth-child(4) { border-left: 1px solid rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.06); }
  .biotwin-body .biotwin-formation-grid { grid-template-columns: repeat(2, 1fr); }
  .biotwin-body .formation-node {
    min-height: 0;
    padding: 14px;
    border-radius: 20px;
  }
  .biotwin-body .formation-node strong { font-size: 0.88rem; line-height: 1.45; }
  .biotwin-body .formation-visual {
    min-height: 100px;
  }

  .system-body .system-page { gap: 18px; }
  .system-body .system-hero-stage,
  .system-body .system-flow-stage,
  .system-body .system-relations-stage,
  .system-body .system-trust-stage { padding: 18px 16px 20px; }
  .system-body .system-hero-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .system-body .system-hero-copy h1 {
    font-size: clamp(2.2rem, 11.2vw, 3.25rem);
    max-width: 11.2ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .system-body .system-hero-text { font-size: 0.94rem; }
  .system-body .system-hero-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .system-body .system-hero-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px;
    min-height: auto;
    border-radius: 24px;
  }
  .system-body .system-orbit,
  .system-body .system-radial,
  .system-body .system-field-glow,
  .system-body .system-hero-field::after { display: none; }
  .system-body .system-core-node {
    grid-column: 1 / -1;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: auto;
    transform: none;
    padding: 22px 18px;
    border-radius: 22px;
    border: 1px solid rgba(114, 240, 222, 0.22);
    box-shadow: 0 0 30px rgba(114, 240, 222, 0.08);
    margin-bottom: 6px;
  }
  .system-body .system-core-node::before,
  .system-body .system-core-node::after { display: none; }
  .system-body .system-core-node strong { font-size: 1.65rem; }
  .system-body .system-orbit-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none;
    min-width: 0;
    width: 100%;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(8, 14, 24, 0.5);
  }
  .system-body .system-orbit-node span { font-size: 0.9rem; }
  .system-body .system-orbit-node small { font-size: 0.72rem; color: var(--text-soft); }
  .system-body .node-privacy {
    grid-column: 1 / -1;
  }
  .system-body .system-stage-copy h2,
  .system-body .system-trust-copy h2 {
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
    max-width: 13.2ch;
    margin-inline: auto;
  }
  .system-body .system-stage-copy,
  .system-body .system-trust-copy { text-align: center; }
  .system-body .system-stage-copy p,
  .system-body .system-trust-copy p { font-size: 0.94rem; }
  .system-body .system-map-chamber { margin-top: 20px; padding: 14px; }
  .system-body .system-map-nucleus,
  .system-body .system-map-node,
  .system-body .system-trust-core,
  .system-body .system-trust-signal {
    padding: 18px;
    border-radius: 22px;
  }
  .system-body .system-map-nucleus h3 { font-size: 1.6rem; }
  .system-body .system-relation-lane h3 { font-size: 1.7rem; }
  .system-body .system-trust-signals { grid-template-columns: 1fr; }
  /* F. Relation lane timeline: better spacing on mobile */
  .sys-timeline-m .tl-head h3 { font-size: 1.2rem; }

  .chronotype-body .chronotype-page { gap: 18px; }
  .chronotype-body .chronotype-hero-stage,
  .chronotype-body .chronotype-offset-stage,
  .chronotype-body .chronotype-practice-stage,
  .chronotype-body .chronotype-profiles-stage { padding: 18px 16px 20px; }
  .chronotype-body .chronotype-hero-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .chronotype-body .chronotype-hero-copy h1 {
    font-size: clamp(2.2rem, 11.2vw, 3.25rem);
    max-width: 11.2ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .chronotype-body .chronotype-hero-text,
  .chronotype-body .chronotype-stage-copy p { font-size: 0.94rem; }
  .chronotype-body .chronotype-hero-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .chronotype-body .chronotype-hero-field {
    min-height: 400px;
    border-radius: 24px;
  }
  .chronotype-body .chronotype-solar-anchor {
    top: 16px;
    left: 16px;
    min-width: 128px;
    padding: 14px 16px;
  }
  .chronotype-body .chronotype-solar-anchor strong { font-size: 1.7rem; }
  .chronotype-body .chronotype-field-legend {
    top: 92px;
    right: 16px;
    gap: 10px;
    font-size: 0.68rem;
  }
  .chronotype-body .chronotype-offset-stack {
    left: 16px;
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
  .chronotype-body .chronotype-offset-lane {
    padding: 14px;
    gap: 8px;
  }
  .chronotype-body .chronotype-lane-head span { font-size: 0.96rem; }
  .chronotype-body .chronotype-stage-copy h2 {
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
    max-width: 13.2ch;
    margin-inline: auto;
  }
  .chronotype-body .chronotype-stage-copy { text-align: center; }
  .chronotype-body .chronotype-casehead {
    align-items: center;
    flex-direction: column;
    padding: 20px 20px 0;
  }
  .chronotype-body .chronotype-case-time {
    min-width: 64px;
    min-height: 64px;
    font-size: 1.2rem;
  }
  .chronotype-body .chronotype-case-actions { padding: 0 20px 20px; }
  .chronotype-test-body .chronotype-test-page { gap: 18px; }
  .chronotype-test-body .chronotype-test-stage,
  .chronotype-test-body .chronotype-test-shell,
  .chronotype-test-body .chronotype-test-result { padding: 18px 16px 20px; }
  .chronotype-test-body .chronotype-test-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .chronotype-test-body .chronotype-test-copy h1 {
    font-size: clamp(2.2rem, 11.2vw, 3.25rem);
    max-width: 11.2ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .chronotype-test-body .chronotype-test-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .chronotype-test-body .chronotype-test-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 20px 16px;
    min-height: auto;
    border-radius: 24px;
  }
  .chronotype-test-body .test-visual-ring,
  .chronotype-test-body .test-visual-glow {
    display: none;
  }
  .chronotype-test-body .test-visual-anchor {
    grid-column: 1 / -1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(200px, 60%);
    min-height: 130px;
    padding: 18px;
    justify-self: center;
    aspect-ratio: auto;
  }
  .chronotype-test-body .test-visual-anchor strong { font-size: 1.5rem; }
  .chronotype-test-body .test-visual-chip {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    text-align: center;
  }
  .chronotype-test-body .test-visual-chip strong { font-size: 0.86rem; }
  .chronotype-test-body .chronotype-test-section-copy h2 {
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
    max-width: 13.2ch;
    margin-inline: auto;
  }
  .chronotype-test-body .chronotype-test-section-copy { text-align: center; }
  .chronotype-test-body .chronotype-test-section-copy p,
  .chronotype-test-body .chronotype-question-card p,
  .chronotype-test-body .chronotype-test-copy p { font-size: 0.94rem; }
  .chronotype-test-body .chronotype-question-card {
    padding: 18px;
    border-radius: 22px;
  }
  .chronotype-test-body .chronotype-question-card h3 {
    font-size: 1.5rem;
  }
  .chronotype-test-body .chronotype-option {
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 18px;
  }
  .chronotype-test-body .chronotype-question-actions,
  .chronotype-test-body .chronotype-result-actions,
  .chronotype-test-body .chronotype-test-actions { flex-direction: column; }
  .chronotype-test-body .chronotype-question-actions .button,
  .chronotype-test-body .chronotype-result-actions .button,
  .chronotype-test-body .chronotype-test-actions .button { width: 100%; }
  .practices-body .practices-page { gap: 18px; }
  .practices-body .practices-hero-stage,
  .practices-body .practices-families-stage,
  .practices-body .practices-guidance-stage,
  .practices-body .practices-usage-stage { padding: 18px 16px 20px; }
  .practices-body .practices-hero-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .practices-body .practices-hero-copy h1 {
    font-size: clamp(2.2rem, 11.2vw, 3.25rem);
    max-width: 11.6ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .practices-body .practices-hero-text,
  .practices-body .practices-stage-copy p { font-size: 0.94rem; }
  .practices-body .practices-hero-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .practices-body .practices-hero-field {
    min-height: 380px;
    border-radius: 24px;
  }
  .practices-body .practices-field-core {
    width: min(210px, 68%);
    min-height: 150px;
    padding: 18px;
  }
  .practices-body .practices-field-core strong { font-size: 1.34rem; }
  .practices-body .practices-field-node {
    width: min(160px, 42%);
    padding: 12px 12px 12px 40px;
    border-radius: 16px;
  }
  .practices-body .practices-field-node .material-icons {
    left: 12px;
    top: 12px;
    font-size: 18px;
  }
  .practices-body .practices-field-node strong { font-size: 0.92rem; }
  .practices-body .practices-field-node small { font-size: 0.72rem; }
  .practices-body .practices-stage-copy h2 {
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
    max-width: 13.2ch;
    margin-inline: auto;
  }
  .practices-body .practices-stage-copy { text-align: center; }
  .practices-body .family-visual { min-height: 126px; }
  .practices-body .practice-family,
  .practices-body .guidance-lane,
  .practices-body .usage-node {
    min-height: 0;
    padding: 18px;
    border-radius: 22px;
  }
  .practices-body .guidance-core {
    padding: 18px;
  }
  .practices-body .practices-hero-actions { flex-direction: column; }
  .practices-body .practices-hero-actions .button { width: 100%; }
  .practices-body .breath-demo {
    min-height: 164px;
  }
  .practices-body .breath-demo-sphere {
    width: 86px;
    height: 86px;
  }
  .practices-body .practices-stage-copy {
    row-gap: 4px;
  }
  .practices-body .practices-stage-copy p:last-child {
    margin-top: 10px;
  }
  .practices-body .practice-family p,
  .coach-body .coach-hero-linknote {
    font-size: 0.9rem;
  }

  /* Practices mobile: compact usage 2×2 */
  .practices-body .practices-usage-board {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .practices-body .usage-node {
    padding: 14px;
  }
  .practices-body .usage-node strong { font-size: 0.88rem; }
  .practices-body .usage-node p { font-size: 0.78rem; }
  .practices-body .usage-node .material-icons { font-size: 1.25rem; margin-bottom: 4px; }

  /* ── Mobile collapsible cards ── */
  .mc-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .mc-toggle::after {
    content: '\25BE';
    font-size: 0.72em;
    opacity: 0.45;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    margin-left: auto;
  }
  .mc-card.mc-expanded .mc-toggle::after {
    transform: rotate(180deg);
  }
  .mc-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
  }
  .mc-body > * {
    overflow: hidden;
    min-height: 0;
  }
  .mc-card.mc-expanded .mc-body {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}


@media (max-width: 1220px) {
  .bazi-body .bazi-hero-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .bazi-body .bazi-hero-field {
    order: -1;
    min-height: 560px;
  }
  .bazi-body .bazi-stage-copy {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .bazi-body .bazi-stage-copy p:last-child {
    max-width: none;
    margin-top: 16px;
  }
  .bazi-body .bazi-layer-chamber,
  .bazi-body .bazi-example-chamber {
    grid-template-columns: 1fr;
  }
  .bazi-body .bazi-layer-core {
    width: 100%;
    min-height: 0;
    border-radius: 28px;
  }
  .bazi-body .bazi-system-map {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .bazi-body .map-clock,
  .bazi-body .map-chronotype,
  .bazi-body .map-bazi,
  .bazi-body .map-coach,
  .bazi-body .map-day {
    grid-column: span 3;
  }
  .bazi-test-body .bazi-test-stage {
    grid-template-columns: 1fr;
  }
  .bazi-test-body .bazi-test-summary,
  .bazi-test-body .bazi-test-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bazi-test-body .bazi-test-visual {
    min-height: 332px;
  }
}

@media (max-width: 820px) {
  .bazi-body .bazi-hero-stage,
  .bazi-body .bazi-layer-stage,
  .bazi-body .bazi-system-stage,
  .bazi-body .bazi-example-stage { border-radius: 28px; }
  .bazi-body .bazi-hero-copy h1,
  .bazi-body .bazi-stage-copy h2 { font-size: clamp(2.85rem, 11vw, 4.2rem); }
  .bazi-body .bazi-core,
  .bazi-body .bazi-node,
  .bazi-body .bazi-layer-lane,
  .bazi-body .bazi-map-node,
  .bazi-body .bazi-example-card { border-radius: 22px; }
  .bazi-test-body .bazi-test-stage,
  .bazi-test-body .bazi-test-result { border-radius: 28px; }
  .bazi-test-body .bazi-test-copy h1 { font-size: clamp(2.8rem, 10vw, 4rem); }
  .bazi-test-body .bazi-test-visual-node {
    width: 142px;
  }
}

@media (max-width: 560px) {
  .bazi-body .bazi-page { gap: 18px; }
  .bazi-body .bazi-hero-stage,
  .bazi-body .bazi-layer-stage,
  .bazi-body .bazi-system-stage,
  .bazi-body .bazi-example-stage { padding: 18px 16px 20px; }
  .bazi-body .bazi-hero-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .bazi-body .bazi-hero-copy h1 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
    max-width: 10.8ch;
    margin-inline: auto;
    line-height: 0.94;
  }
  .bazi-body .bazi-hero-text,
  .bazi-body .bazi-stage-copy p { font-size: 0.94rem; }
  .bazi-body .bazi-hero-note {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
  .bazi-body .bazi-hero-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
    min-height: auto;
    border-radius: 24px;
  }
  .bazi-body .bazi-field-grid,
  .bazi-body .bazi-orbit,
  .bazi-body .bazi-core-ring { display: none; }
  .bazi-body .bazi-core {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: auto;
    transform: none;
    padding: 20px 18px;
    border-radius: 22px;
  }
  .bazi-body .bazi-core strong { font-size: 1.42rem; }
  .bazi-body .bazi-node {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
  }
  .bazi-body .bazi-stage-copy h2 {
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
    max-width: 13.2ch;
    margin-inline: auto;
  }
  .bazi-body .bazi-stage-copy { text-align: center; }
  .bazi-body .bazi-layer-lane,
  .bazi-body .bazi-map-node,
  .bazi-body .bazi-example-card {
    min-height: 0;
    padding: 14px 16px;
    border-radius: 22px;
  }
  .bazi-body .bazi-layer-lane .material-icons { font-size: 1.25rem; margin-bottom: 4px; }
  .bazi-body .bazi-layer-lane strong { font-size: 0.88rem; }
  .bazi-body .bazi-layer-lane p { font-size: 0.78rem; }
  .bazi-body .bazi-layer-core {
    padding: 18px;
  }
  .bazi-body .bazi-system-map {
    grid-template-columns: repeat(2, 1fr);
  }
  .bazi-body .map-clock,
  .bazi-body .map-chronotype,
  .bazi-body .map-bazi,
  .bazi-body .map-coach,
  .bazi-body .map-day {
    grid-column: auto;
  }
  .bazi-body .map-day {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
  .bazi-body .bazi-map-node {
    padding: 14px 16px;
    min-height: 0;
    gap: 6px;
  }
  .bazi-body .bazi-map-node .material-icons { font-size: 1.25rem; margin-bottom: 4px; }
  .bazi-body .bazi-map-node .node-label { font-size: 0.68rem; }
  .bazi-body .bazi-map-node strong { font-size: 0.92rem; }
  .bazi-body .bazi-map-node p { font-size: 0.78rem; }

  .bazi-body .bazi-example-chamber {
    grid-template-columns: repeat(2, 1fr);
  }
  .bazi-body .bazi-example-card.card-guidance {
    grid-column: 1 / -1;
  }
  .bazi-body .bazi-example-card {
    padding: 14px 16px;
    min-height: 0;
    gap: 6px;
  }
  .bazi-body .bazi-example-card strong { font-size: 0.88rem; }
  .bazi-body .bazi-example-card p { font-size: 0.78rem; }
  .bazi-body .bazi-hero-actions,
  .bazi-body .bazi-example-actions { flex-direction: column; }
  .bazi-body .bazi-hero-actions .button,
  .bazi-body .bazi-example-actions .button { width: 100%; }
  .bazi-test-body .bazi-test-stage,
  .bazi-test-body .bazi-test-result {
    padding: 18px 16px 20px;
    border-radius: 24px;
  }
  .bazi-test-body .bazi-test-copy {
    gap: 12px;
    max-width: none;
    text-align: center;
  }
  .bazi-test-body .bazi-test-copy h1 {
    font-size: clamp(2.15rem, 11vw, 3.2rem);
    max-width: 11ch;
    margin-inline: auto;
    line-height: 0.95;
  }
  .bazi-test-body .bazi-test-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .bazi-test-body .bazi-test-summary .bazi-test-pill:last-child {
    grid-column: 1 / -1;
  }
  .bazi-test-body .bazi-test-grid {
    grid-template-columns: 1fr;
  }
  .bazi-test-body .bazi-test-visual {
    min-height: 340px;
    border-radius: 22px;
  }
  .bazi-test-body .bazi-test-visual-core {
    width: min(220px, 66%);
    min-height: 132px;
    padding: 16px;
    border-radius: 20px;
  }
  .bazi-test-body .bazi-test-visual-node {
    width: min(148px, 42%);
    padding: 10px 10px 12px;
    border-radius: 16px;
  }
  .bazi-test-body .bazi-test-visual .node-profile { left: 6%; top: 10%; }
  .bazi-test-body .bazi-test-visual .node-day { right: 6%; top: 10%; }
  .bazi-test-body .bazi-test-visual .node-hour { left: 8%; bottom: 10%; }
  .bazi-test-body .bazi-test-visual .node-organ { right: 8%; bottom: 10%; }
  .bazi-test-body .bazi-test-form-shell,
  .bazi-test-body .bazi-test-pill,
  .bazi-test-body .bazi-test-panel,
  .bazi-test-body .bazi-test-guidance {
    border-radius: 20px;
    padding: 18px;
  }
  .bazi-test-body .bazi-test-actions {
    flex-direction: column;
  }
  .bazi-test-body .bazi-test-actions .button {
    width: 100%;
  }

  .diary-body .diary-hero-stage,
  .diary-body .diary-custody-stage,
  .diary-body .diary-protection-stage,
  .diary-body .diary-meaning-stage {
    grid-template-columns: 1fr;
    padding: 22px 18px;
    border-radius: 26px;
  }
  .diary-body .diary-hero-copy h1 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(2.2rem, 11.2vw, 3.25rem);
  }
  .diary-body .diary-stage-copy h2 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.95rem, 9.2vw, 2.8rem);
  }
  .diary-body .diary-hero-copy,
  .diary-body .diary-stage-copy { text-align: left; }
  /* Hero field: convert from absolute to grid on mobile */
  .diary-body .diary-hero-field {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-height: auto;
    padding: 16px;
    border-radius: 24px;
  }
  .diary-body .diary-hero-field .diary-orbit,
  .diary-body .diary-hero-field .diary-field-glow,
  .diary-body .diary-hero-field .diary-memory-thread,
  .diary-body .diary-hero-field::before,
  .diary-body .diary-hero-field::after { display: none; }
  .diary-body .diary-memory-core {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: 100%;
    min-height: auto;
    padding: 16px;
    border-radius: 18px;
    text-align: center;
  }
  .diary-body .diary-trace-node {
    position: static;
    min-width: 0;
    width: auto;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .diary-body .diary-trace-node span { font-size: 0.6rem; }
  .diary-body .diary-trace-node strong { font-size: 0.78rem; }
  .diary-body .diary-custody-chamber,
  .diary-body .diary-protection-chamber,
  .diary-body .diary-protection-signals,
  .diary-body .diary-meaning-chamber {
    grid-template-columns: 1fr;
  }
  .diary-body .diary-custody-core,
  .diary-body .diary-custody-lane,
  .diary-body .diary-meaning-closing {
    grid-column: auto;
  }
  .diary-body .diary-custody-lane,
  .diary-body .diary-meaning-lane.lane-rooted {
    transform: none;
  }
  .diary-body .diary-protection-signal,
  .diary-body .diary-custody-lane,
  .diary-body .diary-meaning-lane,
  .diary-body .diary-meaning-closing,
  .diary-body .diary-custody-core,
  .diary-body .diary-protection-core {
    padding: 18px;
    border-radius: 22px;
  }
  .diary-body .diary-hero-actions,
  .diary-body .diary-protection-actions {
    flex-direction: column;
  }
  .diary-body .diary-hero-actions .button,
  .diary-body .diary-protection-actions .button {
    width: 100%;
  }

  /* ── Diary v100: mobile compaction ── */

  /* Custody-core mobile: compact glassmorphism */
  .diary-body .diary-custody-core-m {
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(156, 190, 248, 0.12);
    border-top: 3px solid rgba(168, 85, 247, 0.35);
    background: rgba(7, 15, 35, 0.64);
    backdrop-filter: blur(15px);
    text-align: center;
    margin-bottom: 8px;
  }
  .diary-body .diary-custody-core-m .custody-kicker {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: #A855F7;
  }
  .diary-body .diary-custody-core-m strong {
    display: block; margin-top: 6px;
    font-size: 0.92rem; line-height: 1.3;
    color: rgba(230, 238, 255, 0.92);
  }

  /* Diary carousel card accent colors */
  .diary-custody-track .cc-card:nth-child(1) { --sys-node-color: #22D3EE; }
  .diary-custody-track .cc-card:nth-child(2) { --sys-node-color: #10B981; }
  .diary-custody-track .cc-card:nth-child(3) { --sys-node-color: #F59E0B; }
  .diary-custody-track .cc-card .lane-kicker { color: var(--sys-node-color); }
  .diary-custody-track .cc-card .cc-inner {
    border-top: 2px solid var(--sys-node-color, rgba(255,255,255,0.08));
    height: 100%; min-height: 160px;
    padding: 18px 16px; font-size: 0.88rem;
  }

  .diary-meaning-track .cc-card:nth-child(1) { --sys-node-color: #F59E0B; }
  .diary-meaning-track .cc-card:nth-child(2) { --sys-node-color: #10B981; }
  .diary-meaning-track .cc-card:nth-child(3) { --sys-node-color: #A855F7; }
  .diary-meaning-track .cc-card .meaning-kicker { color: var(--sys-node-color); }
  .diary-meaning-track .cc-card .cc-inner {
    border-top: 2px solid var(--sys-node-color, rgba(255,255,255,0.08));
    height: 100%; min-height: 160px;
    padding: 18px 16px; font-size: 0.88rem;
  }

  /* Protection signals: 2x2 grid on mobile */
  .diary-body .diary-protection-signals {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .diary-body .diary-protection-signal {
    min-height: 0;
    padding: 14px;
    font-size: 0.88rem;
  }
  .diary-body .diary-protection-signal .material-icons {
    font-size: 1.2rem;
  }

  /* Diary carousel wrap */
  .diary-body .diary-carousel-wrap { /* grouping wrapper only */ }

  .astral-body .astral-hero-stage,
  .astral-body .astral-play-stage,
  .astral-body .astral-tone-stage,
  .astral-body .astral-social-stage {
    grid-template-columns: 1fr;
    padding: 22px 18px;
    border-radius: 26px;
  }
  .astral-body .astral-hero-copy h1,
  .astral-body .astral-stage-copy h2 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(2.12rem, 10vw, 3.08rem);
  }
  .astral-body .astral-hero-copy,
  .astral-body .astral-stage-copy { text-align: center; }
  .astral-body .astral-hero-field {
    min-height: 460px;
    border-radius: 24px;
  }
  .astral-body .astral-play-chamber,
  .astral-body .astral-tone-chamber,
  .astral-body .astral-social-chamber {
    grid-template-columns: 1fr;
  }
  .astral-body .astral-play-core,
  .astral-body .astral-play-lane,
  .astral-body .astral-tone-core,
  .astral-body .astral-tone-lane,
  .astral-body .astral-social-core,
  .astral-body .astral-social-signal {
    grid-column: auto;
    min-height: 0;
    padding: 18px;
    border-radius: 22px;
  }
  .astral-body .astral-play-lane.lane-focus {
    transform: none;
  }
  .astral-body .astral-hero-actions {
    flex-direction: column;
  }
  .astral-body .astral-hero-actions .button {
    width: 100%;
  }
  .astral-body .astral-hud-chip {
    padding: 8px 10px;
    border-radius: 14px;
  }
  .astral-body .astral-orb.orb-head {
    width: 20px;
    height: 20px;
  }
  .astral-body .astral-orb.orb-tail {
    width: 12px;
    height: 12px;
  }
  .astral-body .astral-pickup {
    width: 14px;
    height: 14px;
    left: 66%;
    top: 40%;
  }
  .astral-body .astral-hitflash {
    width: 28px;
    height: 28px;
  }

  /* ── Astral Flow v99: mobile compaction ── */
  .astral-body .astral-hero-copy h1,
  .astral-body .astral-stage-copy h2 {
    max-width: 16ch;
    font-size: clamp(1.85rem, 8.5vw, 2.6rem);
  }

  /* Play-core mobile: compact glassmorphism */
  .astral-body .astral-play-core-m {
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(156, 190, 248, 0.12);
    border-top: 3px solid rgba(168, 85, 247, 0.35);
    background: rgba(7, 15, 35, 0.64);
    backdrop-filter: blur(15px);
    text-align: center;
    margin-bottom: 8px;
  }
  .astral-body .astral-play-core-m .play-kicker {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: #A855F7;
  }
  .astral-body .astral-play-core-m strong {
    display: block; margin-top: 6px;
    font-size: 0.92rem; line-height: 1.3;
    color: rgba(230, 238, 255, 0.92);
  }

  /* Astral carousel card accent colors */
  .af-play-track .cc-card:nth-child(1) { --sys-node-color: #22D3EE; }
  .af-play-track .cc-card:nth-child(2) { --sys-node-color: #F59E0B; }
  .af-play-track .cc-card:nth-child(3) { --sys-node-color: #10B981; }
  .af-play-track .cc-card .lane-kicker { color: var(--sys-node-color); }
  .af-play-track .cc-card .cc-inner {
    border-top: 2px solid var(--sys-node-color, rgba(255,255,255,0.08));
    height: 100%; min-height: 160px;
    padding: 18px 16px; font-size: 0.88rem;
  }

  .af-tone-track .cc-card:nth-child(1) { --sys-node-color: #F59E0B; }
  .af-tone-track .cc-card:nth-child(2) { --sys-node-color: #22D3EE; }
  .af-tone-track .cc-card:nth-child(3) { --sys-node-color: #A855F7; }
  .af-tone-track .cc-card .tone-kicker { color: var(--sys-node-color); }
  .af-tone-track .cc-card .cc-inner {
    border-top: 2px solid var(--sys-node-color, rgba(255,255,255,0.08));
    height: 100%; min-height: 160px;
    padding: 18px 16px; font-size: 0.88rem;
  }

  /* Social signals: 2x2 grid on mobile */
  .astral-body .astral-social-chamber {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .astral-body .astral-social-core {
    grid-column: 1 / 3;
    padding: 16px 18px;
  }
  .astral-body .astral-social-signal {
    min-height: 140px;
    padding: 14px;
    font-size: 0.88rem;
  }
  .astral-body .astral-social-signal .material-icons {
    font-size: 1.2rem;
  }

  /* Astral carousel wrap */
  .astral-body .af-carousel-wrap { /* grouping wrapper only */ }
}
/* ========================================================
   OVERRIDE ASSOLUTO: CRONOTIPO, SISTEMA E BOTTONI
   ======================================================== */
@media (max-width: 820px) {
  /* ── 1. BOTTONI MODERNI (GLOW) ── */
  .button {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(114, 240, 222, 0.3) !important;
    border-radius: 30px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
  }
  .button:active {
    transform: scale(0.96) !important;
    background: rgba(114, 240, 222, 0.15) !important;
    border-color: #00f2ff !important;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4) !important;
  }

  /* ── DOPPIO DOM: desktop elements already killed above.
     Do NOT add display:flex/grid rules for .chronotype-case-columns,
     .chronotype-profiles-chamber, .system-map-chamber, .system-relations-chamber,
     .system-trust-signals here — those are x-scene-desktop elements and must stay hidden.
     Adding flex/grid to them causes 100vw-wide ghost rows = horizontal overflow. ── */
}