/* KAGE ROOT V1.13 — mobile-first usability layer
   Adds responsive refinements without changing the approved desktop artwork. */
html{scroll-padding-top:14px}
body[data-v13-page]{max-width:100%;overflow-wrap:break-word}
body[data-v13-page] img,body[data-v13-page] svg,body[data-v13-page] video{max-width:100%}
body[data-v13-page] audio{max-width:100%;min-width:0}
body[data-v13-page] :is(a,button,summary,input,textarea):focus-visible{outline:3px solid #e2c47a;outline-offset:3px}
body[data-v13-page] :is(a,button,summary){-webkit-tap-highlight-color:rgba(104,224,128,.2)}

@media (max-width:820px){
  /* Main landing page: readable hero, comfortable cards, tap-friendly links */
  body[data-v13-page="index"] .hero{min-height:580px;padding:108px 20px 48px;background-position:64% center}
  body[data-v13-page="index"] .hero h1{margin-top:26px;font-size:clamp(42px,11.2vw,62px);line-height:.97;letter-spacing:-1.2px;max-width:640px}
  body[data-v13-page="index"] .hero-copy{font-size:16px;line-height:1.65}
  body[data-v13-page="index"] .brand{max-width:calc(100% - 30px);font-size:15px;letter-spacing:4px}
  body[data-v13-page="index"] .utility-menu{top:66px;right:16px}
  body[data-v13-page="index"] .utility-menu summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px}
  body[data-v13-page="index"] .menu-panel a{min-height:46px;display:flex;align-items:center}
  body[data-v13-page="index"] .button{min-height:52px;padding-inline:22px;font-size:13px;letter-spacing:1.2px}
  body[data-v13-page="index"] .section{padding:44px 16px}
  body[data-v13-page="index"] .section-title{font-size:clamp(27px,8.5vw,35px);letter-spacing:1.3px}
  body[data-v13-page="index"] .card{min-height:204px;height:auto}
  body[data-v13-page="index"] .content{min-height:204px;padding:64px 18px 18px}
  body[data-v13-page="index"] .art{opacity:.58}
  body[data-v13-page="index"] .card p{font-size:13.5px;line-height:1.5;max-width:96%}
  body[data-v13-page="index"] .card h2{font-size:21px;letter-spacing:1.4px}
  body[data-v13-page="index"] .icon{top:13px;left:16px;width:39px;height:39px}
  body[data-v13-page="index"] .explore{font-size:11px;letter-spacing:1.1px}
  body[data-v13-page="index"] .small{min-height:198px;padding:23px 19px}
  body[data-v13-page="index"] .small h2{font-size:25px;letter-spacing:1.2px}
  body[data-v13-page="index"] .social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px}

  /* Shared page heroes, where some headings were hardcoded 48px at 320px. */
  body[data-v13-page="tools"] .hero,
  body[data-v13-page="body"] .hero,
  body[data-v13-page="start-here"] .hero,
  body[data-v13-page="spirit"] .hero{min-height:270px;padding:63px 16px 34px}
  body[data-v13-page="tools"] .hero h1,
  body[data-v13-page="body"] .hero h1,
  body[data-v13-page="start-here"] .hero h1,
  body[data-v13-page="spirit"] .hero h1{font-size:clamp(35px,10vw,55px);line-height:1.04;margin:42px 0 12px;letter-spacing:-1px}
  body[data-v13-page="tools"] .hero p,
  body[data-v13-page="body"] .hero p,
  body[data-v13-page="start-here"] .hero p,
  body[data-v13-page="spirit"] .hero p{font-size:15px;line-height:1.55}
  body[data-v13-page="tools"] .brand,
  body[data-v13-page="body"] .brand,
  body[data-v13-page="start-here"] .brand,
  body[data-v13-page="spirit"] .brand{font-size:13px;letter-spacing:4px;white-space:nowrap}

  /* Rooted Tools: intro media no longer overwhelms the experience on a phone. */
  body[data-v13-page="tools"] .wrap{padding:24px 14px 54px}
  body[data-v13-page="tools"] .intro-card{gap:10px;padding:15px}
  body[data-v13-page="tools"] .cover{max-width:260px;max-height:280px;object-fit:cover;margin:0 auto}
  body[data-v13-page="tools"] .intro-copy{padding:4px 2px 11px}
  body[data-v13-page="tools"] .intro-copy h2{font-size:clamp(29px,8.2vw,43px);line-height:1.07}
  body[data-v13-page="tools"] .intro-card p{font-size:15px}
  body[data-v13-page="tools"] .take{margin:39px 0 18px}
  body[data-v13-page="tools"] .take h2{font-size:clamp(27px,7.5vw,36px);letter-spacing:1px}
  body[data-v13-page="tools"] .take p{font-size:15px}
  body[data-v13-page="tools"] .journeys{gap:11px;margin:22px 0 18px}
  body[data-v13-page="tools"] .journey{padding:19px 17px;min-height:0}
  body[data-v13-page="tools"] .journey h3{font-size:20px;margin:7px 0}
  body[data-v13-page="tools"] .journey p{font-size:14px;margin:0;line-height:1.55}
  body[data-v13-page="tools"] .go{display:inline-block;margin-top:14px;font-size:12px}
  body[data-v13-page="tools"] .diary{margin-top:21px;padding:18px}
  body[data-v13-page="tools"] .diary a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;font-size:12px}

  /* Start Here: make the personal message easy to read on small devices. */
  body[data-v13-page="start-here"] .wrap{padding:30px 15px 55px}
  body[data-v13-page="start-here"] .story{padding:24px 19px}
  body[data-v13-page="start-here"] .story h2{font-size:clamp(24px,7vw,31px);letter-spacing:.7px}
  body[data-v13-page="start-here"] .story p{font-size:16px;line-height:1.7}
  body[data-v13-page="start-here"] .statement{padding-left:13px}
  body[data-v13-page="start-here"] .tools-cta{width:100%;text-align:center}
  body[data-v13-page="start-here"] .choose h2{font-size:29px}
  body[data-v13-page="start-here"] .route{padding:19px 18px;min-height:0}

  /* Body / PDFs: make download links look like comfortably tappable actions. */
  body[data-v13-page="body"] .wrap{padding:32px 15px 56px}
  body[data-v13-page="body"] .intro h2{font-size:clamp(27px,7vw,34px);letter-spacing:1px}
  body[data-v13-page="body"] .route{padding:24px 20px}
  body[data-v13-page="body"] .route h3{font-size:23px}
  body[data-v13-page="body"] .guide-links{gap:10px;padding-top:17px}
  body[data-v13-page="body"] .guide-link{display:flex;align-items:center;min-height:48px;padding:12px 14px;border-radius:11px;border:1px solid rgba(199,163,90,.48);background:rgba(180,137,66,.08);font-size:12px;letter-spacing:.7px;line-height:1.45}

  /* Spirit / listening: keep players, titles, and albums inside phone width. */
  body[data-v13-page="spirit"] .wrap{padding:34px 15px 62px}
  body[data-v13-page="spirit"] .doors{gap:12px}
  body[data-v13-page="spirit"] .album,
  body[data-v13-page="spirit"] .collection-card{min-width:0;gap:17px;padding:18px}
  body[data-v13-page="spirit"] .album-copy{min-width:0}
  body[data-v13-page="spirit"] .album h3{font-size:clamp(26px,7vw,34px);letter-spacing:.6px;overflow-wrap:anywhere}
  body[data-v13-page="spirit"] .album .cover{max-width:290px;margin:auto}
  body[data-v13-page="spirit"] .track{padding:13px}
  body[data-v13-page="spirit"] .track-top{gap:10px;min-width:0}
  body[data-v13-page="spirit"] .track-num{width:32px;height:32px;flex-shrink:0}
  body[data-v13-page="spirit"] .track-title{font-size:14px;line-height:1.4;letter-spacing:.2px;overflow-wrap:anywhere}
  body[data-v13-page="spirit"] audio{display:block;width:100%}
  body[data-v13-page="spirit"] .voice-grid{gap:11px}
  body[data-v13-page="spirit"] .media-card{padding:14px}
  body[data-v13-page="spirit"] .album-toggle,
  body[data-v13-page="spirit"] .lesson-toggle,
  body[data-v13-page="spirit"] .play-all{min-height:46px}

  /* Interactive tools and Recovery: controls stay comfortable, no horizontal drag. */
  body[data-v13-page="recovery"] .wrap,
  body[data-v13-page="seasons"] .wrap,
  body[data-v13-page="tree"] .wrap{padding:20px 13px 65px}
  body[data-v13-page="recovery"] h1,
  body[data-v13-page="seasons"] h1,
  body[data-v13-page="tree"] h1{font-size:clamp(35px,10vw,54px);letter-spacing:-1px;overflow-wrap:break-word}
  body[data-v13-page="recovery"] .topnav,
  body[data-v13-page="seasons"] .topnav,
  body[data-v13-page="tree"] .topnav{margin-bottom:24px}
  body[data-v13-page="recovery"] .topnav a,
  body[data-v13-page="seasons"] .topnav a,
  body[data-v13-page="tree"] .topnav a{min-height:44px;display:inline-flex;align-items:center}
  body[data-v13-page="recovery"] .topnav .brand,
  body[data-v13-page="seasons"] .topnav .brand,
  body[data-v13-page="tree"] .topnav .brand{font-size:12px;letter-spacing:2px}
  body[data-v13-page="recovery"] .lead,
  body[data-v13-page="seasons"] .lead,
  body[data-v13-page="tree"] .lead{font-size:16px;line-height:1.55}
  body[data-v13-page="recovery"] .actions,
  body[data-v13-page="seasons"] .actions,
  body[data-v13-page="tree"] .actions{gap:9px}
  body[data-v13-page="recovery"] .actions :is(button,.btn),
  body[data-v13-page="seasons"] .actions :is(button,.btn),
  body[data-v13-page="tree"] .actions :is(button,.btn){min-height:48px;white-space:normal;line-height:1.25;text-align:center;padding:10px 12px;flex:1 1 120px;min-width:0}
  body[data-v13-page="recovery"] #recoveryCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  body[data-v13-page="recovery"] #recoveryCards .card-click{min-height:115px;padding:11px;gap:4px;justify-content:center}
  body[data-v13-page="recovery"] #recoveryCards .pic{font-size:27px}
  body[data-v13-page="recovery"] #recoveryCards strong{font-size:13px;line-height:1.25}
  body[data-v13-page="recovery"] #recoveryCards .small{font-size:10px;letter-spacing:.4px}
  body[data-v13-page="recovery"] #activeRecovery{padding:17px;scroll-margin-top:10px}
  body[data-v13-page="recovery"] #activeRecovery h2{font-size:clamp(25px,7vw,37px);line-height:1.15}
  body[data-v13-page="recovery"] .temperature-tabs button{flex:1 1 125px}
  body[data-v13-page="recovery"] .temperature-guide{padding:14px}
  body[data-v13-page="recovery"] .breath-ring{max-width:50vw;max-height:50vw}
  body[data-v13-page="recovery"] .recovery-visual{height:90px}
  body[data-v13-page="recovery"] .checkin-question{padding:14px 10px}

  /* Seasons and Tree: artwork and its controls should stay close together. */
  body[data-v13-page="seasons"] #seasonButtons{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  body[data-v13-page="seasons"] #seasonButtons .card-click{min-height:86px;padding:8px 3px;align-items:center;text-align:center;justify-content:center;gap:1px}
  body[data-v13-page="seasons"] #seasonButtons .pic{font-size:24px}
  body[data-v13-page="seasons"] #seasonButtons strong{font-size:11px;letter-spacing:0}
  body[data-v13-page="seasons"] #seasonButtons .small{font-size:9px;letter-spacing:0}
  body[data-v13-page="seasons"] .stage-grid,
  body[data-v13-page="tree"] .stage-grid{gap:11px}
  body[data-v13-page="seasons"] .hero-image figcaption,
  body[data-v13-page="tree"] .hero-image figcaption{font-size:12px;letter-spacing:1px;padding:9px 11px}
  body[data-v13-page="tree"] .growth svg{max-height:265px}
  body[data-v13-page="tree"] .tree-mobile-stages{margin-top:-2px;margin-bottom:4px}
  body[data-v13-page="tree"] .tree-mobile-stages button{min-height:58px;font-size:10px}
  body[data-v13-page="tree"] .stage-grid .glass.pad{padding:17px}

  /* Remaining utility pages */
  body[data-v13-page="reflect"] .wrap{padding:23px 14px 55px}
  body[data-v13-page="reflect"] .hero h1{font-size:clamp(35px,10vw,58px)}
  body[data-v13-page="reflect"] .media-card{min-width:0;padding:15px}
  body[data-v13-page="reflect"] .media-card h2{font-size:21px}
  body[data-v13-page="feedback"] .top,
  body[data-v13-page="add-to-phone"] .top{gap:10px;flex-wrap:wrap;margin-bottom:30px}
  body[data-v13-page="feedback"] .back,
  body[data-v13-page="add-to-phone"] .back{display:inline-flex;align-items:center;min-height:44px}
  body[data-v13-page="feedback"] .brand,
  body[data-v13-page="add-to-phone"] .brand{letter-spacing:2px;font-size:12px}
  body[data-v13-page="add-to-phone"] .card{padding:21px}
}

@media (max-width:365px){
  body[data-v13-page="index"] .hero{min-height:555px}
  body[data-v13-page="index"] .hero h1{font-size:43px}
  body[data-v13-page="index"] .tagline{font-size:9px;letter-spacing:1px}
  body[data-v13-page="tools"] .cover{max-width:220px}
  body[data-v13-page="tools"] .journey h3{font-size:19px}
  body[data-v13-page="recovery"] #recoveryCards strong{font-size:12px}
  body[data-v13-page="seasons"] #seasonButtons strong{font-size:10px}
  body[data-v13-page="tree"] .tree-mobile-stages button{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body[data-v13-page] *,body[data-v13-page] *::before,body[data-v13-page] *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Figure default browser margins were creating a hidden 27px sideways scroll
   on the Seasons illustration at phone/tablet sizes. */
@media(max-width:820px){
  body[data-v13-page="seasons"] .stage-grid > figure,
  body[data-v13-page="tree"] .stage-grid > figure{margin:0;min-width:0;width:100%}
  body[data-v13-page="seasons"] .stage-grid,
  body[data-v13-page="tree"] .stage-grid{min-width:0}
}