/* v56 mobile UX optimization layer */
:root{--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{max-width:100%}
.mobile-quickbar{display:none}
.mobile-nav-only{display:none!important}
.mobile-more-btn{display:none}

@media(max-width:780px){
  /* More compact first screen and clearer CTA hierarchy */
  .home-hero{min-height:auto!important}
  .home-hero .hero-copy{padding:32px 0 34px!important}
  .home-hero .hero-eyebrow{margin-bottom:10px!important;font-size:9px!important;letter-spacing:.16em!important}
  .home-hero .hero-copy h1{margin-bottom:15px!important;font-size:clamp(29px,7.8vw,37px)!important;line-height:1.42!important;letter-spacing:.035em!important}
  .home-hero .hero-text{margin-bottom:20px!important;font-size:13.5px!important;line-height:1.82!important}
  .home-hero .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .home-hero .hero-actions .primary-btn{width:100%!important;min-height:52px!important;font-size:15px!important;box-shadow:0 12px 26px rgba(102,77,167,.18)!important}
  .home-hero .hero-actions .secondary-btn{width:100%!important;min-height:43px!important;background:rgba(255,255,255,.6)!important;box-shadow:none!important;font-size:13px!important}
  .home-hero .hero-art{display:none!important}
  .home-hero .hero-tattoo-float{opacity:.42!important;transform:scale(.78)!important;transform-origin:top right!important}

  /* Compact homepage rhythm on phones */
  .service-item,.service-item:first-child,.service-item:last-child{min-height:94px!important;padding:15px 8px!important}
  .service-item h2{margin-bottom:3px!important}
  .service-item p{line-height:1.65!important}
  .home-check-section{padding:30px 0 34px!important}
  .home-check-card{gap:20px!important;padding:25px 20px!important}
  .home-check-points{gap:6px!important;margin-top:14px!important}
  .home-check-points span{padding:6px 7px!important;font-size:11px!important}
  .paths-section{padding:44px 0 48px!important}
  .path-grid{gap:13px!important}
  .path-card{min-height:0!important;padding:25px 21px 22px!important}
  .path-card .path-orb{transform:scale(.88);margin-bottom:-4px!important}
  .path-card h3{margin-top:14px!important}
  .path-card p{min-height:0!important;margin-bottom:17px!important;line-height:1.72!important}
  .trust-proof-section{padding:38px 0 42px!important}
  .certificate-section{padding:42px 0 46px!important}
  .support-resources{padding:42px 0 46px!important}
  .guidance-copy{padding:36px 22px 42px!important}

  /* Mobile navigation: keep only the highest-value paths */
  .desktop-nav-extra{display:none!important}
  .mobile-nav-only{display:block!important}
  .main-nav a{min-height:46px;display:flex!important;align-items:center!important}

  /* Fixed conversion bar for browsing pages only */
  body.has-mobile-quickbar{padding-bottom:calc(68px + var(--mobile-safe-bottom))!important}
  .mobile-quickbar{position:fixed;left:10px;right:10px;bottom:calc(8px + var(--mobile-safe-bottom));z-index:58;display:grid;grid-template-columns:1.15fr .85fr;gap:8px;padding:7px;border:1px solid rgba(125,101,181,.2);border-radius:18px;background:rgba(252,249,253,.93);box-shadow:0 12px 34px rgba(78,59,115,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .mobile-quickbar a{min-height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;font-family:"Laiti Healing","Noto Serif TC","Songti TC",serif;font-size:13px;letter-spacing:.035em;text-decoration:none}
  .mobile-quickbar .mq-check{color:#fff;background:linear-gradient(135deg,#9f84d8,#8064bf);box-shadow:0 8px 18px rgba(109,82,167,.16)}
  .mobile-quickbar .mq-line{color:#685493;border:1px solid rgba(119,94,174,.28);background:#fff}
  body.has-mobile-quickbar .music-toggle{bottom:calc(78px + var(--mobile-safe-bottom))!important}

  /* Knowledge lists: show 4 first, expand on demand */
  .section-tools .more{display:none!important}
  .article-card.mobile-collapsed{display:none!important}
  .section.is-mobile-expanded .article-card.mobile-collapsed{display:flex!important}
  .mobile-more-btn{display:block;width:100%;min-height:44px;margin-top:11px;border:1px solid rgba(126,101,184,.2);border-radius:14px;background:rgba(255,255,255,.8);color:#735e9f;font-family:"Laiti Healing","Noto Serif TC",serif;font-size:13px;letter-spacing:.04em}

  /* Public article readability */
  .article-wrap{width:min(100% - 30px,720px)!important;padding-top:32px!important;padding-bottom:68px!important}
  .article-title{font-size:clamp(30px,8vw,38px)!important;line-height:1.42!important;letter-spacing:.025em!important;margin-bottom:18px!important;text-wrap:pretty}
  .lead{font-size:15.5px!important;line-height:1.9!important;padding:17px 18px!important;margin-bottom:30px!important}
  .content p,.article-body p{font-size:16px!important;line-height:1.92!important;margin-bottom:16px!important;letter-spacing:.005em!important}
  .content h2,.article-body h2{font-size:23px!important;line-height:1.48!important;margin:36px 0 13px!important}
  .quote{margin:18px 0!important;padding:15px 17px!important;line-height:1.88!important}
  .article-links{gap:9px!important;flex-direction:column!important}
  .article-links a{width:100%!important;text-align:center!important}
  .article-visual{margin-bottom:28px!important}

  /* VIP reader readability */
  .reader{width:min(100%,760px)!important}
  .reader-inner{padding:26px 18px 90px!important}
  .reader-body h2{font-size:28px!important;line-height:1.42!important}
  .reader-summary{font-size:14px!important;line-height:1.82!important;padding:15px 16px!important}
  .reader-content p,.reader-after-suggestions p{font-size:16px!important;line-height:1.92!important;margin-bottom:16px!important}
  .practice{padding:20px 17px!important}
  .practice li{font-size:15.5px!important;line-height:1.9!important;margin-bottom:14px!important}

  /* Interactive controls: larger tap targets and iOS-safe 16px inputs */
  .answer-input,.answer-textarea,.text-field textarea,.other-field textarea,input[type="text"],input[type="number"],textarea{font-size:16px!important}
  .answer-input{min-height:54px!important}
  .answer-textarea,.text-field textarea,.other-field textarea{min-height:150px!important}
  .choice-grid span,.choice-card{min-height:54px!important}
  .form-actions{bottom:calc(8px + var(--mobile-safe-bottom))!important}
  .form-actions button{min-height:48px!important}

  /* Fortune result: keep the decorative slip, make the interpretation easier to scan */
  .oracle-slip{margin-inline:auto!important}
  .result-block{padding:17px 8px!important}
  .result-block h3{margin:6px 0 8px!important;font-size:18px!important}
  .result-block p{font-size:13.5px!important;line-height:1.82!important}
  .result-kicker{padding:5px 10px!important;font-size:10px!important}
  .teacher-box{margin-top:20px!important;padding:22px 15px!important}
  .teacher-box h3{font-size:21px!important;line-height:1.5!important}
  .teacher-box>p{font-size:12.5px!important;line-height:1.8!important}
  .teacher-box .copy-warning{font-size:14px!important}
  .teacher-actions .fortune-btn{min-height:48px!important}

  /* Better safe-area behavior in LINE / iPhone */
  .music-toggle{right:12px!important}
}

@media(max-width:390px){
  .home-hero .hero-copy h1{font-size:28px!important}
  .mobile-quickbar{left:7px;right:7px;gap:6px}
  .mobile-quickbar a{font-size:12px}
}