/* PawFlow — мобильная оптимизация. Подключается после refinements.css. */

/* ===== <= 900px: планшет и уже ===== */
@media (max-width: 900px) {
  :root{--header-height:64px}

  body{font-size:15px}

  /* Хедер: логотип + кнопка, меню прячем */
  .site-header{padding:0 18px}
  .site-header nav,.header-actions .login-link{display:none}
  .site-header .button.small{padding:0 16px;height:42px}

  /* Секции дышат по ширине экрана */
  .section{padding:44px 18px;min-height:auto}
  .product{height:auto;min-height:0}
  .demo-stage{min-height:0;flex:none}
  .section-top{flex-wrap:wrap;gap:8px}
  .section-heading h2{font-size:clamp(30px,8.4vw,42px)}
  .section-heading p{font-size:14px}
  .section-top .eyebrow{font-size:10px}

  /* Hero: на весь стартовый экран, без дублирующих кнопок и цены */
  .hero{height:auto;min-height:100svh}
  .hero-copy{padding:calc(28px + var(--header-height)) 18px 120px;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start}
  .hero h1{font-size:clamp(44px,11.5vw,70px)}
  .hero .intro{font-size:15px}
  .hero .actions{display:none}
  .hero-note{display:none}
  .hero-bottom{left:18px;right:18px;bottom:18px;flex-wrap:wrap;gap:8px 16px;padding-top:14px}
  .hero-bottom a span{margin-left:8px}
  .hero-bottom a[href="#pricing"]{display:none}

  /* Табы демо */
  .product-tabs{flex-wrap:wrap;gap:8px}
  .product-tabs button{padding:10px 14px;font-size:12px}

  /* Pet */
  .pet-layout{grid-template-columns:1fr;gap:36px}
  .pet-layout h2{font-size:clamp(30px,8.4vw,42px)}
  .text-link{gap:14px}
  .care-story{width:100%;max-width:420px}
  .object-scene{width:100%;max-width:370px}
  .object-scene img{width:min(70%,300px)}
  .pet-layout img,.pet-photo img,.care-story img{max-width:100%}
  .pet-copy h2{font-size:clamp(30px,8.4vw,42px)}

  /* Family */
  .family-layout{grid-template-columns:1fr;gap:40px}
  .family-steps{display:grid;gap:10px}
  .orbit-label{display:none}
  .phone{transform:none;margin:10px auto 0}

  /* Operations / marquee */
  .feature-card{flex:0 0 300px;min-height:auto;padding:20px}
  .operations-bottom{flex-wrap:wrap;gap:12px}
  .features-grid{grid-template-columns:1fr}
  .feature-card h3{font-size:20px}

  /* Pricing */
  .pricing-layout{grid-template-columns:1fr;gap:36px;align-items:start}
  .price-card{padding:24px 20px}
  .price-number{font-size:64px}
  .pricing-questions{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .included{gap:10px;font-size:14px}

  /* Footer */
  .footer-main{flex-direction:column;align-items:flex-start;gap:22px}
  .footer-main .button{width:100%;max-width:320px;min-width:0}
  .footer-main h2{font-size:clamp(34px,9vw,52px)}
  .footer-info{grid-template-columns:1fr;gap:24px}
  .footer-wordmark{font-size:clamp(30px,9.2vw,194px);flex-wrap:nowrap;justify-content:center;white-space:nowrap;letter-spacing:-.02em}
  .footer-bottom{flex-wrap:wrap;gap:8px 18px;font-size:11px}

  /* Документы */
  .legal-content{padding:36px 18px 70px}
  .legal-content h2{font-size:24px}
  .legal-content p{font-size:14px}

  /* Диалоги и cookie */
  dialog{width:auto;max-width:calc(100vw - 24px);padding:28px 20px}
  .cookie-notice{left:12px;width:calc(100vw - 24px);padding:18px}
}

/* ===== <= 600px: телефоны ===== */
@media (max-width: 600px) {
  body{font-size:14px;min-width:0}

  .site-header .brand{font-size:24px}
  .site-header .brand img{width:32px;height:32px}
  .site-header .button.small{font-size:12px;padding:0 14px}

  .hero{min-height:560px}
  .hero h1{font-size:clamp(40px,12vw,52px)}
  .hero .intro{font-size:14px}
  .hero-dog{top:auto;bottom:0;right:0;left:0;width:100%;height:52svh;object-fit:cover;object-position:center}
  .hero-shade{background:linear-gradient(0deg,#151515 0%,#1515158f 34%,transparent 68%)}

  .section{padding:38px 16px}
  .section-heading h2{font-size:30px}

  .feature-card{flex:0 0 260px}
  .family-steps button{padding:14px}
  .family-steps button div b{font-size:14px}

  .price-number{font-size:54px}
  .stepper{gap:8px}
  .stepper input{width:56px}

  .footer-wordmark{font-size:clamp(28px,8.6vw,120px)}

  dialog{padding:24px 16px}
  dialog h2{font-size:26px}
}

/* ===== очень узкие ===== */
@media (max-width: 360px) {
  .hero h1{font-size:38px}
  .site-header .brand{font-size:21px}
}