/* Let intermediate widths breathe before switching to desktop navigation. */
.duration-options{flex-wrap:wrap}
.duration-option{flex:1 1 85px}
@media (min-width:481px) and (max-width:699px){
  .app-shell{max-width:100%;border:0;box-shadow:none}
  .category-card{min-height:230px}
}

/* Tablet and desktop use document-sized content with navigation in its own row. */
@media (min-width:700px){
  body{background:var(--paper)}
  .app-shell{
    --content-gutter:32px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"header" "navigation" "progress" "content" "action";
    max-width:1440px;border:0;box-shadow:none;
  }
  .app-header{grid-area:header;padding:26px var(--content-gutter) 22px}
  .header-actions{gap:14px}
  .header-exchange-rate{margin-inline-end:8px}
  .header-exchange-rate>small,.header-exchange-rate>span>small{font-size:10px}
  .header-exchange-rate b{font-size:12px}
  #back-button:not([hidden])~.brand .brand-logo{display:block}
  .bottom-nav{
    grid-area:navigation;position:static;transform:none;width:auto;min-width:0;
    margin:0 var(--content-gutter) 10px;padding:6px;gap:5px;
    border-radius:18px;box-shadow:none;background:var(--surface);backdrop-filter:none;
  }
  .bottom-nav button{flex-direction:row;gap:9px;min-height:46px;font-size:12px;padding:10px 15px;border-radius:13px}
  .bottom-nav i{display:none}
  .progress-area{grid-area:progress;padding:20px var(--content-gutter) 18px;min-width:0}
  .stepper{max-width:680px;margin-inline:auto}
  .stepper li{font-size:11px;gap:10px}
  .screen,.with-action .screen,[data-native-action="true"] .with-action .screen{
    grid-area:content;min-width:0;padding:24px var(--content-gutter) 36px;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding-block:24px;
  }
  .screen::-webkit-scrollbar{display:block;width:5px}
  .screen::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
  .screen-heading{margin-bottom:30px}
  .screen-heading h1{font-size:34px}
  .screen-heading p:not(.eyebrow){font-size:14px}
  .eyebrow{font-size:12px;margin-bottom:10px}
  .category-grid{gap:18px}
  .category-card{min-height:255px;padding:18px 22px 22px;border-radius:27px}
  .category-art>svg{width:125px;height:125px}
  .category-card h2{font-size:21px}
  .category-card p{font-size:12px}
  .tile-count{font-size:10px;padding:4px 8px}
  .tile-arrow{width:29px;height:29px}
  .helper-link{font-size:12px;margin-top:25px}
  .pixel-footer{margin-top:14px}
  .service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .service-row{min-height:125px;padding:20px;gap:15px}
  .service-title{flex-wrap:wrap}
  .service-title h2{font-size:18px}
  .service-text p{font-size:12px}
  .service-en{font-size:11px}
  .service-tag{font-size:9px}
  .category-context{padding:12px 18px;font-size:13px;margin-bottom:26px}
  .category-context button{font-size:12px}
  .compact-product{padding:17px;margin-bottom:6px}
  .compact-product h2{font-size:16px}
  .compact-product button{font-size:12px}
  .plan-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
  .section-caption{font-size:13px;margin-top:24px}
  .section-caption small{font-size:11px}
  .plan-card{min-height:98px;padding:19px}
  .plan-name{font-size:18px}
  .plan-caption{font-size:12px}
  .plan-card .per-month{font-size:10px}
  .duration-options{gap:10px}
  .duration-option{min-height:84px;font-size:14px}
  .duration-option small{font-size:10px}
  .plan-features{font-size:11px;gap:14px;line-height:1.8}
  .review-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"fields summary";gap:28px;align-items:start}
  .review-summary{grid-area:summary}
  .review-fields{grid-area:fields;min-width:0}
  .review-fields .recipient-box:first-child{margin-top:0}
  .recipient-box{padding:21px}
  .recipient-label{font-size:14px}
  .order-card{padding:24px}
  .order-line{font-size:13px;padding-block:13px}
  .order-line strong{font-size:14px}
  .order-total strong{font-size:25px}
  .order-total small{font-size:11px}
  .receipt-divider{margin-inline:-24px}
  .review-edit{font-size:12px;min-height:44px}
  .inline-note{font-size:12px;line-height:2}
  .list-note{font-size:12px;line-height:2}
  .action-bar{
    grid-area:action;position:static;min-width:0;background:var(--paper);
    display:flex;align-items:center;justify-content:space-between;gap:28px;
    margin:0 var(--content-gutter);padding:20px 0 26px;border-top:1px solid var(--line);
  }
  .action-price{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}
  .action-price strong{font-size:24px;flex-wrap:wrap}
  .action-price strong small{font-size:11px}
  .action-bar .primary-button{width:auto;min-width:260px;max-width:100%;min-height:56px;margin-inline-start:auto;font-size:14px}
  .button-left{font-size:12px}
  [data-view="payment"] .screen>div,[data-view="receipt"] .screen>div{max-width:560px;margin-inline:auto}
  [data-view="orders"] .screen>div>.primary-button{max-width:360px}
  .stars-quantity-card{max-width:600px;margin-inline:auto;padding:30px}
  .support-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"options art";gap:30px;align-items:center}
  .support-options{grid-area:options}
  .support-banner-art{grid-area:art;height:280px;width:100%;margin:0}
  .support-banner-art>svg{height:220px;width:220px}
  .support-option{padding:22px}
  .support-option strong{font-size:15px}
  .support-option small{font-size:12px}
  .empty-state{padding:55px 20px}
  .sheet,.phone-login-sheet{inset:0;margin:auto;width:460px;max-width:calc(100% - 48px);max-height:calc(var(--app-height) - 64px);height:fit-content;border-radius:28px;padding:26px}
  .sheet-handle{display:none}
  .toast{bottom:35px;font-size:13px}
}

/* A persistent right-hand rail leaves the main canvas available for browsing. */
@media (min-width:1100px){
  .app-shell{
    --content-gutter:40px;
    grid-template-columns:210px minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"header header" "navigation progress" "navigation content" "navigation action";
  }
  .app-header{padding-block:30px}
  .brand>span{font-size:30px}
  .brand small{font-size:10px}
  .bottom-nav{
    align-self:stretch;align-items:stretch;justify-content:flex-start;flex-direction:column;
    margin:16px 20px 30px 0;padding:0 0 0 20px;gap:10px;border:0;
    border-inline-end:1px solid var(--line);border-radius:0;background:transparent;
  }
  .bottom-nav button{flex:0 0 auto;justify-content:flex-start;min-height:54px;font-size:13px;padding:15px 17px;border-radius:16px}
  .bottom-nav button:not(.active):hover{background:var(--soft);color:var(--ink)}
  .bottom-nav button:last-child{margin-top:auto}
  [data-theme="dark"] .bottom-nav{background:transparent;box-shadow:none;border-color:var(--line)}
  .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .category-card{min-height:270px;padding:17px 17px 22px}
  .category-card h2{font-size:19px}
  .category-card p{font-size:11px}
  .category-art>svg{height:118px;width:118px}
}

@media (min-width:1300px){
  .app-shell{grid-template-columns:230px minmax(0,1fr)}
  .category-card{min-height:300px;padding:20px}
  .category-art>svg{height:142px;width:142px}
  .category-card h2{font-size:22px}
  .category-card p{font-size:12px}
}