/* Shared mobile layout for the standard, free-plan and character landing pages. */
.mobile-section-nav{display:none}
@media(max-width:760px){
  html{scroll-padding-top:82px;-webkit-text-size-adjust:100%}
  body{font-size:15px;line-height:1.85}
  .container{padding-inline:20px}
  .navbar{height:64px}
  .nav-container{gap:12px}
  .brand img{width:170px;height:36px}
  .navbar nav>.login-link{font-size:13px;min-height:44px;display:flex;align-items:center}
  .mobile-section-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 12px;background:#f5f7fc;border-bottom:1px solid #e2e8f2}
  .mobile-section-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 2px;font-size:13px;font-weight:700;text-decoration:none;border-radius:8px;color:var(--primary)}
  .mobile-section-nav a:active{background:#e7edfc}
  .hero{padding-top:26px}
  .hero-grid{gap:24px;grid-template-columns:minmax(0,1fr)}
  .hero-copy .eyebrow{font-size:12px;line-height:1.7;letter-spacing:0;margin-bottom:14px}
  .hero h1{font-size:clamp(34px,10vw,44px);line-height:1.35;letter-spacing:-.045em}
  .hero-subtitle{font-size:15px;line-height:1.85;margin-top:18px}
  .hero-description{font-size:14px;line-height:1.85}
  .desktop-break{display:none}
  .hero-benefits{gap:8px 14px;font-size:12px;margin-top:18px}
  .hero-benefits strong{font-size:14px}
  .hero-actions{margin-top:20px;gap:8px}
  .hero-actions .btn,.btn{min-height:52px;font-size:15px;padding:14px 16px;border-radius:10px;text-align:center}
  .hero-actions .text-link{font-size:14px;min-height:44px}
  .hero-copy .microcopy,.microcopy{font-size:12px;line-height:1.8}
  .hero-fine{font-size:12px;line-height:1.85;margin-top:10px}
  .hero-visual>img{aspect-ratio:1.15/1;object-position:50% 38%}
  .photo-caption{position:relative;inset:auto;margin:-20px 12px 0;padding:14px;gap:10px}
  .photo-caption small{font-size:12px}
  .photo-caption strong{font-size:15px}
  .salon-types{font-size:12px;line-height:2;margin-top:26px}
  .salon-types .salon-types-note{font-size:12px}
  .section{padding-block:48px}
  .section-heading{margin-bottom:24px}
  .section-heading h2{font-size:26px;line-height:1.55;letter-spacing:-.025em}
  .section-lead,.body-copy{font-size:15px;line-height:1.9}
  .eyebrow{font-size:12px;letter-spacing:.08em}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-tile{padding:20px 10px}
  .feature-tile h3{font-size:14px;line-height:1.6}
  .feature-tile p{font-size:13px;line-height:1.7}
  .section-note,.ai-note,.pricing-notes{font-size:12px;line-height:1.9}
  .problem-grid li{font-size:15px;padding:16px;align-items:flex-start}
  .problem-answer{font-size:21px}
  .detail-card{padding:24px 20px}
  .detail-card h3{font-size:23px}
  .detail-card>p:not(.detail-kicker){font-size:15px;line-height:1.9}
  .detail-kicker,.detail-bottom,.plan-label{font-size:12px}
  .detail-top{gap:12px}
  .customer-asset{padding:22px 20px}
  .customer-asset p,.ai-flow p,.steps p{font-size:15px;line-height:1.85}
  .unify-visual{padding:20px 16px}
  .unify-labels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .unify-labels span{padding:10px 4px;font-size:13px}
  .unify-brand{padding:18px 10px}
  .unify-brand img{width:100%;max-width:240px;height:auto;aspect-ratio:5/1}
  .ai-intro>div>p:not(.eyebrow):not(.ai-lead){font-size:15px}
  .ai-flow li{padding:22px 20px}
  .steps{gap:20px}
  .trial-panel p{font-size:13px}
  .trial-panel .btn{font-size:15px}
  .plan-card,.plan-card.featured{padding:24px 22px}
  .plan-description,.plan-card ul{font-size:15px;line-height:1.85}
  .plan-step,.plan-note,.plan-price span{font-size:12px}
  .plan-card li{margin-block:7px}
  .plan-card .btn{font-size:15px;min-height:50px}
  .plan-price span{margin-left:8px}
  .faq-list summary{font-size:15px;line-height:1.8;padding-block:20px}
  .faq-list details>p{font-size:15px;line-height:1.9;padding-right:8px}
  .final-cta .container>p:not(.eyebrow):not(.microcopy){font-size:15px}
  .final-cta .btn{font-size:15px}
  .final-cta .microcopy{font-size:12px}
  .case-summary,.case-result{padding:24px 20px}
  .case-summary>p,.case-result>p:not(.case-result-label):not(.case-owner){font-size:15px}
  .case-summary dl div{font-size:14px}
  .case-number,.case-owner,.case-badges span{font-size:12px}
  .seo-option{padding:22px 20px}
  .seo-option p,.seo-cards p{font-size:15px}
  .seo-directory-links{gap:10px}
  .seo-directory-links a{font-size:15px;padding:16px}
  .text-link{font-size:14px;min-height:44px}
  .footer-brand p,.footer-links li,.footer-links h4{font-size:14px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;line-height:1.7}
  .footer-links li{margin:2px 0}
  .footer-bottom{font-size:12px}
  .floating-cta{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .floating-cta p{font-size:12px}
  .floating-cta small{font-size:10px}
  .floating-cta .btn{font-size:13px;min-height:48px;padding:12px}
  .quick-comparison>p,.quick-plan-table,.comparison-table{font-size:14px}
  .quick-plan-table th small{font-size:11px}
  .comparison-table td{gap:12px}
  .comparison-table td:before{min-width:70px}
}
@media(max-width:360px){
  .container{padding-inline:16px}
  .hero h1{font-size:34px}
  .mobile-section-nav{padding-inline:8px}
  .mobile-section-nav a{font-size:12px}
  .floating-cta p{display:none}
  .floating-cta .btn{width:100%}
}
/* Character guidance stays legible without covering as much of the page. */
@media(max-width:760px){
  .sa-story{padding:28px 20px 40px;gap:24px;grid-template-columns:minmax(0,1fr)}
  .sa-story-copy>p:not(.sa-eyebrow),.sa-scenes p,.sa-guide p{font-size:15px;line-height:1.85}
  .sa-watch{width:100%;min-height:52px;font-size:15px}
  .sa-watch small,.sa-story-note{font-size:12px}
  .sa-scenes{max-width:none;grid-template-columns:minmax(0,1fr);margin-block:28px}
  .sa-scenes button,.sa-text,.sa-pills button{min-height:44px;font-size:14px}
  .sa-guide{margin-inline:0;padding:20px 16px;gap:12px}
  .sa-guide>img{width:64px;height:90px}
  .sa-guide h3{font-size:18px}
  .sa-guide small{font-size:12px}
  .hero-visual:has(.sa-hero-coach){margin-bottom:0}
  .sa-hero-coach{position:relative;inset:auto;margin-top:-12px;gap:0;align-items:flex-end}
  .sa-hero-coach-copy{padding:16px;z-index:1}
  .sa-hero-coach-copy p{font-size:14px}
  .sa-hero-coach-copy b{font-size:15px}
  .sa-coach-label{font-size:12px;letter-spacing:0}
  .sa-hero-coach-copy button{font-size:14px;min-height:44px;padding-block:8px}
  .sa-coach-chart small,.sa-coach-note{font-size:11px}
  .sa-coach-chart small{width:55px}
  .sa-hero-ag{width:95px;height:155px}
  .sa-face-launcher{right:12px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .sa-face-circle{width:76px;height:76px;border-width:3px}
  .sa-face-label{font-size:11px;padding:6px 10px;bottom:calc(100% + 5px)}
  .sa-face-play{width:24px;height:24px;font-size:10px}
  .sa-presenter{inset:auto 8px 8px;width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;border-radius:20px;padding-bottom:env(safe-area-inset-bottom)}
  .sa-presenter-head{position:sticky;top:0;z-index:5;padding:10px 16px;background:#f3f5ff}
  .sa-presenter-head b{font-size:15px}
  .sa-presenter-head small{font-size:11px}
  #sa-close{min-width:44px;min-height:44px}
  .sa-video-stage{height:clamp(180px,28dvh,260px)}
  .sa-subtitle{font-size:14px;line-height:1.7;padding:10px 12px}
  .sa-video-controls{padding:2px 12px;gap:8px}
  .sa-video-controls button{min-height:44px;font-size:13px}
  .sa-video-controls span{font-size:12px}
  #sa-sound{min-height:44px;font-size:12px}
  .sa-presenter-body{padding:16px}
  .sa-presenter-body h3{font-size:17px}
  .sa-presenter-body>p{font-size:14px}
  .sa-video-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sa-video-choices button{font-size:14px;padding:10px 8px;min-height:46px;border-radius:12px;font-family:inherit}
  .sa-line-contact>button{font-size:14px;min-height:52px;padding:12px}
  .sa-line-contact>p,.sa-line-contact>small{font-size:12px;line-height:1.8}
  #sa-jump{min-height:44px;display:flex;align-items:center;font-size:14px}
  .sa-transcript summary{font-size:14px;min-height:44px;padding-block:10px}
  .sa-transcript p{font-size:14px}
  .sa-video-note{font-size:11px!important}
}