/* ============================================================================
   Sema PTA landing — 12 — Responsive rules (all @media queries)
   ----------------------------------------------------------------------------
   To edit this section, open css/responsive.css. All rules are grouped here.
   ============================================================================ */

/* ========== Responsive ========== */

@media (max-width: 1000px) {
    .hero {
      grid-template-columns: 1fr;
      padding: 100px 20px 60px;
      gap: 32px;
    }
    .hero-right {
      aspect-ratio: 1;
      order: -1;
      max-height: 480px;
    }
    header nav { display: none; }
    header { padding: 10px 12px 10px 16px; }
    h1 { font-size: clamp(40px, 11vw, 64px); }
    .scroll-hint { display: none; }
  }

@media (max-width: 560px) {
    header nav { display: none; }
    .header-cta { padding: 8px 14px; font-size: 13px; }
    .form { flex-direction: column; border-radius: 20px; padding: 8px; }
    .form input { padding: 12px 14px; }
    .form button { border-radius: 100px; padding: 12px; }
    .badges { gap: 6px; }
    .badge { padding: 6px 10px; font-size: 11px; }

    /* --- Hero graph mobile fixes --- */
    .hud-top { flex-wrap: wrap; gap: 6px; }
    .hud-top .meta { font-size: 10px; }
    .insight { max-width: none; font-size: 12px; }
    .insight-text { font-size: 12px; line-height: 1.45; }
    /* Move legend to top so it doesn't overlap the insight card */
    .legend {
      top: 60px !important;
      bottom: auto !important;
      right: 12px !important;
      max-width: 120px;
    }
    .legend .item { font-size: 9px; padding: 3px 6px; }
    .legend .swatch { width: 6px; height: 6px; }

    /* --- Story visual: give it real height on mobile --- */
    .story-visual {
      width: 240px; height: 240px;
      max-width: 240px;
    }
    .story-visual::after { font-size: 64px; }

    /* --- Privacy diagram: on mobile stack devices vertically --- */
    .privacy-diagram { padding: 20px 12px; min-height: 0; }
    .pd-devices { grid-template-columns: 1fr; gap: 20px; }
    .pd-phone .pd-screen { max-width: 140px; margin: 0 auto; }
    .pd-screen { max-width: 240px; margin: 0 auto; }
    /* dead: keep placeholder to avoid breaking following mobile block */
    .__pd_mobile_placeholder__ {
      position: static !important; margin: 4px auto;
      padding: 4px 10px; font-size: 9px;
      display: inline-flex; z-index: 2;
    }

    /* --- Demo heading: nowrap for the counter --- */
    

    /* --- Footer: show links, stack them --- */
    footer.foot nav { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
    footer.foot nav a { margin: 0; font-size: 13px; }
  }

/* ============ Mobile ============ */

@media (max-width: 900px) {
    section.block { padding: 80px 20px; }
    .how-grid { grid-template-columns: 1fr; }
    .how-arrow { display: none; }
    .features-bento { grid-template-columns: 1fr; }
    .feat-wide, .feat-md, .feat-sm { grid-column: span 1; }
    
    .privacy { grid-template-columns: 1fr; padding: 40px 28px; gap: 40px; }
    .privacy-diagram { min-height: 0; }
    .story-wrap { padding-top: 24px; }
    .story-catwrap { width: 200px; height: 200px; margin-bottom: 24px; }
    .story-catwrap img { width: 100%; height: 100%; }
    .roadmap-track { grid-template-columns: repeat(4, 280px); min-width: unset; }
    footer.foot { flex-direction: column; gap: 20px; padding: 40px 20px; }
    footer.foot nav a { margin: 0 12px; }
    .cta-block { padding: 70px 20px; }
  }

/* HERO-A responsive */

@media (max-width: 900px) {
    .heroA { padding: 90px 20px 32px; }
    .heroA-slogan { font-size: clamp(44px, 13vw, 88px); letter-spacing: -0.03em; }
    .heroA-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
    .heroA-tag { max-width: 100%; }
    .heroA-scroll { align-self: flex-start; }
  }

@media (max-width: 640px) {
    .heroA {
      padding: 84px 16px 28px;
      min-height: 100vh;
      min-height: 100svh;
    }
    .heroA-topmeta {
      font-size: 10px;
      letter-spacing: 0.12em;
      padding: 7px 12px;
    }
    .heroA-slogan { font-size: clamp(40px, 14vw, 72px); }
    .heroA-tag { font-size: 11px; letter-spacing: 0.06em; }
    .heroA-scroll { font-size: 11px; letter-spacing: 0.05em; }
  }

@media (max-width: 380px) {
    .heroA { padding: 76px 14px 24px; }
    .heroA-topmeta { font-size: 9px; padding: 6px 10px; }
    .heroA-topmeta .heroA-pulse { width: 5px; height: 5px; }
    .heroA-slogan { font-size: clamp(36px, 13vw, 56px); }
  }

/* short landscape phones */

@media (max-height: 500px) and (orientation: landscape) {
    .heroA { min-height: 100vh; padding: 60px 6vw 24px; }
    .heroA-slogan { font-size: clamp(32px, 8vw, 72px); }
    .heroA-topmeta { top: 16px; left: 16px; }
    .heroA-foot { flex-direction: row; }
  }

/* ultrawide displays */

@media (min-width: 2000px) {
    .heroA {
      padding: 140px 8vw 60px;
    }
    .heroA-slogan {
      font-size: clamp(180px, 11.5vw, 260px);
      max-width: 1720px;
    }
  }

/* ============================================================================
     STORY B — RESPONSIVE
     ============================================================================ */
/* tablets */

@media (max-width: 900px) {
    .storyB { padding: 104px 16px 48px; }
    .stage-canvas {
      aspect-ratio: 4 / 3;
      max-height: 56vh;
    }
    .snote { width: clamp(120px, 28%, 180px); padding: 10px 12px; font-size: 11px; }
    .snote-title { font-size: 11px; }
    .snote-body { font-size: 10px; }
    .stage-draft, .stage-guide {
      top: 6%; right: 4%;
      width: min(58%, 340px);
      padding: 12px 14px;
    }
    .stage-linktag { font-size: 11px; padding: 6px 10px; }
    .storyB-topbar { flex-direction: row; }
  }

/* small tablets / large phones */

@media (max-width: 640px) {
    .storyB { padding: 40px 14px 40px; }
    .stage-canvas {
      aspect-ratio: 3 / 4;
      max-height: none;
      height: 78vh;
      min-height: 560px;
    }
    /* re-layout notes: vertical stack, cramped positions won't fit → grid */
    .sn-a { top: 3%;  left: 3%; width: 45%; }
    .sn-b { top: 3%;  right: 3%; left: auto; width: 45%; }
    .sn-c { top: 22%; left: 3%; width: 45%; }
    .sn-d { top: 22%; right: 3%; left: auto; width: 45%; }
    .sn-e { top: 42%; left: 3%; width: 45%; }
    .sn-f { top: 42%; right: 3%; left: auto; width: 45%; }
    .sn-g { top: 62%; left: 50%; transform: translateX(-50%) translateY(8px) scale(0.96); width: 66%; }
    .storyB[data-phase="1"] .sn-g,
    .storyB[data-phase="2"] .sn-g,
    .storyB[data-phase="3"] .sn-g,
    .storyB[data-phase="4"] .sn-g,
    .storyB[data-phase="5"] .sn-g,
    .storyB[data-phase="5"] .sn-g,
    .storyB[data-phase="6"] .sn-g {
      transform: translateX(-50%) translateY(0) scale(1);
    }
    .stage-draft, .stage-guide {
      top: auto;
      bottom: 3%;
      right: 3%;
      left: 3%;
      width: auto;
    }
    
    .cluster-label { font-size: 9px; padding: 4px 8px; }
    .cluster-code { top: 12%; left: 34%; }
    .cluster-bio  { top: 33%; left: 34%; }
    .cluster-body { top: 53%; left: 34%; }
    .cluster-arch { top: 33%; right: 34%; }
    .snote-notif {
      width: min(240px, 55%);
      font-size: 10px;
      padding: 8px 10px;
    }
    .scap h3 { font-size: clamp(20px, 6vw, 28px); }
    .scap p { font-size: 13px; }
    .storyB-controls { flex-wrap: wrap; }
    .sctrl-dots { order: 3; width: 100%; margin-top: 4px; }
    .sdot { padding: 6px 10px; font-size: 10px; }
    .storyB-eye { font-size: 10px; }
  }

/* tiny phones */

@media (max-width: 380px) {
    .snote { padding: 8px 10px; font-size: 10px; }
    .snote-title { font-size: 10px; }
    .snote-body { display: none; }
    .stage-draft-line { height: 5px; margin-bottom: 6px; }
    .stage-guide-step { font-size: 11px; }
  }

/* ultrawide */

@media (min-width: 2000px) {
    .storyB-container { max-width: 1720px; }
    .stage-canvas { max-height: 68vh; }
    .scap h3 { font-size: 48px; }
    .scap p { font-size: 18px; }
  }

/* reduced motion */

@media (prefers-reduced-motion: reduce) {
    .stage-lines .sln { animation: none !important; }
    .snote,
  .stage-draft,
  .stage-guide,
  .snote-notif,
  .cluster-label,
  .scap {
      transition-duration: 0.001s !important;
    }
    .snote-title[data-text]::before,
  .snote-body[data-text]::before,
  .stage-draft-title[data-text]::before,
  .stage-draft-line[data-text]::before,
  .stage-guide-step .gtxt[data-text]::before {
      transition-duration: 0.001s !important;
      max-width: 100% !important;
    }
  }

@media (max-width: 900px) {
    .storyB-stage { grid-template-columns: 1fr; }
    .storyB-canvas { height: 320px; }
    
  }