/* Moneeb-e — tablet + app-style mobile layout */
/* ========== RESPONSIVE ========== */
header.nav .nav-in{max-width:1600px; gap:16px}
header.nav .nav-brand,header.nav .nav-tools{flex-shrink:0}
header.nav .nav-user-label{max-width:10ch; overflow:hidden; text-overflow:ellipsis}
@media (min-width:1361px){
  header.nav .mnav{display:none}
}
@media (max-width:1360px){
  header.nav .nav-in > nav,header.nav .nav-links,header.nav .nav-cta{display:none !important}
  header.nav .menu-btn{display:inline-grid}
  .mnav{max-height:calc(100dvh - 76px); overflow-y:auto}
  .orbit .lbl{display:none}
}
@media (max-width:1180px){
  .nav-link{padding:0 10px; font-size:.88rem}
  .pk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .axes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clarity{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hero{min-height:0; padding-bottom:110px}
  .hero-grid,.about-grid,.values-grid,.plat-grid,.ruling-grid{grid-template-columns:minmax(0,1fr)}
  .orbit{max-width:420px}
  .ruling-aside{position:static}
  .step{grid-template-columns:minmax(0,1fr)}
  .gates{grid-template-columns:minmax(0,1fr); gap:0}
  .gates::before{top:22px; bottom:22px; inset-inline:auto; inset-inline-start:21px; width:1px; height:auto; background:repeating-linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 12px)}
  .gate{flex-direction:row; align-items:flex-start; text-align:start; gap:var(--s-5); padding-bottom:var(--s-6)}
  .gate h3{margin-top:6px}
  .gate p{max-width:none}
  .gate > div{display:flex; flex-direction:column; gap:4px}
  .start,.channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ========== MOBILE LAYOUT ========== */
.m-lbl{display:none}
@media (max-width:768px){
  .mb{--gutter:16px; -webkit-tap-highlight-color:transparent}
  /* lighter rendering for phones */
  .light-a,.light-b,.scroll-cue,.device .e{display:none}
  .lattice,.vision .gem-xl,.orbit .r2,.vg-ring-2,.contact .halo{animation:none}
  .contact .halo{width:480px; height:480px; filter:none}
  /* app bar */
  .nav,.nav.is-solid{background:color-mix(in oklab,var(--bg) 84%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line); padding-top:env(safe-area-inset-top)}
  header.nav .nav-in{height:60px; gap:8px}
  .nav-brand{font-size:17px}
  .mnav{top:calc(60px + env(safe-area-inset-top)); max-height:calc(100dvh - 60px - env(safe-area-inset-top)); overflow-y:auto; padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  /* type scale */
  .sec{padding-block:44px}
  .sec-head{gap:10px; margin-bottom:22px}
  .h2{font-size:1.72rem; line-height:1.32}
  .lead{font-size:1rem; line-height:1.8}
  .eyebrow{font-size:.8rem}
  .eyebrow::before{width:16px}
  /* hero = home screen */
  .hero{margin-top:-60px; padding-top:84px; padding-bottom:12px; min-height:0}
  .hero-grid{gap:4px}
  .orbit-wrap{order:-1}
  .orbit{max-width:210px}
  .orbit .lbl{display:none}
  .hero-copy{gap:18px; padding:22px 18px 18px; border-radius:28px; background:var(--surface); border:1px solid var(--line)}
  .hero-tag{font-size:.76rem; padding:5px 12px 5px 6px; flex-wrap:wrap; max-width:100%; border-radius:18px}
  .hero-title,.mb[dir="ltr"] .hero-title{font-size:clamp(2rem,9vw,2.55rem); overflow-wrap:anywhere}
  .hero-sub{font-size:1rem; line-height:1.8}
  .hero-ctas{flex-direction:column; gap:10px}
  .hero-ctas .btn{width:100%}
  .hero-ctas .btn,.contact-ctas .btn{white-space:normal; padding-block:12px; text-align:center}
  .hero-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border-top:0; padding-top:0}
  .hero-meta a{flex-direction:column; justify-content:center; gap:6px; min-height:74px; border-radius:18px; background:var(--surface-2); font-size:.76rem; color:var(--text)}
  .hero-meta svg{width:22px; height:22px; color:var(--gold)}
  .hero-meta .ltr{display:none}
  .m-lbl{display:inline}
  /* Keep every card in the normal page flow on phones. */
  .aud,.goals,.caps,.axes,.clarity,.start,.pk-row,.pillars,.gallery,.step-body,.app-steps,.buy-steps{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0}
  .aud{background:none; border:0; border-radius:0; overflow:visible}
  .aud>*,.goals>*,.caps>*,.axes>*,.clarity>*,.start>*,.pk-row>*,.pillars>*,.gallery>*,.step-body>*,.app-steps>*,.buy-steps>*{min-width:0; max-width:100%}
  .aud-item{border:1px solid var(--line); border-radius:22px; background:var(--surface); padding:22px 20px}
  .aud-item h3{font-size:1.15rem}
  .pillar{flex-direction:row; align-items:center; padding:12px 16px; border-radius:999px}
  .pillar svg{width:20px; height:20px; flex-shrink:0}
  .pillar span,.gate > div,.stage > div{min-width:0}
  .gate .oct{flex-shrink:0}
  .card-ui .wm{font-size:14px}
  .sec p,.sec h2,.sec h3,.sec h4,.sec .eyebrow,.pk{overflow-wrap:anywhere}
  .gallery{grid-auto-rows:auto}
  .gallery > .g{grid-column:auto; grid-row:auto}
  .g{aspect-ratio:4/5}
  .g4{aspect-ratio:auto}
  .g4 p{font-size:1.1rem}
  .cap,.axis,.sub,.start>div{border-radius:20px}
  .cl{padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--gold)}
  .goal{padding:18px; border-radius:20px; background:rgba(251,246,228,.08); border-top:0}
  .start{margin-top:28px}
  /* about: grouped list */
  .about-grid{gap:28px}
  .about-story{gap:20px}
  .about-story .big{font-size:1.2rem}
  .company{flex-direction:column; align-items:flex-start; gap:8px; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--surface)}
  .photo{border-radius:24px}
  .about-points{margin-top:14px; border:1px solid var(--line); border-radius:22px; background:var(--surface); padding-inline:18px}
  .ap{grid-template-columns:32px minmax(0,1fr); gap:10px; padding-block:16px}
  .ap:first-of-type{border-top:0}
  .ap:last-child{border-bottom:0}
  .ap h3{font-size:1.05rem}
  .ap p{font-size:.92rem}
  /* vision as an inset card */
  .vision{margin-inline:16px; border-radius:28px; padding-block:36px}
  .vision .wrap{padding-inline:20px}
  .vision .goals{margin-top:28px}
  .vision-q{font-size:1.55rem; line-height:1.55}
  .vision .gem-xl{width:300px; height:300px; inset-inline-end:-30%}
  /* values */
  .vg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; max-width:none; aspect-ratio:auto}
  .vg-lines,.vg-core{display:none}
  .vg-node{position:static; transform:none; width:100%; height:auto; min-height:64px; justify-content:flex-start; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:start}
  .vg-node::after{display:none}
  .vg-node .dot{position:static; flex-shrink:0; width:14px; height:14px; transform:rotate(22.5deg)}
  .vg-node .t{position:static; transform:none; min-width:0; font-size:.86rem; white-space:normal; overflow-wrap:anywhere; text-shadow:none}
  .vg-node.is-on .dot,.vg-node:hover .dot{transform:rotate(22.5deg) scale(1.18)}
  .v-panel .top{flex-wrap:wrap; gap:8px}
  .v-panel{padding:20px; border-radius:22px; gap:14px}
  .v-panel h3{font-size:1.9rem}
  .v-panel p{font-size:1rem}
  /* journey: compact timeline cards */
  .tl{padding-inline-start:40px; gap:30px}
  .tl-rail{inset-inline-start:13px}
  .step{gap:14px}
  .step .marker{inset-inline-start:-38px; width:24px; height:24px}
  .step .marker .gem{width:24px; height:24px}
  .step-no{font-size:2.3rem}
  .step-head h3{font-size:1.35rem}
  .step-head p{font-size:.95rem}
  .sub{padding:16px}
  /* packages */
  .pk-head{margin-bottom:22px; gap:14px}
  .pk-head .btn{white-space:normal}
  .pk{border-radius:24px}
  .pk-vis{aspect-ratio:1/.8}
  .pk-vis .big{font-size:3.4rem}
  .price .amt{font-size:2rem}
  /* platform */
  .plat-grid{gap:28px}
  .device{padding:16px; border-radius:26px}
  .card-ui{padding:20px 16px; border-radius:20px}
  .caps{margin-top:24px}
  /* quality */
  .sub-h{margin-top:36px; font-size:1.35rem}
  .axes{margin-top:18px !important}
  .gate{padding-bottom:22px}
  /* rulings: grouped list */
  .ruling-grid{gap:22px}
  .ruling-aside{gap:14px}
  .cond{border-radius:20px; font-size:.95rem; padding:18px}
  .schools{border:1px solid var(--line); border-radius:22px; background:var(--surface); padding-inline:18px}
  .school{grid-template-columns:minmax(0,1fr); gap:4px; padding-block:16px}
  .school:first-child{border-top:0}
  .school:last-child{border-bottom:0}
  .school h3{font-size:1.3rem}
  .school p{font-size:.94rem}
  .clarity{margin-top:32px}
  /* contact */
  .contact{text-align:start}
  .contact .gem-c{width:60px; height:60px; margin:0 0 18px}
  .contact .eyebrow{justify-content:flex-start !important}
  .mb .contact-title{font-size:2.05rem; margin-inline:0}
  .contact .lead{margin-inline:0}
  .contact-ctas{flex-direction:column; gap:10px; margin-top:24px}
  .contact-ctas .btn{width:100%}
  .channels{display:flex; flex-direction:column; gap:0; margin-top:24px; border-radius:22px; background:var(--surface)}
  .ch{flex-direction:column; justify-content:space-between; align-items:flex-start; padding:16px 18px; min-height:60px; background:transparent; border-top:1px solid var(--line)}
  .ch:first-child{border-top:0}
  .ch span{font-size:.92rem; overflow-wrap:anywhere; min-width:0}
  .ch small{flex-shrink:0}
  .mb .partners{margin-inline:0}
  .foot{padding-block:22px}
  .foot-in{flex-direction:column; align-items:flex-start; gap:6px}
  /* touch feedback */
  .btn:active,.pk:active,.cap:active,.aud-item:active,.ch:active{transform:scale(.97)}
  .pk:hover,.cap:hover,.pillar:hover{transform:none}

}
@media (max-width:480px){
  header.nav .nav-brand{font-size:14px}
  header.nav .wm{gap:5px}
  header.nav .nav-tools{gap:4px}
  header.nav .icon-btn,header.nav .nav-user-btn{width:36px; height:36px; min-height:36px; padding:0; flex-shrink:0}
  header.nav .nav-user-label{display:none}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:380px){
  header.nav .nav-brand{font-size:14px}
  header.nav .nav-brand .wm-en{display:none}
  .h2{font-size:1.55rem}
}

/* ===== WHY / APP SHOWCASE / PURCHASE JOURNEY ===== */
@media (max-width:1180px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .app-step:nth-child(2){margin-top:0}
  .buy-step:not(:last-child)::after{display:none}
  .why-ic{width:44px; height:44px}
}