:root{
   --bg: #f6f7fb;
   --card: #ffffff;
   --text: #111827;
   --muted: #6b7280;
   --line: rgba(17,24,39,.08);
   --brand: #f6c56b;
   --brand-2: #f2b24b;
   --shadow: 0 10px 30px rgba(17,24,39,.10);
   --radius: 16px;
 }
 
 *{ box-sizing: border-box; }
 html,body{ height: 100%; }
 body{
   margin: 0;
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
   color: var(--text);
   background: var(--bg);
   overflow: hidden;
 }
 
 a{ color: inherit; text-decoration: none; }
 
 .page{
   position: fixed;
   inset: 0;
   overflow: hidden;
 }
 
 .page::before{
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(1200px 600px at 50% -80px, rgba(246,197,107,.35), rgba(246,197,107,0)) , var(--bg);
   z-index: 0;
 }
 
 .page--warm::before{
   background: #fbf1df;
 }

 .shell{
   max-width: 480px;
   margin: 0 auto;
   height: 100%;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   padding: calc(env(safe-area-inset-top) + 10px) 14px 0;
 }
 
 .content{
   flex: 1;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   padding-bottom: calc(env(safe-area-inset-bottom) + 28px);
 }

 .topbar{
   display: grid;
   grid-template-columns: 44px 1fr 44px;
   align-items: center;
   gap: 6px;
   padding: 6px 2px 12px;
 }
 
 .topbar__title{
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   text-align: center;
   letter-spacing: .2px;
 }
 
 .icon-btn{
   width: 44px;
   height: 44px;
   border: 0;
   background: transparent;
   border-radius: 12px;
   display: grid;
   place-items: center;
   cursor: pointer;
 }
 .icon-btn:active{ background: rgba(17,24,39,.06); }
 
 .card{
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
 }
 
 .download{
   padding: 14px;
 }
 
 .download__row{
   display: grid;
   grid-template-columns: 54px 1fr;
   gap: 12px;
   align-items: start;
 }
 
 .app-icon{
   width: 54px;
   height: 54px;
   border-radius: 14px;
   border: 1px solid rgba(17,24,39,.10);
   background: #fff;
 }
 
 .download__title{
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 4px;
 }
 
 .download__desc{
   margin: 0;
   font-size: 12px;
   line-height: 1.5;
   color: var(--muted);
 }
 
 .section-title{
   margin: 16px 6px 10px;
   font-size: 13px;
   color: #111827;
   font-weight: 700;
 }
 
 .steps{
   display: grid;
   gap: 12px;
 }
 
 .step{
   padding: 14px;
 }
 
 .step__row{
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 12px;
 }
 
 .badge{
   width: 44px;
   height: 44px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: 12px;
   color: #7a4a02;
   background: rgba(246,197,107,.35);
   border: 1px solid rgba(246,197,107,.5);
 }
 
 .step__text{
   margin: 2px 0 10px;
   font-size: 13px;
   line-height: 1.6;
   color: #111827;
 }
 
 .primary-btn{
   width: 100%;
   height: 46px;
   border-radius: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: linear-gradient(180deg, var(--brand), var(--brand-2));
   border: 1px solid rgba(122,74,2,.12);
   color: #3d2a06;
   font-weight: 800;
   box-shadow: 0 12px 26px rgba(242,178,75,.32);
 }
 .primary-btn:active{ transform: translateY(1px); }
 
 .primary-btn__icon{
   width: 18px;
   height: 18px;
 }
 
 .shot{
   width: 100%;
   border-radius: 18px;
   border: 1px solid var(--line);
   background: #fff;
   display: block;
 }
 
 .shot-grid{
   display: grid;
   gap: 10px;
 }
 
 .app-wrap{
   padding: 10px 0 0;
 }

 .app-hero{
   padding: 14px 2px 10px;
 }

 .app-hero__title{
   margin: 0 0 10px;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: .2px;
 }

 .app-hero__list{
   margin: 0 0 10px;
   padding-left: 18px;
   color: #111827;
   line-height: 1.65;
   font-size: 13px;
 }

 .app-hero__hint{
   margin: 0;
   color: #111827;
   line-height: 1.65;
   font-size: 13px;
 }

 .app-box{
   background: rgba(255,255,255,.65);
   border: 1px solid rgba(17,24,39,.06);
   border-radius: var(--radius);
   padding: 14px;
 }

 .app-step{
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 12px;
   padding: 12px 0;
 }

 .app-step + .app-step{
   border-top: 1px solid rgba(17,24,39,.08);
 }

 .app-step__title{
   margin: 0 0 6px;
   font-size: 14px;
   font-weight: 900;
 }

 .app-step__desc{
   margin: 0;
   color: var(--muted);
   line-height: 1.6;
   font-size: 13px;
 }

 .app-section{
   margin-top: 16px;
 }

 .app-section__title{
   margin: 0 2px 10px;
   font-size: 18px;
   font-weight: 900;
   letter-spacing: .2px;
 }

 .btn-flat{
   height: 52px;
   border-radius: 14px;
   background: rgba(246,197,107,.55);
   border: 1px solid rgba(122,74,2,.12);
   box-shadow: none;
 }

 .help-card{
   padding: 14px;
 }

 .help-desc{
   margin: 0 0 14px;
   color: var(--muted);
   line-height: 1.6;
   font-size: 13px;
 }

 @media (min-width: 720px){
   .shell{ padding-top: 28px; }
   .topbar__title{ font-size: 17px; }
 }