/* ── Nav standardization (all pages, all sizes) ── */
nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100!important;padding:1.25rem 2rem!important;display:flex!important;align-items:center!important;justify-content:space-between!important;backdrop-filter:blur(20px)!important;background:rgba(3,7,18,.6)!important;border-bottom:1px solid rgba(255,255,255,.04)!important;transition:all .3s!important}
.logo{font-weight:700!important;font-size:1.15rem!important;letter-spacing:-.03em!important;display:flex!important;align-items:center!important;gap:.5rem!important;text-decoration:none!important;color:inherit!important}
.logo-mark{width:28px!important;height:28px!important;border-radius:8px!important;font-size:.75rem!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important}
.nav-links{display:flex!important;gap:2rem!important;font-size:.875rem!important;color:var(--text2)!important}
.nav-links a:hover{color:#fff!important}
.nav-cta{padding:.5rem 1.25rem!important;border-radius:8px!important;font-size:.825rem!important;background:var(--accent)!important;color:#fff!important;font-weight:600!important;border:none!important;cursor:pointer!important;transition:all .2s!important;text-decoration:none!important;display:inline-block!important}
.nav-cta:hover{background:var(--accent2)!important;transform:translateY(-1px)!important;box-shadow:0 4px 20px rgba(99,102,241,.3)!important}
@media(max-width:768px){.nav-links{display:none!important}.nav-cta{display:none!important}.hamburger{display:block!important}}

/* 4K / Ultra-wide display scaling */
@media(min-width:2000px){
  /* Widen all content containers */
  section,.page-content{max-width:1500px!important;margin-left:auto;margin-right:auto}
  .section-header{max-width:900px!important}
  .pipeline,.modes-grid,.use-cases,.steps-grid{max-width:1500px!important}
  .comparison{max-width:1000px!important}
  .terminal-wrap,.terminal{max-width:960px!important}
  .email-form{max-width:540px!important}
  .hero-sub,.cta-section p{max-width:700px!important}

  /* Scale typography */
  .hero h1{font-size:clamp(4rem,8vw,7rem)!important}
  .hero-sub{font-size:1.4rem!important}
  .section-header h2{font-size:clamp(2.2rem,4vw,3.5rem)!important}
  .section-header p{font-size:1.2rem!important}
  .pipe-step p,.mode-card p,.use-case p,.step-card p{font-size:.95rem!important}
  .pipe-step h3,.mode-card h4,.use-case h3,.step-card h3{font-size:1.2rem!important}
  .stat-num{font-size:3rem!important}
  .stat-label{font-size:.9rem!important}
  .terminal-body{font-size:.9rem!important}
  .comp-cell{font-size:.95rem!important;padding:1.25rem 1.5rem!important}
  .cta-section h2{font-size:clamp(2.5rem,4vw,4rem)!important}
  .cta-section p{font-size:1.2rem!important}
  .email-input{font-size:1rem!important;padding:1rem 1.5rem!important}
  .btn-primary,.nav-cta{font-size:1rem!important}

  /* Spacing */
  section{padding:9rem 3rem!important}
  .stats{gap:6rem!important;padding:5rem 3rem!important}
  .hero{padding:10rem 3rem 7rem!important}
  nav{padding:1.5rem 3rem!important}
  .nav-links{gap:2.5rem!important;font-size:.95rem!important}

  /* Page content (roadmap, about, etc) */
  .page-content{max-width:1000px!important;padding-left:3rem!important;padding-right:3rem!important}
  .page-content h1{font-size:clamp(2.5rem,4vw,3.5rem)!important}
  .page-content p{font-size:1rem!important}
  .page-content h2{font-size:1.5rem!important}
  .page-content h3{font-size:1.2rem!important}
  .hero-stats .hero-headline{font-size:clamp(1.8rem,3.5vw,2.8rem)!important}

  /* Creators page */
  .idea-grid{max-width:1400px!important}
  .chat-wrap{max-width:700px!important}
  .benefit-grid{max-width:1400px!important}

  /* Business + Entrepreneurs pages (shared classes) */
  .s-inner{max-width:1400px!important}
  .s-header{max-width:850px!important}
  .s-header h2{font-size:clamp(2.2rem,3.5vw,3.2rem)!important}
  .s-header p{font-size:1.15rem!important}
  .card-grid{max-width:1400px!important}
  .cost-grid{max-width:1000px!important}
  .risk-grid{max-width:1000px!important}
  .math-grid{max-width:1000px!important}
  .timeline{max-width:900px!important}

  /* Features page (f- classes) */
  .f-inner{max-width:1400px!important}
  .f-section{padding:9rem 3rem!important}
  .f-section h2{font-size:clamp(2.2rem,3.5vw,3.2rem)!important}
  .f-section .lead{font-size:1.15rem!important;max-width:800px!important}
  .f-split{gap:5rem!important}
  .f-split-text h3{font-size:1.4rem!important}
  .f-split-text p{font-size:1rem!important}
  .f-split-visual{font-size:.82rem!important;padding:2.5rem!important}
  .f-grid{max-width:1400px!important}
  .f-card{padding:2.5rem!important}
  .f-card h3{font-size:1.15rem!important}
  .f-card p{font-size:.95rem!important}
  .f-hero h1{font-size:clamp(3.5rem,7vw,5.5rem)!important}
  .f-hero p{font-size:1.3rem!important}
  .f-quote{font-size:1rem!important}

  /* Pricing page */
  .pricing-grid{max-width:1400px!important;gap:2rem!important}
  .plan-name{font-size:1.3rem!important}
  .plan-price{font-size:2.8rem!important}
  .plan-desc{font-size:.95rem!important}
  .plan-features li{font-size:.9rem!important}
  .plan-cta{font-size:.95rem!important;padding:.9rem 2rem!important}
  .comp-table{max-width:1100px!important;margin-left:auto!important;margin-right:auto!important}
  .comp-table thead th{font-size:.8rem!important;padding:1.25rem 1.5rem!important}
  .comp-table tbody td{font-size:.9rem!important;padding:1rem 1.5rem!important}
  .faq-q{font-size:1.05rem!important}
  .faq-a{font-size:.95rem!important}

  /* Footer */
  footer{padding:4rem 3rem!important;font-size:.88rem!important}
  footer>div{max-width:1500px!important}
}

/* Intermediate scaling for 1440p / 27" monitors */
@media(min-width:1600px) and (max-width:1999px){
  section,.page-content{max-width:1280px!important;margin-left:auto;margin-right:auto}
  .pipeline,.modes-grid,.use-cases,.steps-grid{max-width:1280px!important}
  .terminal-wrap,.terminal{max-width:860px!important}
  .section-header{max-width:800px!important}

  /* Creators page */
  .idea-grid,.benefit-grid{max-width:1200px!important}

  /* Business + Entrepreneurs */
  .s-inner,.card-grid{max-width:1200px!important}

  /* Features page */
  .f-inner{max-width:1200px!important}
  .f-grid{max-width:1200px!important}

  /* Pricing page */
  .pricing-grid{max-width:1200px!important}
}

/* ═══════════ RESPONSIVE: Tablet & Small Screens ═══════════ */

/* Tablet landscape / small laptop (769-900px) — nav collapses, grids adapt */
@media(max-width:900px){
  /* Nav: 7 links don't fit below 900px — switch to hamburger */
  .nav-links{display:none!important}
  .nav-cta{display:none!important}
  .hamburger{display:block!important}

  /* Index grids */
  .pipeline{grid-template-columns:repeat(2,1fr)!important}
  .modes-grid{grid-template-columns:repeat(2,1fr)!important}
  .use-cases{grid-template-columns:1fr!important}
  .comparison{max-width:100%!important}
  .comp-row{font-size:.75rem!important}

  /* Rex grids */
  .steps-grid{grid-template-columns:1fr!important}

  /* Features */
  .f-split{grid-template-columns:1fr!important;gap:2rem!important}
  .f-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr!important;max-width:460px!important;margin-left:auto!important;margin-right:auto!important}

  /* Creators/Business/Entrepreneurs */
  .card-grid{grid-template-columns:1fr!important}
  .cost-grid{grid-template-columns:1fr!important;gap:1.5rem!important}
  .risk-grid{grid-template-columns:1fr!important}
  .math-grid{grid-template-columns:1fr!important}
  .benefit-grid{grid-template-columns:1fr!important}

  /* General */
  section{padding:5rem 1.5rem!important}
  .section-header h2{font-size:1.8rem!important}
  .terminal-wrap{max-width:100%!important}
}

/* Tablet portrait / large phone (481-768px) */
@media(max-width:768px){
  .pipeline{grid-template-columns:1fr!important}
  .modes-grid{grid-template-columns:1fr!important}
  .f-grid{grid-template-columns:1fr!important}

  /* Stats go to 2 columns */
  .stats{flex-wrap:wrap!important;gap:1.5rem 3rem!important;padding:2.5rem 1.25rem!important}

  /* Hero */
  .hero{padding:6rem 1.25rem 3rem!important;min-height:auto!important}
  .hero h1{font-size:2.2rem!important}
  .hero-sub{font-size:.95rem!important}

  /* Terminal */
  .terminal-body{font-size:.68rem!important;padding:1rem!important}

  /* Footer */
  footer{padding:2.5rem 1.25rem!important}
  footer>div{flex-direction:column!important;gap:1.5rem!important}
}

/* Small phones (321-480px) */
@media(max-width:480px){
  nav{padding:1rem 1rem!important}
  .logo{font-size:1rem!important}
  .logo-mark{width:24px!important;height:24px!important;font-size:.65rem!important}

  .hero{padding:5rem 1rem 2.5rem!important}
  .hero h1{font-size:1.8rem!important}
  .hero-sub{font-size:.85rem!important;margin:1rem 0 1.5rem!important}
  .hero-badge{font-size:.65rem!important}

  section{padding:3rem 1rem!important}
  .section-header{margin-bottom:2rem!important}
  .section-header h2{font-size:1.4rem!important}
  .section-header p{font-size:.9rem!important}

  .terminal{border-radius:10px!important}
  .terminal-body{font-size:.6rem!important;line-height:1.6!important;padding:.75rem!important}

  .stat-num{font-size:1.5rem!important}
  .stat-label{font-size:.65rem!important}
  .stats{gap:1rem 2rem!important;padding:2rem 1rem!important}

  /* Mode/pipe/use-case cards */
  .mode-card,.pipe-step,.use-case,.f-card,.step-card{padding:1.5rem 1.25rem!important}
  .mode-card h4,.pipe-step h3,.use-case h3,.step-card h3{font-size:.95rem!important}
  .mode-card p,.pipe-step p,.use-case p,.step-card p{font-size:.8rem!important}
  .mode-rex{font-size:.65rem!important;padding:6px 10px!important}

  /* CTA */
  .email-form{flex-direction:column!important}
  .email-input{font-size:.85rem!important;padding:.75rem 1rem!important}
  .btn-primary{font-size:.85rem!important;padding:.75rem 1.5rem!important}
  .cta-section h2{font-size:1.5rem!important}
  .cta-section p{font-size:.9rem!important}

  /* Features page */
  .f-section{padding:3rem 1rem!important}
  .f-section h2{font-size:1.4rem!important}
  .f-split-text h3{font-size:1.05rem!important}
  .f-split-text p{font-size:.85rem!important}
  .f-split-visual{font-size:.6rem!important;padding:1rem!important}
  .f-tag{font-size:.55rem!important}

  /* Pricing */
  .plan-price{font-size:2rem!important}
  .plan-features li{font-size:.78rem!important}
  .comp-table thead th{font-size:.6rem!important;padding:.6rem .5rem!important}
  .comp-table tbody td{font-size:.7rem!important;padding:.5rem!important}

  /* Page content (roadmap, about etc) */
  .page-content{padding:5rem 1rem 3rem!important}
  .page-content h1{font-size:1.5rem!important}
  .page-content h2{font-size:1.15rem!important}
  .page-content p{font-size:.85rem!important}

  /* Footer */
  footer{font-size:.72rem!important;padding:2rem 1rem!important}

  /* Arch callout */
  .arch-callout{padding:1.25rem!important}
  .arch-callout p{font-size:.8rem!important}
}

/* iPhone SE / smallest Android (≤320px) */
@media(max-width:360px){
  nav{padding:.85rem .75rem!important}
  .logo{font-size:.9rem!important;gap:.35rem!important}
  .logo-mark{width:22px!important;height:22px!important;font-size:.6rem!important;border-radius:6px!important}

  .hero h1{font-size:1.5rem!important}
  .hero-sub{font-size:.8rem!important}

  section{padding:2.5rem .75rem!important}
  .section-header h2{font-size:1.25rem!important}

  .terminal-body{font-size:.55rem!important;padding:.6rem!important}
  .stat-num{font-size:1.3rem!important}

  .mode-card,.pipe-step,.use-case,.f-card{padding:1.25rem 1rem!important}
  .mode-card h4,.pipe-step h3,.use-case h3{font-size:.88rem!important}
  .mode-rex{font-size:.6rem!important}

  .cta-section h2{font-size:1.3rem!important}
  .email-input{font-size:.8rem!important}
  .btn-primary{font-size:.8rem!important;padding:.7rem 1.25rem!important}

  .plan-price{font-size:1.75rem!important}
  .comp-table thead th{font-size:.55rem!important}
  .comp-table tbody td{font-size:.65rem!important}

  .page-content h1{font-size:1.3rem!important}
}

/* Mobile menu standardization (all sizes) */
.mobile-menu{display:none!important;position:fixed!important;inset:0!important;z-index:150!important;background:rgba(3,7,18,.97)!important;backdrop-filter:blur(20px)!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1.5rem!important;transition:opacity .25s!important}
.mobile-menu.open{display:flex!important;opacity:1!important}
.mobile-menu a{font-size:1.15rem!important;color:var(--text2)!important;text-decoration:none!important}
.mobile-menu a:hover{color:#fff!important}
.mobile-menu .mm-cta{padding:.75rem 2rem!important;border-radius:10px!important;background:var(--accent)!important;color:#fff!important;font-size:1rem!important;font-weight:600!important;margin-top:1rem!important;text-decoration:none!important}