/* HiHiro device-specific composition layer.
   Desktop and mobile are intentionally composed as two experiences, not simple scale variants. */

@media (min-width:48rem){
  body.home-v2 .hero-stage{grid-template-columns:.95fr 1.05fr;gap:42px;min-height:720px}
  body.home-v2 .hero-copy-v3{order:1;text-align:start}
  body.home-v2 .hero-visual{order:2;min-height:610px}
  body.home-v2 .ribbon-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  body.home-v2 .split-story{grid-template-columns:1.03fr .97fr}
  body.home-v2 .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.home-v2 .app-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

  body.products-v2 .products-hero{grid-template-columns:1.05fr .95fr;gap:34px}
  body.products-v2 .product-focus-grid{grid-template-columns:1fr 1fr}
  body.products-v2 .future-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.products-v2 .products-studio-cta{grid-template-columns:1fr auto}

  body:not(.home-v2):not(.products-v2) .studio-intro{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);align-items:center}
  body:not(.home-v2):not(.products-v2) .workspace-grid{grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr)}
  body:not(.home-v2):not(.products-v2) .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:47.99rem){
  :root{--mobile-edge:12px;--mobile-radius:22px}
  html{-webkit-text-size-adjust:100%;scroll-padding-top:112px}
  body{overflow-x:hidden}

  .topbar{position:sticky;top:0;z-index:100;padding:.45rem var(--mobile-edge) 0!important;background:linear-gradient(180deg,rgba(247,250,255,.97),rgba(247,250,255,.76),transparent)!important;backdrop-filter:blur(18px)}
  .topbar-inner{width:100%;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand menu" "nav nav"!important;gap:.48rem!important;padding:.52rem!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(34,75,121,.09)}
  .brand-lockup{grid-area:brand!important;min-width:0}
  .brand-word{font-size:1.12rem!important}
  .brand-mark{width:32px!important;height:32px!important}
  .site-menu-wrap{grid-area:menu!important}
  .menu-toggle{width:40px!important;height:40px!important;border-radius:12px!important}
  .primary-nav{grid-area:nav!important;display:grid!important;grid-template-columns:repeat(3,minmax(82px,1fr));gap:5px;width:100%!important;padding:4px!important;overflow:visible!important}
  .primary-nav a{min-height:36px!important;padding:.36rem .25rem!important;border-radius:10px!important;font-size:.76rem!important;white-space:nowrap}
  .menu-panel{position:fixed!important;top:102px!important;left:var(--mobile-edge)!important;right:var(--mobile-edge)!important;width:auto!important;max-height:calc(100dvh - 116px);overflow:auto;border-radius:18px!important;box-shadow:0 24px 70px rgba(17,38,68,.2)!important}
  .settings-choices{grid-template-columns:1fr 1fr!important}

  body.home-v2 .v2-wrap,body.products-v2 .v2-wrap{width:calc(100% - 24px)!important}
  body.home-v2 .v2-section,body.products-v2 .v2-section{padding:54px 0!important}
  body.home-v2 .v2-section-head,body.products-v2 .v2-section-head{display:block!important;margin-bottom:20px!important;text-align:start}
  body.home-v2 .v2-section-head h2,body.products-v2 .v2-section-head h2{font-size:clamp(1.8rem,8.8vw,2.7rem)!important;line-height:1.2!important;letter-spacing:-.03em!important}
  body.home-v2 .v2-section-head>p,body.products-v2 .v2-section-head>p{margin-top:14px!important;line-height:1.85!important}
  .v2-kicker{font-size:.66rem!important;padding:7px 10px!important}

  /* Home mobile composition: brand first, message second, touch-first rails. */
  body.home-v2 .hero-stage{display:flex!important;flex-direction:column;gap:14px!important;min-height:0!important;padding:18px 0 28px!important}
  body.home-v2 .hero-stage::before{inset:0!important;border-radius:28px!important}
  body.home-v2 .hero-visual{order:1!important;width:100%;min-height:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"brand brand brand" "pdf business studio";gap:8px;padding:14px 10px 10px!important}
  body.home-v2 .hero-light{display:none!important}
  body.home-v2 .logo-photo-card{grid-area:brand;width:100%!important;height:245px!important;border-radius:24px!important;box-shadow:0 20px 48px rgba(36,78,126,.13)!important}
  body.home-v2 .logo-photo-window{width:95%!important;height:82%!important;border-radius:18px!important}
  body.home-v2 .logo-photo-window img{transform:scale(1.08)!important}
  body.home-v2 .asset-note{bottom:10px!important;left:14px!important;font-size:.52rem!important}
  body.home-v2 .glass-float{position:relative!important;inset:auto!important;min-width:0!important;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 8px!important;border-radius:14px!important;box-shadow:0 10px 24px rgba(40,80,126,.09)!important}
  body.home-v2 .float-pdf{grid-area:pdf}.home-v2 .float-business{grid-area:business}.home-v2 .float-studio{grid-area:studio}
  body.home-v2 .glass-float .tile-icon{width:30px!important;height:30px!important;border-radius:9px!important;margin-bottom:4px}
  body.home-v2 .glass-float b{font-size:.7rem!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.home-v2 .glass-float small{font-size:.61rem!important;line-height:1.35}
  body.home-v2 .hero-copy-v3{order:2!important;padding:20px 18px 23px!important;text-align:center!important}
  body.home-v2 .hero-copy-v3 h1{font-size:clamp(2.25rem,11.8vw,3.45rem)!important;line-height:1.12!important;letter-spacing:-.045em!important;margin:17px 0 14px!important}
  body.home-v2 .hero-lead{font-size:.95rem!important;line-height:1.9!important;margin-inline:auto!important}
  body.home-v2 .hero-slogan{display:grid!important;gap:4px!important;width:100%!important;margin-top:18px!important;text-align:center!important;padding:12px!important}
  body.home-v2 .hero-slogan strong{font-size:.92rem}.home-v2 .hero-slogan span{font-size:.78rem!important}
  body.home-v2 .v2-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:20px!important}
  body.home-v2 .v2-cta{width:100%!important;min-height:48px!important}
  body.home-v2 .hero-trust-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px!important;margin-top:16px!important}
  body.home-v2 .hero-trust-row span{justify-content:center!important;display:grid!important;gap:2px!important;padding:8px 5px!important}
  body.home-v2 .hero-trust-row em{font-size:.7rem!important}

  body.home-v2 .product-ribbon{margin-top:12px!important;padding:18px 14px!important;border-radius:22px!important}
  body.home-v2 .ribbon-heading{align-items:flex-start!important;gap:10px!important}.home-v2 .ribbon-heading h2{font-size:1.35rem!important}.home-v2 .ribbon-heading>a{font-size:.72rem!important}
  body.home-v2 .ribbon-grid{display:flex!important;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;gap:8px!important;padding:2px 1px 8px;scrollbar-width:none}
  body.home-v2 .ribbon-grid::-webkit-scrollbar{display:none}
  body.home-v2 .mini-product{flex:0 0 76%;scroll-snap-align:start;min-height:64px!important;padding:12px!important}

  body.home-v2 .split-story{display:flex!important;flex-direction:column;gap:16px!important}
  body.home-v2 .story-copy{padding:0!important}.home-v2 .story-copy h2{font-size:clamp(1.9rem,9vw,2.7rem)!important}.home-v2 .story-copy>p{line-height:1.9!important}
  body.home-v2 .principle-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px!important;padding:2px 1px 8px;scrollbar-width:none}
  body.home-v2 .principle-grid::-webkit-scrollbar{display:none}
  body.home-v2 .principle-grid article{flex:0 0 82%;scroll-snap-align:start;min-height:150px!important;padding:18px!important}
  body.home-v2 .vision-card{border-radius:24px!important}.home-v2 .vision-card .globe-frame{min-height:250px!important;padding:10px!important}.home-v2 .globe-frame img{max-height:300px!important}.home-v2 .vision-copy{padding:20px!important}

  body.home-v2 .service-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;padding:2px 1px 9px;scrollbar-width:none}
  body.home-v2 .service-grid::-webkit-scrollbar{display:none}
  body.home-v2 .service-card{flex:0 0 84%;scroll-snap-align:start;min-height:215px!important;padding:20px!important}
  body.home-v2 .service-cta{display:grid!important;grid-template-columns:1fr!important;padding:19px!important;border-radius:20px!important}.home-v2 .service-cta .v2-cta{width:100%!important}
  body.home-v2 .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.home-v2 .app-tile{min-height:82px!important;padding:11px!important}.home-v2 .app-tile b{font-size:.76rem!important}.home-v2 .app-tile small{font-size:.65rem!important}

  /* Products mobile composition: visual cover, focused product cards, swipeable future catalog. */
  body.products-v2 .products-hero{display:flex!important;flex-direction:column;gap:15px!important;padding:18px 0 28px!important}
  body.products-v2 .products-hero>div:first-child{order:2;text-align:center;padding:4px 10px}
  body.products-v2 .products-hero h1{font-size:clamp(2.2rem,10.8vw,3.4rem)!important;line-height:1.13!important;margin:16px 0 13px!important}
  body.products-v2 .products-hero p{font-size:.94rem!important;line-height:1.9!important}
  body.products-v2 .products-brand-panel{order:1;min-height:245px!important;padding:12px!important;border-radius:24px!important}
  body.products-v2 .products-logo-window{height:190px!important;width:96%!important;border-radius:16px!important}.products-v2 .products-logo-window img{transform:scale(1.08)!important}
  body.products-v2 .product-focus-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:6px 0 42px!important}
  body.products-v2 .focus-card{min-height:0!important;padding:21px!important;border-radius:23px!important}.products-v2 .focus-card h2{font-size:2rem!important;margin:34px 0 10px!important}.products-v2 .benefit-row{gap:5px!important}.products-v2 .benefit-row span{font-size:.7rem!important}
  body.products-v2 .future-product-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px!important;padding:2px 1px 10px;scrollbar-width:none}
  body.products-v2 .future-product-grid::-webkit-scrollbar{display:none}
  body.products-v2 .future-product-grid article{flex:0 0 82%;scroll-snap-align:start;min-height:118px!important;padding:16px!important}
  body.products-v2 .products-studio-cta{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin:48px 0 68px!important;padding:25px 20px!important;border-radius:24px!important;text-align:center}.products-v2 .products-studio-cta .v2-cta{width:100%!important}

  /* Studio, account, project and auth layers get a dedicated compact workflow. */
  body:not(.home-v2):not(.products-v2) main{padding-inline:var(--mobile-edge)}
  body:not(.home-v2):not(.products-v2) .hero-shell.studio-intro{display:flex!important;flex-direction:column!important;gap:14px!important;padding:22px 16px!important;border-radius:24px!important}
  body:not(.home-v2):not(.products-v2) .studio-intro .hero-copy{text-align:center}
  body:not(.home-v2):not(.products-v2) .studio-intro .hero-actions{display:grid!important;grid-template-columns:1fr!important}.studio-intro .hero-actions .button{width:100%!important}
  body:not(.home-v2):not(.products-v2) .studio-visual{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px!important;scrollbar-width:none}
  body:not(.home-v2):not(.products-v2) .studio-visual::-webkit-scrollbar{display:none}
  body:not(.home-v2):not(.products-v2) .studio-visual .surface-card{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  body:not(.home-v2):not(.products-v2) .section{padding-block:42px!important}
  body:not(.home-v2):not(.products-v2) .service-grid{grid-template-columns:1fr!important}
  body:not(.home-v2):not(.products-v2) .request-gate{margin:24px 0!important;padding:18px!important;border-radius:20px!important}
  body:not(.home-v2):not(.products-v2) .workspace-shell{padding:14px!important;border-radius:22px!important}
  body:not(.home-v2):not(.products-v2) .workspace-grid{grid-template-columns:1fr!important;gap:10px!important}
  body:not(.home-v2):not(.products-v2) .workspace-card{padding:15px!important;border-radius:18px!important}
  body:not(.home-v2):not(.products-v2) .form-grid.two{grid-template-columns:1fr!important}
  body:not(.home-v2):not(.products-v2) .service-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:not(.home-v2):not(.products-v2) .chat-messages{min-height:230px!important;max-height:48vh!important}
  body:not(.home-v2):not(.products-v2) .chat-composer{grid-template-columns:1fr!important}.chat-composer .button{width:100%!important}
  .auth-modal{align-items:end!important;padding:0!important}.auth-dialog{width:100%!important;max-height:92dvh!important;border-radius:24px 24px 0 0!important;padding:14px!important}.auth-dialog-head{position:sticky;top:0;z-index:2;padding-bottom:8px;background:inherit}

  footer{padding-inline:var(--mobile-edge)}
  .footer-inner{gap:12px!important;align-items:flex-start!important}.footer-brand{min-width:0}.footer-tagline{font-size:.68rem!important}

  html[dir="ltr"] .hero-copy-v3,html[dir="ltr"] .products-hero>div:first-child{text-align:center!important}
  html[dir="ltr"] .menu-panel{direction:ltr}
}

@media (max-width:23rem){
  body.home-v2 .hero-visual{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "pdf business" "studio studio"}
  body.home-v2 .float-studio{align-items:center}
  body.home-v2 .app-grid{grid-template-columns:1fr!important}
  .primary-nav a{font-size:.7rem!important}
}